CSSでレイアウトするなら必ず覚えておきたい配置のルール6つ

◼︎iPhone6sに乗り換えて3万円以上のMNPキャッシュバックを貰う5つの方法
◼︎ソフトバンク「スマ放題」の料金を3000円安くする5つの方法
◼︎iPhone6sに機種変更するなら絶対公式サイトを利用すべき理由８選

 

Webデザインにおいてもはや常識・必須ともいえる技術がCSSです。

これを使えば見栄えのよく使いやすいサイトを作ることができます。

しかし、CSSデザインにおける配置には意外と知られていないルールがあり、これを破るとせっかく一生懸命コードを打っても見づらいサイトになってしまい、ユーザーが離れていくことに……。

そこで今回は、絶対失敗しない！ためにも、CSSでWebサイトをレイアウトするとき必ず覚えておきたい配置のルールをご紹介します。

1．ボックスモデルという基本

CSSでデザインをするときに絶対忘れてはいけないのが「ボックスモデル」についてです。

レイアウト作りにおいて基本中の基本になっています。これを１から見ていきましょう。

画像引用：http://www.htmq.com/csskihon/301.shtml

CSSのボックスモデルとは、content、border、padding、marginなどの各要素が生成する四角い領域のことを指します。簡単に説明すると、

content … ボックスの中に書かれる内容です。
border …ボックスを区切る枠線です。
padding …コンテンツとボーダーの間にできる余白です。
margin …ボーダーと他のボックスの間にできる余白です。

とにもかくにも、まずはこの4つの要素の意味について理解していなければ、CSSを本当に分かっていることにはなりません。
また、要素に指定した背景が敷き詰められるのはボーダーの内側であり、マージンの領域には入らないということを覚えておくと何かと役に立ちます。

2．包含ブロックについて

包含（ほうがん）ブロックとは、さきほどのボックスモデルの配置についてかかわりがあります。

ボックスモデルの配置は、包含ブロック、またの名をコンテナブロックによって決定されます。下の図を見てください。

画像引用：http://webdesignrecipes.com/css-visual-formating-model/

この図におけるHTMLの記述は次のようになっています。

<div>
<p>
こんにちは！
</p>
</div>

p要素はdiv要素の子要素なんですね。そして、子要素であるp要素の配置場所や大きさは、div要素に依存します。

具体的には、p要素の位置は親要素divの内側一杯となります。

包含ブロックというのは、子要素を配置することができる領域のことです。

逆に言うと、ある要素の配置場所や大きさが決まるのは、親要素の作り出した包含ブロックである、ということなのです。

ここはちょっと難しいですが、包含ブロックという言葉はCSSを勉強していると何度も出てくるのでしっかり覚えておいてください。

3．包含ブロックの中にある2種類のボックス

包含ブロックの中に配置されるボックスには2種類あります。

「ブロックボックス」と「インラインボックス」です。ブロックレベル要素は自動的にブロックボックスを生成し、インライン要素はインラインボックスを生成します。

ブロックボックスは独立したかたまりなので、短い要素でも改行され、どんどん下へレイアウトされていきます。

インライン要素は行のように、横につなげたり改行されたりしてレイアウトされます。

このふたつを区別してコードを書かないと、思い通りの配置はできません。

4．フロートの豆知識

次に注意したいのがフロートです。CSSでレイアウトを組むときには必ず使われることになるでしょう。

要素を左や右に寄せるプロパティですが、それ自身だけでなく他の要素へも影響するので、これを忘れているとレイアウトが大幅に崩れる恐れがあります。

それを防ぐためには、フロートの正しい性質を理解する必要があります。

画像引用：http://itpro.nikkeibp.co.jp/article/Reference/20091124/340934/?rt=nocnt

まず、フロートをさせたらwidthを一緒に指定する必要があります。

また、フロートンはインラインボックスをブロックボックスに変化させる特徴があります。

さらに、フロートを解除したいときにはclearプロパティを使用しなければなりません。

他にもフロートには厳格な配置ルールが山ほどあるのですが、説明するのが難しいので今は上記の3点を覚えておいてください。

5．positionプロパティによる配置

positionプロパティを使うと、通常の配置からずらす相対配置、任意の場所を指定して配置する絶対配置、スクロールしても固定して表示される固定配置など、おしゃれなレイアウトを自由に指定できます。

画像引用：http://h2ham.seesaa.net/article/109909802.html

例えば、相対配置ならposition: relative を使うことによって、通常フローによって配置された位置からボックスをずらすことができます。

このときの後続要素ですが、ずらしたことによって空いたスペースは詰めたりせずにそのまま維持されるので、不自然なスペースができることがあったり、逆に見栄えの良い間隔を保つことができたりします。

これについては制作時に、きちんとこまめにプレビューして確認する癖をつけましょう。

6．IE6のレイアウト崩れ対策

最後はちょっと小技的ですが、すべてのブラウザに対応するためという意味では大切なことです。

画像引用：http://www.irasutoya.com/

色々とありますが、たとえばIE6ではfloatした方向にmarginを設定すると値が2倍になってしまうので、設定しないようにしましょう。

floatを解除するためによく使われるclear: both; も、空要素でそのまま入れるとIE6ではバグの原因となります。

floatを書けた要素とまとめて親ボックスに入れるようにする、といった工夫が必要です。

CSS配置はWebデザインの基本

画像引用：http://www.irasutoya.com/

ブロック要素やフロートなど、突き詰めると難しいことが沢山出てきましたが、これらはCSSの基本であり、またWebデザインの基本です。

こういったことを理解しないと、コードを書いていてつまづき時間を取られることが多々あります。

デザインをする前にはまず、自分が作りたいページの設計図を書き、そのためにはどういうコードを書く必要があるのか把握してから、実際のコーティングにうつるという癖をつけましょう。

参考サイト

comman inc.

Web Design RECIPES