入門CSS 第2話

2015/09/28 テクノロジー

入門CSS 第2話

こんにちは、本間です。

入門CSS 第1話に続き、前回からさらに込み入った内容で解説していきます。

“見た目”に関しては前回の記事に追加してWebを調べればなんとかなります。思いついたキーワードと”css”でググってみてください。

ただし、それぞれの”配置”に関してはある程度テクニックが必要です。今回はCSSのより応用的な内容を解説します。

まずはページのレイアウトを設計する

配置について何も考えずにいきなりCSSを書き始めることは、何も持たずに山に登るようなものです。大きなゴールを目指すには、しっかりとした準備をしてからいきましょう。

配置を考える例としてよくあるヘッダ、フッタの間にメインコンテンツとサイドバーがあるようなUIを考えてみましょう。

レイアウト例

さて、HTMLは以下のような構成となります。

<html>
<head>
  ....
</head>
<body>
<div id="wrapper">
  <div id="header">
  </div>

  <div class="clearfix">
    <div id="main-contents">
    </div>
 
    <div id="sidebar">
    </div>
  </div>

    <div id="footer">
    </div>
</div>
</body>
</html>

いきなりすぎてドキっとした方もいるかもしれませんが、ご安心ください。一つ一つ解説します。

全体を囲む wrapper

まずなぜ全体を wrapperで囲むのか、というとページのコンテンツをページ中央に寄せたいからです。生のHTMLを書くと、ページの余白のない左上から書き出しますが、普通のサイトでは画面中央にそれぞれのコンテンツをまとめたいケースが多いかと思います。そのため、今回の設計では大枠にwrapperを定義して、ブラウザーを横幅いっぱいに伸ばしても、画面中央の指定したピクセル数だけ固定するようなレイアウトにしています。wrapperのCSSは以下のような感じになります。

#wrapper {
  width: 900px;
  margin: 0 auto;
}

どちらも大変重要な指定です。横幅を900pxと固定して、その横のマージンを自動でとるようにすることでセンタリングを実現しています。これで全体を覆うwrapperを定義できました。

続くheader に関しては内容を書くだけですので省略します。

float の問題を理解する

さて、ここが今回大事なところです。main-contents と sidebar をどのように左右に配置するのでしょうか。css では、floatという概念があり、これでdiv要素を左に持ってくることができます。

ただこのfloatがちょっとクセモノでして、floatを指定したdiv要素は高さの概念がなくなってしまうのです。以下のようなhtmlを書くと、

<div style="float: left; width: 300px;"> 
</div>
<div style="float: right; width: 100px;">
</div>
<p>ここから続きを書き出したい..</p>

実際は下記の赤丸から文章が始まってしまいます。。

floatの問題

この問題を解決するために、<div class="clearfix"></div>でfloatの問題を解決します！クリアフィックスと呼ばれるテクニックで、以下のようなcssを記述してclearfixを適用します。

これは本当によく使うテクニックですので、CSSを書く際は必ず用意するようにしましょう。

.clearfix:after {
  content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

さて、clearfixで囲ったら、あとはmain-contents と sidebar のcssを作ります。

#main-contents {
  width: 700px;
  float: left;
}
#sidebar {
  width: 180px;
  float: right;
}

main-contents と sidebar の間を20px空けるために今回はwidthを180pxとしました。

clearfixで周りを囲っているので、その間に何かが入り込む心配はありません。

あとはその下にフッタを追加することで、見事目指したレイアウト構成ができあがりました。

終わりに

今回は CSS のレイアウト設計について書きました。特に float の概念と、 clearfix の存在はCSSを書く上で必ずマスターしておきたい項目ですので、今回の記事でぜひ覚えていただければ、と思います。

次回は display、 position、 media queryなどを扱いたいと思います。

ブログ