画像配置と回り込み


このブログ、2月1日の画像と文字配置について『テーブルですか?』とのお尋ねがありましたので書いておきます。これはテーブルは使っていません。下のソースのようにDIVタグを2重に使っています。(この場合は背景色をつけていませんので2重でなくても構わないのですが…)
まず<center>で画面の中央になるようにしました。<div style="width:590px;text-align:left;">で表示幅(width)を590pxに指定、全体を中央にしていますので、文章はtext-align:left;で左揃いに指定しています。
次に画像の回り込みですが画像のURLの後に次のようにstyleで指定しました。
style="float:left;margin-right:10px;margin-bottom:10px;width:400px;"
froat:left これはfroatプロパティで回り込みや段組みの効果が作れます。leftですから画像は左寄せですね。それに続く要素、この場合は文章ですが、右に回り込みます。これだけですと画像と文字がぴったりくっつきますので、margin-right:10px;margin-bottom:10px;で画像右側と下側の余白を設定しています。width:400px;は画像幅です。
タグも勉強すると面白いですね。私もよく『どうするのだったっけ?』と忘れることも多いので備忘録として掲載しておきます。(ここを見てコピーして使います=笑)
ちなみにきょうのブログはDIVタグのスタイルは表示幅590px、中央揃えです。文章は左揃えです。全体にピンク色の背景をつけてみました。
2月1日のソース
<div><center><div style="width:590px;text-align:left;"><img src="画像1URL"style="float:left;margin-right:10px;margin-bottom:10px;width:400px;"><font size="3" color="black" style="line-height:120%;">文章</font>
<img src="画像2URL"alt="爆発する新燃岳"style="float:right;"><font size="3" color="black" style="line-height:120%;">文章</font></div></center></div>

スポンサーサイト
プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
04 | 2017/05 | 06
- 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 27
28 29 30 31 - - -
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード