画像とテキスト配置の各種事例の紹介
事例A 左画像に右テキスト 1.回り込み 2.固定幅
事例A-1.回り込み
テキスト注意点
画像右横にテキストを回り込ませるには、画像タグに「float:left;」が必要です。
テキスト左の余白「margin」や「padding」が効きません、これはテキスト配置位置が左端になるため、余白部分が画像の下に隠れてしまうからです。
左に余白を入れたい時は、テキストを「span」タグで囲む。このタグはインライン要素なので左に余白が出来る。補足:「p」や「div」等多くのタグはブロック要素で改行を伴う。
尚、「span」タグを使わずに、「text-indent」で先頭の文字にスペースを入れることが出来る。
事例A-2.固定幅
テキストをボックス囲み
ボックスに幅を%で指定して固定。画像とテキストの%幅の合計97%が目安。表示が画面下の場合、合計値を小さくする。
「imgタグ」内に幅指定は必須で入れないとアップしたままのサイズで表示される。
この例では、画像のpタグが45%で「img」が100%なので、アップ画像が45%表示に。
事例A-1・事例A-2 html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- ***** 事例A-1 回り込み ***** --> <div class="f_left" style="width:49%;"> <p>事例A-1.回り込み</p> <p class="f_left mgn_r10" style="width:45%;"> <a href="url"> <img src="url" style="width:100%;" alt="*"></a></p> <div class="mgn_r10"> <p><strong>テキスト注意点</strong></p> <p><span class="mgn_l15">テキスト</span></p> ・・・ </div> </div> <!-- ***** 事例A-2 固定幅 ***** --> <div class="f_left" style="width:49%;"> <p>事例A-2.固定幅</p> <p class="f_left mgn_r10" style="width:45%;"> <a href="url"> <img src="url" style="width:100%;" alt="*"></a></p> <div class="f_left" style="width:50%;"> <p class="f_bold">テキストをボックス囲み</p> <p class="indent_1">テキスト</p> ・・・ </div> </div> <!-- 上記のfloatを解除 --> <div style="clear:both;"></div> |
style.cssからの利用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.f_bold{ font-weight:bold;} .f_left{ float:left;} .f_right{ float:right; .mgn_r10{ margin-right:10px;} .mgn_r15{ margin-right:15px;} .mgn_l15{ margin-left:15px;} .indent_1{ text-indent:1em; |
転載でご利用の場合
回り込み:2~12行をコピーし2行目の「width:49%;」を「98%前後」に。
固定幅:14~24行をコピーし14行目の「width:49%;」を「98%前後」に。画像の幅とテキストの幅の%合計値を「98%前後」に。
- 行
- 説明
- 2~24
- 「事例A-1とA-2」の画像とテキストを表示する全体のボックス。
- 2
- 幅49%はA-1とA-2を左右に並べた時に見やすくするための間隔確保。画像のfloat:left; は必須。
- 4-6
- pタグ内に画像を挿入。imgタグはインライン要素なので、ブロックレベル要素の中に入れるのが正規だが、pタグに入れない場合はpタグのCSSをimgタグに入れる必要がある。
- 7~11
- divボックスで囲んでいるのは、A-1とA-2の間にスペースを確保するため。
- 9
- 左「margin」や「padding」が効かないので、「span」タグを利用。尚、テキストの字下げcss「text-indent」は「span」タグでは効かない。テキストの先頭に半角スペースの特殊文字を使う方法もある。
- 21
- テキスト全体ををボックスで囲んでいるので、「margin」・「padding」や「text-inndent」使える。
事例B 左テキストに右画像 1.回り込み 2.固定幅
事例B-1.回り込み
テキスト配置
テキストが左なので、左「margin」・「padding」が使えるので、A1で挿入の「span」タグは不要で「p」タグに挿入する。
画像の右配置は、A-1の画像タグを「float:right;」に変えるだけです。また、A-1で使えなかった「span」タグ内の「text-indent」が使える。
事例B-2.固定幅
テキストをボックス囲み
テキスト部分がボックス幅で固定されているので、画像を「float:left」を「float-right」に変えるだけです。
テキストと画像の間にスペースを取りたい場合、画像タグに「margin-left」を挿入する。
- 行
- htmlは上記と殆ど同じなので、違いについて
- 4
- 「f_left」を「f_right」に
- 16
- 「f_left」を「f_right」に
事例C 画像の中にテキスト表示
1 2 3 4 5 6 7 8 9 |
<div style="position:relative;"> <p><img src="url" alt="*"></p> <p style="position:absolute; color:yellow; top:13%; left:5%; font-weight:bold; font-size:1.25em;">カエデ(楓)</p> <p style="position:absolute; top:80%; left:8%; color:#fff; font-weight:bold; font-size:1.1em;">カエデが紅葉して黄葉 ?</p> </div> |
- 行
- 説明
- 1~9
- 画像と中に入れるテキストを全体のボックスで囲み、相対配置「position:relative;」を指定。
- 2
- 画像の挿入
- 3-5
- テキストの挿入。テキストは絶対配置「position:absolute;」とし位置を指定する。指定は左上端を起点にして、上端から「top:00%;」左端から「left:00%;」と設定。
「px」も使えるが、レスポンシブ対応にするため 「%」指定が標準。
- 6-8
- 2つ目のテキストの挿入。上記と同じ要領で。