[CSS]雑誌風のレイアウトがきた、どう実装する -解答編

昨日のエントリー「雑誌風のレイアウト、さぁどう実装する？」の解答編です。 雑誌風のレイアウトは、下記のように2カラムのテキストの真ん中上に画像を配置したものです。 [ad#ad-2] まずは、HTMLから。 画像を二つに切るとかは、無しですよ。 HTML 各パラグラフをdiv要素で内包し、画像とそのdiv要素をdiv要素で内包して実装します。 <div id="page-wrap"> <img src="http://placekitten.com/250/250" id="logo"> <div id="l"> <p>左のテキスト</p> </div> <div id="r"> <p>右のテキスト</p> </div> </div> これに、フロートと疑似要素を使用して、実装します。 まず、画像を絶対位置で配置します。 そしてフロートを使いますが、ポイントとなるのは下3行です。疑似要素に

[BURN]

rss

[hama_shun]

おおー

[www-tmcc]

Reader

[toyoh]

もやもや

[ku_marin]

一つの参考として

[bols-blue]

レイアウト

[puremac]

[picked[css]

[Donca]

✔ [CSS]雑誌風のレイアウトがきた、どう実装する -解答編