CSSの基本 レイアウトのおさらい

Pocket

CSSの基本をもう一度しっかりおさえるため、まずはレイアウト設定のおさらいをしていきます。初心者の方でも、もう一度CSSの基本を復習して脱初心者を目指しましょう!

CSSの基本 positionプロパティ

CSSの基本その1はpositionプロパティ。これはボックスの表示位置を基点からの距離で指定できる。値として以下の4つが存在する。

  • static:指定しない(デフォルト)
  • relative:元の位置を基点にする
  • absolute:positionを指定した親要素を基点にする
  • fixed:ブラウザ画面を基点にする



実際にどうなるのか見てみよう。以下のサンプルは普通にdivボックスを3つ作り、それを親要素で囲ったもの。この時点ではwidthとheightだけ指定した。

<div id="container">
    <div id="left"></div>
    <div id="top"></div>
    <div id="right"></div>
</div>

cssの基本レイアウト、position1
親要素の範囲を突き抜けて子要素のdivボックスが3つ縦に並んでしまっている。これをCSSのpositionプロパティを使って並べ替えてみたい。


まず、親要素を基点にしたいのでposition:relativeを指定し、子要素にはposition:absoluteで位置を指定する。

#container{
    position: relative;
    }
#left{
    position: absolute;
    top:150px;
    left: 0px;
    }
#top{
    position: absolute;
    top: 0px;
    left: 150px;
    }
#right{
    position: absolute;
    top: 150px;
    left: 300px;
    }

cssの基本レイアウト、position2
このように親要素を基点としてCSSでレイアウトができた。また、relativeのみを使って全く同じ表示を以下のコードでも実装可能。違うのは基点とする場所。こちらは自身の元の位置からの距離になっている。

#container{
    }
#left{
    position: relative;
    top:150px;
    left: 0px;
    }
#top{
    position: relative;
    top: -150px;
    left: 150px;
    }
#right{
    position: relative;
    top: -150px;
    left: 300px;
    }

fixedを使うことで同様のことがブラウザ画面に対して実装できる。例えば画面上部に常にメニューを表示したい場合などに使える。

CSSの基本 floatプロパティ

CSSのfloatプロパティはボックスの配置を指定する。positionとの違いは回り込みが発生するところ。値は以下の3つ。

  • none:指定しない
  • left:左に配置
  • right:右に配置

先ほどと同じHTMLを使って配置を変えてみると以下のようになる。

#container{
    }
#left{
    float: left;
    }
#top{
    float: left;
    }
#right{
    float: left;
    }

cssの基本レイアウト float1
全てのレイアウトをfloat:leftにすることでこのように横並びのボックスレイアウトができる。さきほどと同じレイアウトにする場合は#leftと#rightにmargin-topで必要な分だけマージンを入れるとできる。


通常のWebサイトではfloatさせるとそれ以下のボックスが回り込んでバグるので回り込みが不要な所はclear:bothで解除しておく必要がある。例えばこんな感じで。

#container{
    }
#left{
    float: left;
    }
#top{
    float: left;
    }
#right{
    clear: both;
    float: left;
    }

cssの基本レイアウト float2
このように回り込みを解除できる。さきほどのpositionプロパティと使いどころが微妙に違うので、ポジションがしっかり決まってるところはpositionプロパティを使うなどの使い分けが必要になる。

CSSの基本 displayプロパティ

displayプロパティでは要素ボックスの種類を指定することができる。例えば、通常divやh1などはブロック要素になっているが、display:inlineを指定することでaやemと同じインライン要素にできる。代表的な値は以下の3つ。

  • block:ブロックボックス
  • inline:インラインボックス
  • inline-block:インラインブロックボックス
  • none:ボックスを隠す

細かく見ると他にも値はあるが、ほとんどの場合この3つだけでも問題ないと思う。ここではブロックとインラインの違いを見るため以下のHTMLを使う。

<div id="container">
    <div id="left">div:テキスト</div>
    <div id="top">div:リンク</div>
    <div id="right">div:テキスト</div>
    <a id="linka">a:テキスト</a>
    <a id="linkb">a:リンク</a>
    <a id="linkc">a:テキスト</a>
</div>

これをそのまま表示すると下の画像のようになる。
cssの基本レイアウト display1
ご覧のようにブロック要素とインライン要素で表示が違うのがわかるだろう。ブロックをインラインに変えてみると以下のようになる。

#container{
    }
#left,#top,#right{
    display: inline;
    }
a{
    }

cssの基本レイアウト display2
インライン化するとこのように1行に繋がっているように表示される。しかしこの場合だとwidthとheightの指定が無視されるので、サイズを維持したままインライン化したいときはdisplay:inline-blockを使う。

#container{
    }
#left,#top,#right{
    display: inline-block;
    }
a{
    display: inline-block;
    }

cssの基本レイアウト display3
インライン化の使いどころは、グローバルナビゲーションが一番わかりやすいと思う。li要素をインライン化すれば横並びのレイアウトが出来る。
cssの基本レイアウト display4
CSSの基本、レイアウト編はここまで。今思えばfloatで強引にレイアウトを作ってましたが、インラインやポジションも使い分けないといけないと改めて感じましたね。今はレイアウトにはフレームワーク使ったり、スタイリングはFwやPsからコピペする場合が多く、基本をもう一度おさらいする良いきっかけになりました。基本はやっぱり大事です。