CSSによるレイアウトについて

ここでは、ウェブサイトのレイアウトで使われるCSSfundamentalsについて学ぶことができる。

このサイトは、日本語が用意されているために、英語が不自由の人は利用しよう。

no layout

ただ読むだけなら、レイアウトは必要ない。しかし、ブラウザウィンドウの幅を広くしたら、それはとても読みにくい。次のラインに移るときに右から左に目を動かす距離が長いためである。試してみてばわかる。

この問題を治す前に、とても大切な display を学ぼう。

the “display” property

displayはレイアウトを変更するためにCSSで大切なpropertyである。すべてのelementは、それぞれデフォルトのdisplayを持っている。ほとんどのelementのデフォルトは、blockとinlineである。block elementはたいていblock-levelと呼ばれる。inline elementはいつもinline elementと呼ばれる。

block

<div> は、block-level elementである。block-level elementは新しいラインで始まり、出来る限り左右に引き伸ばす。他のおもなblock-level elementはpとformで、HTML5で新しいのはheader、footer、sectionなどである。

inline

<span>は、基本的なinline elementである。inline elementは、<span> like this </span>のようにテキストを包む。aは最も一般的なinline elementである。

none

他の一般的なdisplayはnoneである。scriptのような特殊なelementはデフォルトとしてこれを使う。elementを隠したり見せたりするためにJavaScriptを使う。

これはvisibilityとは違う。noneにdisplayをセットすることは、

other display values

list-item and table などの変わったものもある。 Here is an exhaustive list


margin: auto;

widthを設定することで、左右サイズが自動で変わることを防ぐ事ができる。autoを使うことで左右のマージンを同じにし、中央に配置できる。

しかし、ブラウザのウィンドウが要素の幅より狭いとき、問題が発生する。ウィンドウを狭くすると、端が切れてしまう。


max-width

widthの代わりにmax-widthを使うことで、小さいウィンドウのブラウザを改善できる。携帯で使用するときに、これは大切である。ページを自動でリサイズしてくれる。

max-widthsupported by all major browsersで見ることができる。


the box model

widthには落とし穴がある。それが、box modelである。widthを設定したとき、設定より大きくなる事がある。要素のborderとpaddingの値が、設定したwidthに加算されて引き延ばされてしまう。以下の例を見てみよう。同じwidthを持つ二つの要素が結果的に異なるサイズで表示される。

この問題の解決策は、計算することである。CSSを書く人は、実際に設定したいwidthの値より、いつも少し小さめの値を指定する。具体的には、paddingとborderの値を差し引いた値である。しかし、現在それをする必要はない。


box-sizing

上のように計算したくない人のために、新しいCSSプロパティbox-sizingを作った。要素にbox-sizing: border-box;を設定すると、要素のpaddingとborderの幅が要素のwidthを増やすようなことはもはやない。 これは上と同じ例である。だが、両方の要素に対して、box-sizing: border-box;を適用している:

これで、同じサイズになる。これはかなりいい。だから、自分のページ内の全要素に対して、この設定を適用したい人が多くいるだろう。そんな人は、以下のようなCSSを書くと良い:

これでページ内の全要素に対して、いつでも直感的にサイズ指定できるようになる。

box-sizingはとても新しいプロパティである。例に示したような-webkit--moz-などを使った方が良い。


position

更に複雑なレイアウトを作るには、positionについて理解する必要がある。覚えるのが難しい。

static

結果:

relative

結果:

fixed

fixedにより、ページがスクロールされても、指定した位置にいつも同じ位置に配置される。relativeと同様に、toprightbottomleftプロパティを使うことができる。

上図がページの右下の角に、常に表示される。


absolute

absoluteとは、絶対位置のこと。absoluteは最も扱いにくい。absolutefixedとほぼ同じである。ページスクロールで動きもする。

例:


positionの例

これはpositionを使った例である。


float

レイアウトでよく使うCSSプロパティに、floatがある。floatを使うと、画像周りで文字列を折り返すようにできる:

のようになる。


clear

clearは、floatを制御するのに必要である。以下の2つの例を比較してみよう。

のようになる。


clearfix hack

floatを使うとたまに悪い状況になる。

これを直す方法がある。それがclearfix hackである。

下のCSSを追加してみよう。

このようになる。

もっと慎重にならなければならい外来ブラウザもある。clearfixingの世界はかなり恐ろしい


floatを使用したレイアウトの例

よくfloatを使ってページをレイアウトする。このページは、前にpositionを用いて作成したものをfloatで再現したものである。


パーセント指定のwidth

画像表示にはもってこいである。画像はコンテナの幅の50%になる。

パーセント指定のwidthを用いたレイアウト

このようにパーセントをもちいて 、レイアウトを作成できる。


media queries

Responsive Designは、どんなときでもブラウザやデバイスの表示状態に”合わせて”美しいサイトを作る。

そして、メディアクエリーは、レスポンシブデザインを実現するための最も強力なツールだ。widthをパーセント指定した例を考えよう。サイドバーにメニューが入りきらなくなるほどブラウザの幅を小さくした場合、全てのコンテンツが1列で表示される。

ウィンドウのサイズを小さくすると、以下のようになる。

ここで、モバイルブラウザで見てもいい感じに見える。メディアクエリーを使った人気サイトをみてみよう。もっと学びたければ、MDNドキュメントを見てみよう。

metaタグのviewportを使うと、携帯での見栄えをもっと良くできる。


inline-block

ブラウザの幅に合わせてボックスを均等に配置し、グリッドレイアウトを作る事ができる。これは、昔からfloatを使って実現してきた。だが、今はinline-blockを使って簡単に実現することができる。inline-block要素はinline要素のようなものである。しかし、widthとheightを持つ事ができるという点で異なる。両方の例をみてみよう。

難しい方法(floatを使用)

簡単な方法(inline-blockを使用)

上では、floatを使ったが、ここではdisplayを使う。


inline-blockで作るレイアウト

inline-blockにより、表示はインラインボックスだが、ブロックボックスのように高さや横幅、margin、paddingを指定できる。

  • inline-blockの要素は、vertical-alignプロパティに影響される。そして、vertical-aligntopに設定するだろう
  • 列となる要素それぞれに対して、幅を指定しなくてはならない
  • HTMLで、列となる要素の間にホワイトスペースが入ると、隙間ができる

column

複数段のレイアウトを作成するためのpropertyについて見てみよう。

これはとても新しいので、prefixesをつかう必要がある。そして、IE9 か Opera Miniでしか動かない。columnに関係しているpropertyを見てみよう。click here to read more


flexbox

flexboxとは、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモードのこと。しかし、残念ながら、最近でも仕様が大きく変えられている。ここでいくつかの例を見てみよう。

単純なレイアウト

面白いレイアウト

中央寄せ


CSSフレームワーク

CSSレイアウトはとても扱いづらい。だから多くの人が、ウェブサイトを簡単に作るために、フレームワークを提供している。ここではその一部を紹介する。ウェブサイトで実現したいレイアウトを、CSSフレームワークで実現できるなら、それを使うのは良いことである。ただし、CSSフレームワークを使っても、CSSがどのように動作しているか知る事はできないということは覚えておいてほしい。


最後に

今回は、CSSのレイアウトについて、学んだ。

実際にウェブサイト等を作る際にとても大切なものだと思う。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.