ぼくのWEBあしあとWEB制作勉強中michyの日記。「コーディング」や「CMS(wordpress、MovableType)によるサイト構築」、「SEO」などの話題を中心に。「ハックしないCSSで読みやすさ、崩れにくさを追求せよ」2008年10月29日WEB前回までのページさて、一応、見た目はできました。ウインドウをサイズを変更してみてください。ウインドウサイズによって、一行に入る文字数が変化する、こういうものをリキッドレイアウトというんですけど、読みにくくないですか?長い文章の場合、右まで読み進んで、左の文字を探すのに大変苦労します。いうことも考えると、リキッドレイアウトは避け、ソリッド、またはエラスティックレイアウトを取り入れるべきだと考えます。ラフの時点で、既にこういうことも想定して作っておくべきでした。800px;}bodyの直下にあるwrapperというdivにwidthを指定します。このwrapperにはまだ指定がありませんでしたので、なんの悩みもなくwidthを指定しましたが、paddingや、borderがある場合のwidthやheightには注意しましょう。IEとの表示の差が必ず出ます。サンプルページしかし、これでは「コンテンツが左側にあってウインドウサイズ最大にした場合、読みにくいこと」と、「背景の色が白で境がハッキリしていないこと」を解決するため、「コンテンツを真ん中に位置」させ、「左右に境界線」を指定します。境界線とwidthを同じ要素に指定すると差が生じてしまうので、全体をもう一つdivで囲います。//上下にはスペースなし、左右に自動でスペースを持たせることで中央に位置する。//先ほどまでwrapperに指定していた。auto;を指定すればいいのですが、IEでは中央に表示しません。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を増やし、こちらに指定する。//先ほどまでcontent_innerに指定していたもの}ブロック要素、どちらもfloatさせ、widthをつけるという2カラムの作り方です。widthをつけるので、もちろんpadding、borderには十分注意しましょう。中身が(全体のwidth)-(ボーダー)になっていることも把握しておきましょう。「内容量に左右されないでフッターをウインドウ下に表示!?」をお届けします。WordPress2.8.6。