アプリ版：「スタンプのみでお礼する」機能のリリースについて

htmlで文字列の回り込みが上手くできません。

解決済

  • 質問者：redcurb
  • 質問日時：
  • 回答数：8件

htmlの勉強を始めた初心者です。
画像の右側に文字を回り込ませようと下記のように入力したのですが、うまくできません。
どこがおかしいのでしょか？
アドバイス宜しくお願いします。

<html>
<head>
<title>xxx</title>　
</head>

<body>
<img src="xxx.jpg" width="145" height="40" align="left">
<h3>～xxxxx～</h3>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.1

  • 回答者： Nine-nine
  • 回答日時：

多分できていると思うけど、


ｈ3ってページ内で３番目に大きな「見出し」って意味なのさ。それで、見出しは「かたまり」として扱われるお約束なので、前後に改行が入るお約束になっています。

だから、<h3>なんてせずに
<body>
<img src="xxx.jpg" width="145" height="40" align="left">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<h3>～xxxxx～</h3>
</body>
</html>
とかでＯＫ？

それと始めたばかりなら、変な先生に掛かっちゃダメだよ。昔のやり方を覚えると今のやり方にするのに苦労するから。とりあえず文字の大きさを変えるには<font size=>なんて説明や太くするには<b></b>で挟みましょう。って説明のところは全体に避けた方が、いいから。気をつけてね。

そんなことには全く触れないところで勉強される事をお奨めします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

アドバイスありがとうございます。前後に改行が入るお約束になっているとは知りませんでした。
独学で本を読みながら勉強しているのですが、本変えた方がいいのでしょうか？
太字は<b>で挟めって書いてあるので・・・

通報する
お礼日時：2008/06/05 19:07

No.2

とりあえずimgはインライン要素なのでpなりdivなりで囲ってやりましょう。


そしてalignは推奨されていない属性なので、pに対してcssでfloatを指定します。


<head>
<style type="text/css">
p {float:left;}
</style>
</head>

<p><img src="xxx.jpg" width="145" height="40"></p>
<h3>～xxxxx～</h3>
    • good
    • 0
    • 件
通報する
この回答へのお礼

アドバイスの通りやりましたが、うまく出来ません。
alignは推奨されていない属性との事ですが、使わない方がいいという事でしょか？

通報する
お礼日時：2008/06/05 19:25

No.3

  • 回答者： Nine-nine
  • 回答日時：

＃1です。


私、img はh3への装飾じゃないかと最初考えたです。バックグランドかなぁ？と。今インラインとか言っても理解できないんじゃないかなぁと、でも＃2さんの答えがでましたので、imgの意味を聞きたいですね。

imgの中身は、h3へのキャッチアイ的なすべてのｈ3に共通することですか？それとも、１回ずつ変わるそれが他のものに置き換わってはいけない意味あるものですか？

もし、キャッチアイならh3だけでできます。ｈ3だけでする方が、正式なやり方なので、もしよければ教えてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

確かにインラインの意味が分かりません。
すみません、文章の意味がよく分かりません。
初心者もので・・・

通報する
お礼日時：2008/06/05 19:30

No.4ベストアンサー

  • 回答者： Nine-nine
  • 回答日時：

<html>


<head>
<title>xxx</title>
<style>
h3{
background:(xxx.jpg) no-repeat;
padding:160px;
height:40px
}
</style>
</head>

<body>
<h3>～xxxxx～</h3>
<p>本文</p>
<h3>～xxxxx～</h3>
<p>本文</p>
<h3>～xxxxx～</h3>
<p>本文</p>
</body>
</html>
今のやり方はこんな感じですね。見出しｈ3とhtmlでは書いておいて、h3に対して別の場所でデザインを付けます。今の場合、xxx.jpgを見出しのマーク（キャッチアイ）という扱いにしています。
ｈ3という見出しの格が出てきた場合は何度でも同じスタイルが適用されます。

今のやり方を覚えたいなら、お手持ちの本は参考にされない方がいいです。
入門にお奨めのサイトをいくつか上げておきます。

●ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html
30分間HTML入門とスタイルシートに一度目を通され、実行されることをお奨めします。細かいことより概念を覚えることで今後も間違ったサイトを避けることができますし、習得の近道です。

ちょっと、小難しそうでどうしても馴染めない場合は、以下のどれか１つを1つだけでいいですから、一通り通してみてください。どれも基本だけです。
●ちょっと詳しいHTMLとCSS
http://mynotes.jp/lecture/html-css/
最初に間違えた学習をした人の為に書かれてます。真っ白は人ならスーっと入ります。
●初心者のためのホームページ作成講座
http://members.jcom.home.ne.jp/jintrick/Personal …
最初からきちんとした方法で覚えることができれば「簡単」。しかし最初に間違った方法で覚えてしまうと「異常に難しい」のが、HTMLです。
●はじめてのWebドキュメントづくり
http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
パステルとーんでとっつきやすく表現されてます。
●ウエブサイト作成ガイド
http://www.oyakonews.com/oyanews/homep/creating. …
見た目で作れるオ－サリングの長短から説明され、その後手打ちの作成講座に移行します。

それと、自らを初心者という言葉は、努力しない言い訳に使われてきたので、Ｑ＆Ａサイトでは嫌われる傾向があります。初心者・教えてチャンなどと毛嫌いされ、スルーされることが多いので、使われない事をお奨めします。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： Nine-nine
  • 回答日時：

ごめん、ミスった


padding:160px;
を
padding-left:160px;
に変えてください。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： Nine-nine
  • 回答日時：

お恥ずかしい。

まだ、ミスがありました。
書き直します。
<html>
<head>
<title>xxx</title>
<style>
h3{
background:url(xxx.gif) no-repeat 0 0;
padding-left:160px;
height:40px
}
</style>
</head>

<body>
<h3>～xxxxx～</h3>
<p>本文</p>
<h3>～xxxxx～</h3>
<p>本文</p>
<h3>～xxxxx～</h3>
<p>本文</p>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

とんでもない。大変参考になりました。教えて頂いたサイトも大変参考になりました。ありがとうございました！

通報する
お礼日時：2008/06/06 18:32

No.7

＞alignは推奨されていない属性との事ですが、使わない方がいいという事でしょか？



そうですね。携帯専用のページだとまだ必要かもしれませんが、PCで見るページであればalignは推奨されていません。
変わりにCSSでtext-alignやmarginを使うことになります。

HTMLはタグによって意味づけをする・CSSは見た目を扱う、というように役割を分けることによって、見た目のせいで閲覧が難しいページでも
CSSをオフにすることで、最低限内容だけは伝えられるというメリットがあります。
HTMLで構造を定義すると閲覧者の融通が効かないんですね。
    • good
    • 0
    • 件
通報する

No.8

HTMLで構造を・・・　→　HTMLで見た目を・・・


でした。訂正します。
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変参考になりました！ありがとうございます。

通報する
お礼日時：2008/06/09 00:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報