初心者にもわかりやすいWEBサイト作成お助けサイトです。
- line-height
-
行の高さを指定します。
“値”には%やem、ptなど様々な単位を指定できますが、%とemは継承(先祖要素からの計算値の引き継ぎ)の問題が、ptは継承に加えてフォントを大きくした場合にテキストが重なるなどフォントサイズとの兼ね合いの問題があるため、実数でしておく方法がよく使用されます。
#idname {
line-height: 1;
}
#idname {
line-height: 1.5em;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 line-height 行の高さ normal、実数、長さ、% normal 全ての要素
- vertical-align
-
行の中のテキストや画像の上下位置や表のセルの内容の上下位置を指定します。
#idname {
vertical-align: baseline;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 vertical-align 行の中やセルの中での上下位置 baseline、top、middle、bottomなど baseline インライン要素、『th要素』、『td』要素
- 視覚効果
-
目で見てわかる効果です。
- visibility
-
ボックスの可視(visible)、不可視(hedden)を指定します。
displayプロパティでnoneと指定した場合は、非表示化なのでボックスは生成されませんが、visibilityプロパティでhiddenと指定した場合は、不可視化なので内容は目には見えませんがボックスは生成されます。
#idname {
visibility: visible;
}
#idname {
visibility: hidden;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 visibility ボックスの可視、不可視 visible、hidden、collapse visible 全ての要素
- overflow
-
内容がボックスからはみ出る場合の表示方法(切り抜き方法)を指定します。
はみ出た部分は見えませんが内容を存在させる場合にはvisibleを、はみ出た部分が見えず且つ存在させない(実際には見えなくする)場合にはhiddenを、はみ出た部分を見せるためにスクロールバーをつける場合にはscrollを、ブラウザに任せる場合にはautoを指定します。
#idname {
overflow: scroll;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 overflow ボックスの切り抜き方法 visible、hidden、scroll、auto visible ブロックレベル要素、『th要素』、『td要素』
- color
-
文字色をRGB値やカラー名で指定します。
#idname {
color: #FF0000;
}
#idname {
color: red;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 color 文字色 #RRGGBB、#RGB、カラー名など ブラウザに依存 全ての要素
- background
-
background-colorプロパティで背景色を、background-imageプロパティで背景画像を指定します。また、background-repeatプロパティで背景画像の繰り返し方法を、background-positionプロパティで背景画像の開始位置を、background-attachmentプロパティでスクロールに対して背景画像を移動させるか固定させるかを指定することができます。また、これらはbackgroundというショートハンドプロパティで“値”を半角スペース区切りに指定することで一括して指定することもできます。
body {
background-color: #CCCCCC;
background-image: url(image/background.png);
background-repeat: repeat-x;
background-position: 0px -10px;
}
body {
background: #CCCCCC url(image/background.png) repeat-x 0px -10px;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 background-color 背景色 #RRGGBB、#RGB、カラー名、transparentなど transparent 全ての要素 background-image 背景画像 url(...)、none none 全ての要素 background-repeat 背景画像の繰り返し方法 repeat、repeat-x、repeat-y、no-repeat repeat 全ての要素 background-position 背景画像の開始位置 left、right、center、top、bottom、%、長さ 0%0% 全ての要素 background-attachment 背景画像の移動、固定 scroll、fixed scroll 全ての要素 background 背景の一括指定 各プロパティの“値”を半角スペース区切りで指定 各プロパティ参照 全ての要素
- 注意点
-
背景はborder領域まで塗られますが、margin領域には塗られません。また、背景が下、背景画像が上という構造も理解しておく必要があります。
ブラウザで画像読み込みオフにしているなどで背景画像が表示されない環境や背景画像のうち透過処理されている部分では下にある背景色が表示されます。
- font
-
font-familyプロパティでフォントの種類を、font-styleプロパティでフォントの形状(斜体、通常体など)を、font-weightプロパティでフォントの太さを、font-sizeプロパティでフォントの大きさを指定します。また、これらはfontというショートハンドプロパティで“値”を半角スペース区切りに指定することで一括して指定することもできますが、使い勝手があまり良くないため、個別の“プロパティ”を指定するのが一般的です。
font-familyプロパティでは、フォント名をコンマ区切りで指定することで複数のフォントを指定することができます。その際、総称ファミリーと呼ばれるserif(明朝体)、sans-serif(ゴシック体)、cursive(筆記体、草書体)、fantasy(装飾フォント)、monospace(等幅フォント)のいずれかを指定しておくことが推奨されており、主に明朝体を指定している場合にはserifを、主にゴシック体を指定している場合にはsans-serifを指定するのが一般的です。
font-sizeプロパティでは、%やemなどの他にxx-small、x-small、small、medium、large、x-large、xx-largeという7段階の“値”を指定できます。
#idname {
font-family: "メイリオ","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
font-style: italic;
font-weight: bold;
font-size: large;
}
#idname {
font: "メイリオ","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif italic bold large;
}
プロパティ 効果 指定できる値 初期値 適用できる要素 font-family フォントの種類 フォント名をコンマ区切りで複数指定 ブラウザに依存 全ての要素 font-style フォントの形状 normal、italic、oblique normal 全ての要素 font-weight フォントの太さ normal、boldなど normal 全ての要素 font-size フォントの大きさ 長さ、%、mediumなど medium 全ての要素 font フォントの一括指定 各プロパティの“値”を半角スペース区切りで指定 none 全ての要素