カテゴリー: CSS

[ CSS ] ナビゲーション固定し、スクロールしても動かないヘッダーを作成する方法

29 1月 19
Kazu
No Comments

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

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

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel [JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT
Read More…

[ CSS ] 3カラム・レイアウト、コーディング clearfix

02 4月 18
Kazu
No Comments

 

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

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

[ CSS ] オーソドックスな3カラム・レイアウト、コーディング

02 4月 18
Kazu
No Comments

 

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

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

[ CSS ] ボックス関係のプロパティ

07 8月 17
Kazu
No Comments

 

visibility プロパティ

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

 適用要素  全ての要素
値の継承
初期値 visible
指定可能な値 visible : ボックスを見える状態にする。
hidden : ボックスを透明にする。
inherit : 親要素と同じ値。
Read More…

[CSS] ボックスモデル

24 10月 16
Kazu

No Comments

 

ボックスモデル

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

content (コンテンツ領域)に、テキストや画像などの要素の内容が表示される。ボックスモデル

 

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

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

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

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

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

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

border の内側に、background-color により、背景色を付けることが出来る。

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

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

ボックスサイズの計算

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

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

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

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

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

ボックス全体の横幅

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

ボックス全体の高さ

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

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

Read More…