CSSレイアウト

カラムレイアウト

カラムレイアウト

Flexboxを利用すれば簡単にカラムレイアウトを実現する事ができます。
従来のようにfloatやpositionを利用すると少し不便な部分がありましたが、Flexboxなら簡単なので今後の主流になると思われます。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

親要素 {display:flex;flex-direction:並びの方向を指定;justify-content:配置位置を指定;}
子要素 {order:表示の順番を指定(0が標準値);}

カラムレイアウトの一例

以下の場合なら縦方向に数字の順番に各要素を並べる事ができます。

#container {display:flex;flex-direction:column;justify-content:center;}
header {order:0;}
#side {order:1;}
#main {order:2;}
footer {order:3;}


フルサイズレイアウト

ヘッダーとフッターだけフルサイズにする方法

ヘッダーとフッターの横幅を画面いっぱいまで伸ばす方法です。

  1. インコンテナでメインとサイドを囲む(一例としてid="incontainer"を使用)
  2. CSSでコンテナの幅を100%にする(#container {width:100%;})
  3. CSSでインコンテナの幅をコンテナで使用していたサイズにする(#incontainer {width:containerのサイズpx;})
  4. CSSでインコンテナの要素を中央に寄せる(中央に寄せ
  5. サイドにあるborderを消す

フルサイズレイアウトの一例

以下のようにするとヘッダーとフッターだけを伸ばす事ができます。

<container>
<header>~</header>
<incontainer>
<main>~</main>
<side>~</side>
</incontainer>
<header>~</header>
</container>


センタリングレイアウト

インラインの中央寄せ

インラインの中央寄せは、以下のように記述すると可能です。
効いてないと思ったら、強制的にインライン要素にする事で対応できると思います。
要素を上下左右に中央寄せする色々な方法

  1. 要素 {text-align:center;}
  2. 要素 {display:inline; text-align:center;}(強制的にインライン要素にする)

ブロックの中央寄せ

ブロックの中央寄せは、以下のよう記述すると可能です。
効いてないと思ったら、強制的にブロック要素にする事で対応できると思います。

  1. 要素 {margin:0 auto;}
  2. 要素 {display:block; margin:0 auto;}(強制的にブロック要素にする)

テーブルの中央寄せ

テーブルの中央寄せは、以下のように記述すると可能です。

table {margin-left:auto; margin-right:auto;}


ボックスレイアウト

ボックスからはみ出る時の対処法

ボックスからはみ出る時の対処法にはbox-sizingが効果的です。
box-sizingを指定するとボックスにpaddingとborderのサイズも含めて計算するようになるので、うまく使えばこうした問題に対処できる場合があります。
CSS3リファレンス(box-sizing)

要素 {box-sizing:border-box;}

ボックススペースの非表示方法

広告などをユーザーが非表示にした際に、不要なボックススペースを自動的に非表示にする方法です。
これにはdisplay:inlineを使っても可能ですが、ボックスのサイズにautoを指定すると簡単に実現できます。

要素 {width:auto; height:auto;}


その他のCSSレイアウト

文字の高さ合わせ

line-heightは行の高さを指定するものですが、ここの値をheightと同じにすると縦の中央寄せになります。

要素 {line-height:heightと同じ数値にする;}

アウトラインの非表示方法

リンクをクリックした時に出るアウトライン(点線)は、ほとんどの人が不要だと思います。
これを消す方法は以下のようにリンクのスタイルを指定するだけです。

a:link {outline:none;}

見出しタグを改行させない方法

h1などの見出しタグは通常自動的に改行されますが、これを無効にする方法です。

要素 {display:inline;}

画像下の隙間を消す方法

画像の下の隙間を消す方法です。
以下のどちらかで消えると思いますが、vertical-alignはブロック要素には効果がないので注意してください。

  1. 要素 img {display:block;}
  2. 要素 img {vertical-align:bottom;}
オンラインPC館