エンジニアブログ

RSS

CSSハックを使わないでコーディングすることについて考えてみる

tweets master CSSHTMLIE6コーディング考察

こんにちは、コーディング工房です。
今回は、CSSハックを使わないでコーディングをすることについて考えてみたいと思います。


みなさんはどういう時にCSSハックを使うのでしょうか?
私は、「レギュレーション(仕様)上JavaScriptの導入が難しく、なおかつどうCSSを組んでも解決出来ない場合」に、使うものだと思っています。
なぜなら、ちょっとプロパティをかける位置を変えてみたり、計算をし直してみるだけで解決出来ることがほとんどだからです。

また、我々コーディング工房では、「お客様に分かりやすく見やすい、芸術的とも言えるような美しく軽量なソースコードを提供すること」を第一に考えて、日々コーディングをしております。
ですので、CSSハックを多用したコーディングは、コーディング工房の理念に反してしまうのです。
(前提条件である、W3Cに準拠したコーディングにも反してしまいます)


では、どのようにコーディングすればCSSハックを使わないでコーディング出来るのでしょう?
私は、“極力widthを指定しないでコーディングする”よう、心がけています。


例えば、下記のようなボックスのコーディングをするとします。

CSSハックを使わないでコーディングすることについて考えてみる

メインコンテンツ部分とサイド部分で幅は違うものの、まったく同じデザインを使用します。

HTML:
<div id="wrapper">
	<div class="columL">
		<div class="section">
			<h3>メインコンテンツ</h3>
			<div class="inner">
				<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
			</div>
		</div><!-- section -->
	</div><!-- /.columL -->
		
	<div class="columR">
		<div class="section">
			<h3>サイド</h3>
			<div class="inner">
				<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
			</div>
		</div><!-- section -->
	</div><!-- /.columR -->
</div><!-- /#wrapper -->
CSS:
/****************************************

	共通

*****************************************/
#wrapper {
	width			: 650px;
	margin			: 0 auto;
}

.columL {
	float			: left;
	width			: 400px;
}

.columR {
	float			: right;
	width			: 220px;
}



/****************************************

	ボックス装飾

*****************************************/

.section {
	margin			: 20px 0;
}

h3 {
	padding			: 0 15px;
	height			: 30px;
	line-height		: 30px;
	border			: 1px solid #000;
	font-size		: 16px;
	background-image	: url(../images/bg_h3.jpg);
}

/* 親要素の高さや幅を引き継ぐ */
.inner {
	padding			: 10px;
	border			: 1px solid #000;
	border-top		: 0;
}

このように、親のdivの幅や高さなどを引き継ぐための子要素用のクラスがあれば、paddingやborderをCSSハックを使用しないでも表現することが可能となります。
これはあくまでも一例に過ぎませんが、みなさんのお役に立てれば幸いです。


——————————————————————
コーディング工房のFacebookページにて、アンケート実施中です。
今週のお題:どんなことに気を付けてコーディングしているのか

[コーディング工房] http://www.coding-kobo.com/
[Facebookページ] http://on.fb.me/l3G5mo/
—– —– —– —– —– —– —– —– —–