第7回　コーディングの基礎　「ハックしないCSSで読みやすさ、崩れにくさを追求せよ」

2008年10月29日
WEB

前回までのページ
さて、一応、見た目はできました。しかし、ウインドウをサイズを変更してみてください。文字が動きますよね。ウインドウサイズによって、一行に入る文字数が変化する、こういうものをリキッドレイアウトというんですけど、読みにくくないですか？長い文章の場合、右まで読み進んで、左の文字を探すのに大変苦労します。そういうことも考えると、リキッドレイアウトは避け、ソリッド、またはエラスティックレイアウトを取り入れるべきだと考えます。ラフの時点で、既にこういうことも想定して作っておくべきでした。

#wrapper {
width: 800px;
}

bodyの直下にあるwrapperというdivにwidthを指定します。このwrapperにはまだ指定がありませんでしたので、なんの悩みもなくwidthを指定しましたが、paddingや、borderがある場合のwidthやheightには注意しましょう。IEとの表示の差が必ず出ます。
サンプルページ
しかし、これでは「コンテンツが左側にあってウインドウサイズ最大にした場合、読みにくいこと」と、「背景の色が白で境がハッキリしていないこと」を解決するため、「コンテンツを真ん中に位置」させ、「左右に境界線」を指定します。
境界線とwidthを同じ要素に指定すると差が生じてしまうので、全体をもう一つdivで囲います。

<div id=”wrap”>
　<div id=”wrapper”>
　　<div id=”header”>
　　　<h1><a href=”index.html”>見出しレベル1</a></h1>
　　</div>
　<hr />
　　<div id=”content”>
　　　　<div id=”sidebar”>
　　　　　　<ul id=”glovalnavi”>
　　　　　　　　<li><a href=”#”>グロバルナビ1</a></li>
　　　　　　　　<li><a href=”#”>グロバルナビ2</a></li>
　　　　　　　　<li><a href=”#”>グロバルナビ3</a></li>
　　　　　　　　<li><a href=”#”>グロバルナビ4</a></li>
　　　　　　　　<li><a href=”#”>グロバルナビ5</a></li>
　　　　　　</ul>
　<hr />
　　　　　　<ul id=”banner”>
　　　　　　　<li><a href=”#”><img src=”images/banner_ff.jpg” alt=”FireFox” width=”127″ height=”127″ /></a></li>
　　　　　　　<li><a href=”#”><img src=”images/banner_op.jpg” alt=”Opera” width=”125″ height=”125″ /></a></li>
　　　　　　</ul>
　　　　</div>
　<hr />
　　　　<div id=”content_inner”>
　　　　　　<h2>見出しレベル2</h2>
　　　　　　<p>テキストが入ります…</p>
　　　　　　<h3>見出しレベル3</h3>
　　　　　　<p>テキストが入ります…</p>
　　　　</div>
　　</div>
　<hr />
　　<div id=”footer”>
　　　　<address>著作権に関する記述</address>
　　</div>
　</div>
</div>

body {
color: #888;
font-family: “Lucida Grande”,’メイリオ’,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”ＭＳＰゴシック”,Osaka, sans-serif;
text-align: center;
}
#wrap {
margin: 0 auto; //上下にはスペースなし、左右に自動でスペースを持たせることで中央に位置する。
text-align: left;
width: 800px; //先ほどまでwrapperに指定していた。
}

#wrapper {
border-right: 1px solid #cad9b8;
border-left: 1px solid #cad9b8;
}

ブロックごと中央揃えにするには、中央揃えにしたいブロックに対してmargin: 0 auto;を指定すればいいのですが、IEでは中央に表示しません。中央揃えにしたいブロックのさらに外側にtext-align: center;を指定しますが、中身の文章もすべて中央に位置してしまうので、中央揃えに指定したブロックの中にはtext-align: left;を指定します。
widthとborderを同時に指定してしまうと、IEでは、border分だけ横に広がってしまいます。paddingも同様です。そういう場合は、もう一つdivで囲う、spanで囲う(display:block;にする必要がある場合がある)、別の要素に指定する。などの処置を考え、なるべくハックを使わずに調整するようにしましょう。
サンプルページ

さて、もう一つ気になることがありますので、解決しておきたいと思います。サイドバーの背景色。実はcontent_innerにmargin-left:13em;を指定することでcontentの背景色が見えていました。コレだと、文字サイズを小さくしたときに足りなくなってしまいます。また、サイドバー背景色にエラスティックを取り入れてはいましたが、全体のサイズを800pxと指定したので、サイドバーの横幅が文字サイズで変化するとレイアウトが崩れるのと同じことになるのでサイドバーの横幅は固定する別の2カラムレイアウトを試してみたいと思います。
wrapperの左右に1pxのborderをつけたので、中身は800px-2px=798pxとなっていることに注意しましょう。

sidebarはwidth157pxでfloat:left;
content_innerはwidth641pxでfloat:left;（float:right;でもよい。）
content_innerにwidthを指定したいので、以前指定していたpaddingを、main_contentというdivを増やし、こちらに指定する。

　　　　<div id=”content_inner”>
　　　　　<div id=”main_content”>
　　　　　　　<h2>見出しレベル2</h2>
　　　　　　　<p>テキストが入ります…</p>
　　　　　　　<h3>見出しレベル3</h3>
　　　　　　　<p>テキストが入ります…</p>
　　　　　</div>
　　　　</div>

#sidebar {　//common.cssに書く
float: left;
width: 157px;
}
#content_inner {　//common.cssに書く
background-color: #fff;
float: left;
width: 641px;
}
#main_content { //contents.cssに書く
padding: 15px 25px 45px; //先ほどまでcontent_innerに指定していたもの
}

ブロック要素、どちらもfloatさせ、widthをつけるという2カラムの作り方です。widthをつけるので、もちろんpadding、borderには十分注意しましょう。中身が（全体のwidth）-（ボーダー）になっていることも把握しておきましょう。
サンプルページ
これで、今度こそ崩れない！美しい！正しいコーディングの完成です！

次回は11月3日(月)に、おまけ　コーディングの基礎「内容量に左右されないでフッターをウインドウ下に表示!?」をお届けします。

このページの先頭へ戻る

第7回 コーディングの基礎 「ハックしないCSSで読みやすさ、崩れにくさを追求せよ」

他の「WEB」の記事

第7回　コーディングの基礎　「ハックしないCSSで読みやすさ、崩れにくさを追求せよ」