ブロックレベル要素とインライン要素

前回の続きです。今回はナビゲーションのコーディングを進めます。htmlでは下記の箇所です。

htmlタグにはブロックレベル要素とインライン要素があります。めちゃめちゃ乱暴に説明するとタグで挟んだ時に改行される要素がブロックレベル要素です。ナビゲーション部分をhtmlでマークアップしただけの状態では横並びせずに改行されていました。ということはliタグはブロックレベル要素だということがわかります。aタグはインライン要素です。 ulはブロックレベル要素です。とりあえずナビゲーションを改行させずに横並びにしてみます。

displayプロパティー

cssにはdisplayプロパティーというものがあります。値にはよく使うものでinline、block、none、inline-block、table-cell等があります。他にもあります。値を見てピンときたかもしれませんが、横並びにするには displayの値をinlineにすればOKです。（inline-block等でもOK）では早速反映させてみます。上記のhtmlのようにまずnavタグにクラスをふり、以下のようにcssを記述します。

セレクタの書き方が前回と違います。セレクタは何処にあたる箇所ですのでクラスgnavのliタグという解釈です。ちなみにクラスgnavのaタグだと

という書き方になります。この書き方を覚えると効率よくcssが書けますので、是非覚えましょう。

html５ではブロックレベル要素インライン要素の概念がなくなった

先ほどのブロックレベル要素インライン要素のはなしですが、navタグは何要素なのでしょうか？ 実はnavタグはhtml5から実装されたタグなのでブロックレベル要素でもインライン要素でもありません。html５ではブロックレベル要素インライン要素の概念がなくなったのです。 さて話しは本題に戻ってdisplayプロパティーにinlineを設定してもまだまだ間の抜けたレイアウトですので、様々プロパティーを駆使してレイアウトを整えていきます。

widthプロパティー、marginプロパティー、paddingプロパティー、floatプロパティーを使ってレイアウトを整える。

widthプロパティーは横幅を調整できます。marginプロパティーは外側の余白を調整できます。paddingプロパティーは内側の余白を調整できます。cssでレイアウトを整える上で必須のプロパティーです。 ですが今紹介した３つのプロパティーはインライン要素には正常な効果がありません。値をinline-blockにすれば効くのですが、ここでは意図したレイアウトにならないので、floatプロパティーを使います。 floatプロパティーの値はleft,right,noneとあります。主にコンテンツを左右によせて配置する時に使います。 今回は要素を全て左によせて配置しました。

そしてナビゲーションをブラウザの真ん中に配置したいので以下を追加します。

上記の記述はbodyタグ（セレクタ）の要素を（プロパティー）中央揃え（値）にするという記述です。
bodyタグの要素とは基本ブラウザに表示される全ての要素にあたります。

上記の記述は.gnav（セレクタ）のwidth（横幅）を980pxにする。 外の余白の上は無し左右はブラウザ幅-980px÷2下の余白に20pxとる。左右にmargin:autoを設定するのは要素を中央揃えにする時に使います。ちなみにmarginの値が3つの時は:上　左右　下;です。 overflow:hidden;はfloatした小要素（ここではli）を包み込むための記述です。

上記のように設定してもまだ思うようなレイアウトになっていません。ナビゲーションが崩れています。それはhtmlタグには予め設定されている余白があるからです。その余白を解除するために以下をCSSファイルの最上部に記述します。

*（アスタリスク）は全てのタグに効きます。この方法はあまり推奨されていませんので、またの機会に推奨の方法をご紹介させていただきます。

これで横並びにできましたが、デザインにはメニューの横にラインがはいっていました。それをスタイルで再現します。 ラインの再現方法は、ポピュラーな方法で３つあります。

1. borderプロパティーを使う
2. backgroundプロパティーを画像で使う
3. bacgkroundプロパティーを背景色で使う

3番のbacgkroundプロパティー背景色でやってみたいと思います。どういう理屈で背景がラインになるかというと要素の中に要素をいれ、中に入れた要素の外側に余白をとると入れ物の要素の背景色が見えます。それをラインに見立てるテクニックです。

疑似クラス

ここで注目してほしいのは.gnav li:first-child aの:first-childです。:first-childは疑似クラスです。:first-child疑似クラスは要素内の最初の要素だけに適応されます。 .gnav aではmargin-right:1px;で右側の余白だけ指定しています。デザインを再現するには一番左にもラインに見立てる余白が必要ですので:first-childで最初の.gnav aにだけmargin-left:1px;を追加したのです。

疑似クラスは他の箇所でも使っています。:linkと:visitedと:hoverと:activeです。

:linkと:visitedとはaタグにしか使えません。

• :linkは訪問前のリンクを指定します。
• :visitedは訪問後のリンクの指定です。

:hoverと:activeはaタグ以外にも使えます。

• :hoverはマウスが乗ったときの指定す。
• :activeはアクティブな時クリックしている時などの指定です。

他のプロパティ

text-decoration:none;

文字の装飾（text-decoration）をしない（none）

font-weight:bold;

文字の太さ（font-weight）を太く（bold）です。

デモページ