ビジネス

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

 
YOSX9827_TP_V
Webデザインにおいてもはや常識・必須ともいえる技術がCSSです。
これを使えば見栄えのよく使いやすいサイトを作ることができます。
しかし、CSSデザインにおける配置には意外と知られていないルールがあり、これを破るとせっかく一生懸命コードを打っても見づらいサイトになってしまい、ユーザーが離れていくことに……。
そこで今回は、絶対失敗しない!ためにも、CSSでWebサイトをレイアウトするとき必ず覚えておきたい配置のルールをご紹介します。

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

CSSでデザインをするときに絶対忘れてはいけないのが「ボックスモデル」についてです。
レイアウト作りにおいて基本中の基本になっています。これを1から見ていきましょう。
box_01
画像引用:http://www.htmq.com/csskihon/301.shtml
CSSのボックスモデルとは、content、border、padding、marginなどの各要素が生成する四角い領域のことを指します。簡単に説明すると、
content … ボックスの中に書かれる内容です。
border …ボックスを区切る枠線です。
padding …コンテンツとボーダーの間にできる余白です。
margin …ボーダーと他のボックスの間にできる余白です。
とにもかくにも、まずはこの4つの要素の意味について理解していなければ、CSSを本当に分かっていることにはなりません。
また、要素に指定した背景が敷き詰められるのはボーダーの内側であり、マージンの領域には入らないということを覚えておくと何かと役に立ちます。

包含ブロックについて

包含(ほうがん)ブロックとは、さきほどのボックスモデルの配置についてかかわりがあります。
ボックスモデルの配置は、包含ブロック、またの名をコンテナブロックによって決定されます。下の図を見てください。
container-block
画像引用:http://webdesignrecipes.com/css-visual-formating-model/
この図におけるHTMLの記述は次のようになっています。
<div>
<p>
こんにちは!
</p>
</div>
p要素はdiv要素の子要素なんですね。そして、子要素であるp要素の配置場所や大きさは、div要素に依存します。
具体的には、p要素の位置は親要素divの内側一杯となります。
包含ブロックというのは、子要素を配置することができる領域のことです。
逆に言うと、ある要素の配置場所や大きさが決まるのは、親要素の作り出した包含ブロックである、ということなのです。
ここはちょっと難しいですが、包含ブロックという言葉はCSSを勉強していると何度も出てくるのでしっかり覚えておいてください。

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

包含ブロックの中に配置されるボックスには2種類あります。
「ブロックボックス」と「インラインボックス」です。ブロックレベル要素は自動的にブロックボックスを生成し、インライン要素はインラインボックスを生成します。
ブロックボックスは独立したかたまりなので、短い要素でも改行され、どんどん下へレイアウトされていきます。
インライン要素は行のように、横につなげたり改行されたりしてレイアウトされます。
box
このふたつを区別してコードを書かないと、思い通りの配置はできません。

フロートの豆知識

次に注意したいのがフロートです。CSSでレイアウトを組むときには必ず使われることになるでしょう。
要素を左や右に寄せるプロパティですが、それ自身だけでなく他の要素へも影響するので、これを忘れているとレイアウトが大幅に崩れる恐れがあります。
それを防ぐためには、フロートの正しい性質を理解する必要があります。
06 float
画像引用:http://itpro.nikkeibp.co.jp/article/Reference/20091124/340934/?rt=nocnt
まず、フロートをさせたらwidthを一緒に指定する必要があります。
また、フロートンはインラインボックスをブロックボックスに変化させる特徴があります。
さらに、フロートを解除したいときにはclearプロパティを使用しなければなりません。
他にもフロートには厳格な配置ルールが山ほどあるのですが、説明するのが難しいので今は上記の3点を覚えておいてください。

positionプロパティによる配置

positionプロパティを使うと、通常の配置からずらす相対配置、任意の場所を指定して配置する絶対配置、スクロールしても固定して表示される固定配置など、おしゃれなレイアウトを自由に指定できます。
07 position
画像引用:http://h2ham.seesaa.net/article/109909802.html
例えば、相対配置ならposition: relative を使うことによって、通常フローによって配置された位置からボックスをずらすことができます。
このときの後続要素ですが、ずらしたことによって空いたスペースは詰めたりせずにそのまま維持されるので、不自然なスペースができることがあったり、逆に見栄えの良い間隔を保つことができたりします。
これについては制作時に、きちんとこまめにプレビューして確認する癖をつけましょう。

IE6のレイアウト崩れ対策

最後はちょっと小技的ですが、すべてのブラウザに対応するためという意味では大切なことです。
08 internet
画像引用:http://www.irasutoya.com/
色々とありますが、たとえばIE6ではfloatした方向にmarginを設定すると値が2倍になってしまうので、設定しないようにしましょう。
floatを解除するためによく使われるclear: both; も、空要素でそのまま入れるとIE6ではバグの原因となります。
floatを書けた要素とまとめて親ボックスに入れるようにする、といった工夫が必要です。

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

09 go
画像引用:http://www.irasutoya.com/
ブロック要素やフロートなど、突き詰めると難しいことが沢山出てきましたが、これらはCSSの基本であり、またWebデザインの基本です。
こういったことを理解しないと、コードを書いていてつまづき時間を取られることが多々あります。
デザインをする前にはまず、自分が作りたいページの設計図を書き、そのためにはどういうコードを書く必要があるのか把握してから、実際のコーティングにうつるという癖をつけましょう。
参考サイト
comman inc.
Web Design RECIPES

スマホの乗り換えで失敗する人の共通点
「機種変更してみらら、思ったより料金が高かった…」なんてことありませんか?

いま、ショップの店頭で有料オプションや有料コンテンツに加入させられて、結局損をしてしまう人が続出しています。

スマホを乗り換えるときにはおとくケータイなどのオンラインショップを利用してください。

学割やオンラインショップ限定割引など、今月がもっともお得な時期です。

おすすめオンラインショップ一覧