jQueryを使った方法も記事にされているのですが、今回は、CSSを使って「ナビゲーションを固定し、スクロールしても動かないメニュー」を作成する方法を書きます。

jQueryを使った方法は、リンクをご参考に下さい。

clearfix を用いた3カラム・レイアウトのコーディングの手順

1. ３つのボックスに対して、それぞれ、float プロパティを指定する。
2. clearfix を使い、回り込みを解除する。

3カラム・レイアウトのコーディングの手順

1. 各段の幅を設定。
2. float を指定して2段組にする。
3. float したボックス内でさらに float を指定する。

リセットとは？

IEやGoogle Chromeなどブラウザには、CSSを設定しなくとも、あらかじめ、デフォルトのスタイルが用意されている。

• このデフォルトのスタイルは、ブラウザ間によって異なっている。
• CSSファイルを制作する際、このデフォルトのスタイルが、邪魔になる場合がある。

それらを避け、ブラウザ間での見え方を統一するために、デフォルトのスタイルを無効にすることを、「CSSをリセットする。」という。

CSS をコーディングしていると、同じプロパティに異なる値が指定されていたりします。

そのような場合、CSS スタイルの優先順位が適用される。

CSSの優先順位は、

• CSSの記述方法
• セレクタの種類
• CSSの記述する順番

によって決定される。

フォントを指定しなかった場合

閲覧する環境によって、系統の異なるフォントが表示され、デザインに統一感が無くなる。

visibility プロパティ

ボックスを透明にするプロパティ。

border-color プロパティ　ボーダーの色を指定

ボックスモデル

全てのHTML要素は、CSSで「ボックス」と呼ばれる「四角い領域」として扱われる。

content （コンテンツ領域）に、テキストや画像などの要素の内容が表示される。

ボックスモデルの構成要素

その内側から、padding （パディング）、border （境界線）、margin （マージン）と外側へ領域を持つ。

• コンテンツ領域（width, height プロパティ）
• padding （内側の余白）
• border （ボーダー）
• margin （外側の余白）

width, height プロパティで指定できるプロパティは、コンテンツ領域を指定できるプロパティであって、ボックス全体の横幅や高さを指定できるプロパティではないことに、注意。

ブラックボックスの前後は改行され、上から下へ配置される。
width,height,上下左右の margin, padding が指定できる。

インラインボックスは、改行は入らず、左から右に横方向に配置される。
基本的に、width,height,上下の margin は指定できない。

border の内側に、background-color により、背景色を付けることが出来る。
背景色が付くのは、width,height,padding までの領域で、margin の領域には背景は付かない。

border （境界線）には、太さ、線種、色を指定できる。

width,height は、コンテンツ領域を設定し、border,padding が存在する場合は、見た目の幅と width,height が一致しない。

ボックスサイズの計算

ボックスサイズの計算は、レイアウトを組む際の基本となる。

ボックスサイズの計算方法

レイアウトなどで計算する場合、

• padding：要素の中の余白
• margin：要素の外の余白

と把握すれば、イメージしやすい。

ボックス全体の横幅

ボックス全体の横幅　＝　コンテンツ領域の横幅 width ＋　左右のマージンの幅　＋　左右のパディングの幅　＋　左右のボーダーの太さ

ボックス全体の高さ

ボックス全体の高さ　＝　コンテンツ領域の高さ　＋　上下のマージンの幅　＋　上下のパディングの幅　＋　ボーダーの太さ

レイアウトを組む場合、正しく計算し、width を割り出さないと、カラム落ちが起きてしまう。

CSSの記述法

例

p {color:red;}

セレクタ

具体的に、どの箇所にCSSを適応させるのかを明確に指示させるもの。