htmlソースの並びを変更せずに左右固定3カラムリキッドレイアウトを行う

ソースの並び順はSEO上重要だと言われています。
並びは基本的に

  1. 見出し
  2. 内容

上記の順になるのが好ましいとされています。

良く見る下記の画像のようなレイアウトを実装する際の例だと
boxline

この場合、見出しは画像タイトル、内容は画像及び「詳細」リンクとなります。
floatとmarginを利用した一般的なリキッドレイアウトでは、htmlソースの順を下記のように変更しなければ厳しいものがあります。

  1. 【内容】画像(width:80px;float:left;を指定)
  2. 【内容】詳細リンク(width:100px;float:right;を指定)
  3. 【見出し】画像タイトル(margin:0 100px 0 80px;を指定)

これだと内容と見出しが逆転してしまっていますので、あまり好ましい状態とは言えません。

そこでpositionを使い多少強引ですが下記のようにする事で、並びを変えずに左右固定の3カラムリキッドレイアウトが可能になります。
html

<div id="floatBox">
	<div class="floatBoxLine">

		<div class="boxTitle">
			<h2>画像のタイトル</h2>
		</div>

		<div class="boxImg">
			<img src="hoge.jpg" alt="画像" width="80" height="80" />
		</div>

		<div class="boxLink">
			<a href="">詳細</a>
		</div>

	</div>
</div>

css

#floatBox {
	width:100%;
}

h2 {
	margin:0;
}

.floatBoxLine {
	width:100%;
	position:relative;
}

	.boxTitle {
		margin:0 50px 0 80px;
		height:80px;
		background-color:#ffcccc;
	}

	.boxImg {
		top:0;
		position:absolute;
		width:80px;
		height:80px;
		background-color:#ccffcc;
	}

	.boxLink {
		position:absolute;
		top:0;
		right:0;
		width:100px;
		height:80px;
		background-color:#ccccff;
	}

Read More