初心者にもわかりやすいWEBサイト作成お助けサイトです。
- ボックスモデル
-
(X)HTMLの要素はそれぞれ特有の領域を持っており、四角形と決まっています。この四角形の領域のことをボックスと言います。そして、そのボックスは要素に含まれるテキストや画像などの内容であるcontent、内容と境界との余白であるpadding、境界線であるborder、境界線と他の要素との間隔であるmarginの4つの領域によって構成されています。このような仕組みのことをボックスモデルと言い、CSSでページの見た目を決めていくうえで最も大切な考え方です。
- paddingとmargin
-
これらはpaddingプロパティとmarginプロパティで指定します。どちらも“値”の数によって上下左右のどこに適用されるかが変わってきます。“値”が1つだけだと上下左右に、2つだと上下と左右に、3つだと上と左右と下に、4つだと上と右と下と左にそれぞれ適用されます。
#idname {
padding: 10px;
}
#idname {
margin: 10px 20px;
}
#idname {
padding: 10px 20px 15px;
}
#idname {
margin: 10px 10px 15px 20px;
}
paddingプロパティとmarginプロパティともに上下左右(top、right、bottom、left)の4辺に分割し、個別の“値”を指定することもできます。4辺に分割した場合には、top→right→bottom→leftの順に指定していきます(下記の例は、上記の例と同じ効果となります)。
#idname {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#idname {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
#idname {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
#idname {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 padding paddingの一括指定 長さ、% 0 『table要素』内部要素を除く全ての要素。ただし、『th要素』、『td要素』は可 padding-top、padding-right、padding-bottom、padding-left 上下左右のpadding 長さ、% 0 『table要素』内部要素を除く全ての要素。ただし、『th要素』、『td要素』は可 margin marginの一括指定 長さ、%、auto 0 『table要素』内部要素を除く全ての要素 margin-top、margin-right、margin-bottom、margin-left 上下左右のmargin 長さ、%、auto 0 『table要素』内部要素を除く全ての要素
- border
-
borderプロパティで指定します。“値”には太さ、形状、色を半角スペース区切りで指定します。
太さには細い線であるthin、中くらいの線であるmedium、太い線であるthickの3段階の“値”の他に数による任意の太さを指定できます。形状には一重線のsolid、点線のdotted、破線のdashed、二重線のdoubleなどを指定できます。色にはLesson 02の色を指定できます。
#idname {
border: 1px dotted #FF0000;
}
borderプロパティもまた太さ(width)、形状(style)、色(color)を個別に指定できます。また、上下左右の4辺に分割して、それらを個別に指定することもできます(下記の例は、上記の例と同じ効果となります)。
#idname {
border-width: 1px;
border-style: dotted;
border-color: #FF0000;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 border borderの一括指定 太さ、形状、色を半角スペース区切りで 各プロパティを参照 全ての要素 border-width borderの太さ 長さ、thin、medium、thick medium 全ての要素 border-style borderの形状 solid、dotted、dashed、double、noneなど none 全ての要素 border-color borderの色 #RRGGBB、#RGB、カラー名、transparentなど colorプロパティの値 全ての要素 border-top、border-right、border-bottom、border-left 上下左右のborder 太さ、形状、色を半角スペース区切りで 各プロパティを参照 全ての要素
- widthとheight
-
contentの幅はwidthプロパティで、高さはheightプロパティで指定します。
#idname {
width: 200px;
height: 100px;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 width contentの幅 長さ、%、auto auto 非置換インライン要素、『table要素』の行要素と行グループ化要素を除く全ての要素 height contentの高さ 長さ、%、auto auto 非置換インライン要素、『table要素』の行要素と行グループ化要素を除く全ての要素 max-width、max-height contentの最大幅と最大高さ 長さ、%、none none width、heightプロパティを参照 min-width、min-height contentの最小幅と最小高さ 長さ、% 0 width、heightプロパティを参照
- 視覚整形モデル
-
それぞれの要素が生成したボックスをどのように表示したり配置するかを決める仕組みのことを言います。
- display
-
生成するボックスの種類を指定します。
inline、block、list-item、noneなどの“値”を指定でき、通常はブロックレベルとして生成されるボックスにinlineと指定してインライン化したり、逆にインラインとして生成されるボックスにblockと指定してブロックレベル化したりします。
#idname {
display: inline;
}
#idname {
display: block;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 display ボックスの種類 inline、block、list-item、noneなど inline 全ての要素
- positionとz-indexとtop、right、bottom、left
-
ボックスの配置方法を指定します。
相対配置を意味するrelative、絶対配置を意味するabsolute、固定配置を意味するfixed、通常配置(元の位置に戻す)を意味するstaticを指定でき、z-indexプロパティでボックスの重なりの順序も指定できますし、topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで上下左右をも細かく指定できます。
#idname {
position: relative;
}
#idname {
z-index: auto;
}
#idname {
top: 250px;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 position ボックスの配置方法 relative、absolute、fixed、static static 全ての要素 z-index ボックスの重なり順序 整数、auto auto 配置が決められている要素(positionプロパティの“値”がstatic以外の要素) top、right、bottom、left ボックスの上下左右からの位置指定 長さ、%、auto auto 配置が決められている要素(positionプロパティの“値”がstatic以外の要素)
- 注意点
-
relativeを指定した場合、要素本体の位置が基準となって配置されるのに対し、absoluteと指定した場合には、親ボックスの位置が基準となって配置され、fixedと指定した場合には、親ボックスの位置が基準となって配置されるだけではなく、スクロールに対して固定的に配置されます。
absoluteの基準位置となる親ボックスは、positionプロパティでrelativeなどの“値”が指定され、配置方法が決められていなければなりません。もし配置方法が決められていなければ、さらに先祖要素(ある要素を包含している要素)に遡ります。それでも配置方法が決められていなければ、最終的には『body要素』が基準位置となります。
- floatとclear
-
floatプロパティでボックスを左右に回り込ませる指定し、clearプロパティでボックスの回り込みを解除する指定をします。
ボックスを左へ回り込ませるにはfloatプロパティにleftを指定し、右へ回り込ませるにはrightを指定します。回り込みを解除するにはclearプロパティにleft、right、bothといった解除する方向を指定します。
#leftside {
float: left;
}
#rightside {
float: right;
}
#footer {
clear: both;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 float ボックスの回り込み left、right、none none 全ての要素 clear ボックスの回り込みの解除 left、right、both、none none ブロックレベル要素