🥜
HTML・CSS 個人用備忘録(Vol.2)
CSS備忘録
スタイルシートの書き方
# 記述方法
- セレクタ名{プロパティ名:値;}
- セレクタにはHTMLのタグ(<body><h1>etc...)、class、idを指定することができる。
- [ * ]を記述するとすべての要素を指定することができる。
HTMLのタグに直接スタイルをあてる
# 記述方法
- <タグ名 style="プロパティ名:値;">
HTMLファイルにCSSファイルのリンクを設定する
.htmlファイルの<head>タグ内に.cssファイルのリンクを設定し、スタイルを反映させる。
# 記述方法
- <link rel="stylesheet" href="ファイルへのパスとファイル名.css" type="text/css">
特定のdivタグに、スタイルをあてる
divタグに id または class を設定し、CSSファイルで指定することで、指定した部分だけにスタイルをあてることができる。
# divタグにid名, class名を設定する
- <div id="...">
- <div class="...">
# CSSでidを指定する
- #id名(シャープid名)
# CSSでclassを指定する
- .class名(ドットclass名)
文字色の設定[ color ]
文字色を変更できる。
# 記述方法
- プロパティ:色;
# 色の記述方法
「色」の部分はカラーコードを記述する。
- カラー名
black, blue, lime etc... - 16進数(一部短縮コードあり)
#808080, #00FF00(#0F0) etc... - RGB値
RGB(0,255,0)
※カッコ内の数字を0～255の範囲で記述する。
背景色の設定[ background-color ]
要素の背景色を変更できる。
# 記述方法
- プロパティ:色;
# プロパティ
- background-color
文字サイズの設定[ font-size ]
文字のサイズを変更できる。
# 記述方法
- プロパティ:値;
# プロパティ
- font-size
# 「値」の単位
下記の3種が可能。
- [ px ]
- pxは画面上にある点の事で、1pxは1ドットとなる。
- この単位は環境によって変化しない絶対単位である。
- [ em ]
- emは文字の高さを基準とした単位である。
- 使われている書体（フォント）や、CSSで指定している文字の大きさによって変化する相対単位である。
- [ % ]
- 基本的[ em ]と同じ。直近の親要素からサイズ情報の取得を行う。
- フォントサイズを指定していない場合は[ font-size: 100%; ]で16pxが表示される。
ブロック要素の外側の余白を設定[ margin ]
要素の外側の余白が設定出来る。
# 記述方法
- プロパティ:値;
# プロパティ
- margin
- 値が1つ指定された場合、上下左右に同じスタイルが適用される。
- 値が2つ指定された場合、1つ目のスタイルは上下、2つ目は左右の辺に適用される。
- 値が3つ指定された場合、1つ目のスタイルは上、2つ目は左右、3つ目は下の辺に適用
- 値が4つ指定された場合、スタイルはそれぞれ上、右、下、左の順（時計回り）に適用される。
- margin-top
- 要素の外側の上の余白を設定する。
- margin-right
- 要素の外側の上の余白を設定する。
- margin-bottom
- 要素の外側の上の余白を設定する。
- margin-left
- 要素の外側の上の余白を設定する。
ブロック要素の内側の余白を設定[ padding ]
要素の内側の余白が設定出来る。
# 記述方法
- プロパティ:値;
# プロパティ
- padding:
- 値が1つ指定された場合、上下左右に同じスタイルが適用される。
- 値が2つ指定された場合、1つ目のスタイルは上下、2つ目は左右の辺に適用される。
- 値が3つ指定された場合、1つ目のスタイルは上、2つ目は左右、3つ目は下の辺に適用
- 値が4つ指定された場合、スタイルはそれぞれ上、右、下、左の順（時計回り）に適用される。
- padding-top
- 要素の内側の上の余白を設定する。
- padding-right
- 要素の内側の上の余白を設定する。
- padding-bottom
- 要素の内側の上の余白を設定する。
- padding-left
- 要素の内側の上の余白を設定する。
枠線の設定[ border ]
ブロック要素を囲う枠線を設定できる。
# 記述方法
- プロパティ:線種␣線の太さ␣線の色;
# プロパティ
- border
- 値が1つ指定された場合、上下左右に同じ値が適用される。
- 値が2つ指定された場合、1つ目の値は上下、2つ目は左右の辺に適用される。
- 値が3つ指定された場合、1つ目の値は上、2つ目は左右、3つ目は下の辺に適用される。
- 値が4つ指定された場合、値はそれぞれ上、右、下、左の順（時計回り）に適用される。
- border-top
- 要素の上側の枠線を設定する。
- border-right
- 要素の右側の枠線を設定する。
- border-bottom
- 要素の下側の枠線を設定する。
- border-left
- 要素の左側の枠線を設定する。
# 線種
- プロパティ:none
borderを記述していない場合noneが初期値として設定されている。
枠線は表示されず、太さは0となる。
ボーダーが重なる場合は他のプロパティが優先される。 - プロパティ:hidden
枠線は表示されず、太さは0となる。
ボーダーが重なる場合はhiddenのプロパティが優先される。 - プロパティ:solid
1本線を表示する。 - プロパティ:double
2本線を表示する。 - プロパティ:groove
立体的に窪んだ線を表示する。 - プロパティ:ridge
立体的に隆起した線を表示する。 - プロパティ:inset
上下左右を設定した時、上と左の線が暗く、下と右の線が明るく表示される。
また、枠線で囲まれた領域が立体的に窪んでいるような表示となる。 - プロパティ:outset
上下左右を設定した時、上と左の線が明るく、下と右の線が暗く表示される。
また、枠線で囲まれた領域が立体的に隆起しているような表示となる。 - プロパティ:dashed
破線を表示する。 - プロパティ:dotted
点線を表示する。
要素の角を丸める[ border-radius ]
要素の四隅の角を丸めることができる。
画像の角も丸めることができる。
# 記述方法
- プロパティ:値;
値の単位は[ % ][ px ]で記述する。
# プロパティ
- border-radius
- 値が1つ指定された場合、四隅に同じ値が適用される。
- 値が2つ指定された場合、1つ目の値は左上と右下、2つ目は右上と左下の角に適用される。
- 値が3つ指定された場合、1つ目の値は左上、2つ目は右上と左下、3つ目は右下の角に適用される。
- 値が4つ指定された場合、値はそれぞれ左上、右上、右下、左下の順（時計回り）に適用される。
- border-top-left-radius
- 左上の角を丸める値を設定する。
- 値をpxで記述する際は値を2つ記述することで左上角-上辺、左上角-左辺の順に値を設定できる。
- border-top-right-radius
- 右上の角を丸める値を設定する。
- 値をpxで記述する際は値を2つ記述することで右上角-上辺、右上角-右辺の順に値を設定できる。
- border-bottom-right-radius
- 右下の角を丸める値を設定する。
- 値をpxで記述する際は値を2つ記述することで右下角-下辺、右下角-右辺の順に値を設定できる。
- border-bottom-left-radius
- 左下の角を丸める値を設定する。
- 値をpxで記述する際は値を2つ記述することで左下角-下辺、左下角-左辺の順に値を設定できる。
擬似クラス
セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指す。
【擬似クラスの一例】
| link | visited | hover | active | focus | lang | first-child |
|---|---|---|---|---|---|---|
| 未訪問のリンク | 訪問済みのリンク | カーソルがのっている要素 | クリック中の要素 | フォーカスされている要素 | 特定の言語を指定した要素 | 要素内の最初の子要素 |
| (例)a:link{} | (例)a:visited{} | (例)a:hover{} | (例)a:active | (例)input:focus{} | (例)p:lang(ja){} | (例)li:first-child{} |
ブロック要素・表(セル)の整列[ text-align ]
要素に対して水平、垂直の配置を設定出来る。
# 記述方法
- プロパティ:値;
# プロパティ
- text-align
- 水平方向の配置を設定できる。
- text-align-last
- 強制的な改行の直前の行、ブロックの最終行の配置を設定できる。
# text-alignの値
- start
書字方向が左書きであれば[ left ]、右書きであれば[ right ]と同じ - end
書字方向が左書きであれば[ right ]、右書きであれば[ left ]と同じ - left
行ボックスの左辺に寄せられる。 - right
行ボックスの右辺に寄せられる。 - center
行ボックス内の中央に寄せられる。 - match-parent
[ start ]と[ end ]値が親要素の[ direction ]に従って計算され、適切な[ left ]か[ right ]値に置き換えられる。 - justify
両端揃えされる。
テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられる。 - justify-all
[ justify ] と同じだが、最終行も強制的に両端揃えされる。
インライン要素・テーブルセル要素の整列[ vertical-align ]
- インライン要素とテーブルセル要素に有効。
- ブロック要素に「vertical-align」を指定してもスタイルは反映されないので
[ display:table-cell; ]または[ display:inline-block; ]とすることで有効化できる。
# 記述方法
- プロパティ:値;
# プロパティ
- vertical-align
- 垂直方向の配置を設定できる。
# vertical-alignの値
- baseline
初期値に設定されている。
要素のベースラインを親要素のベースラインに揃える。 - top
上端に揃える。 - middle
中央に揃える。 - bottom
下端に揃える。 - text-top
テキストを上端に揃える。
テーブルセルでは無効となる。 - text-bottom
テキストを下端に揃える。
テーブルセルでは無効となる。 - super
テキストを上付き文字に設定
テーブルセルでは無効となる。 - sub
テキストを下付き文字に設定
テーブルセルでは無効となる。
レイアウト要素の設定[ display ]
- 要素ごとにdisplayプロパティの初期値が決まっている。
- 要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト(表示形式)を設定できる。
# 記述方法
- プロパティ:値;
# プロパティ
- display
# displayの値
- block
- p, div, ul, h1〜h6などのタグの初期値
- 要素は縦に並ぶ
- 要素の幅・高さを設定できる。
- 上下左右の余白(margin,padding)を設定できる。
- text-alignは設定できない。
- vertical-alignは設定できない。
- inline
- a, span, imgなどのタグの初期値
- 要素は横に並ぶ
- 要素の幅・高さは指定できない(文字の長さや大きさで決まる。)
- 左右の余白(margin,padding)を設定できるが上下の余白は設定できない。
- text-alignが設定できる。(親要素に対して設定)
- vertical-alignが設定できる。
- inline-block
- 要素は横に並ぶ
- 要素の幅・高さを設定できる。
- 上下左右の余白(margin,padding)を設定できる。
- text-alignが設定できる。(親要素に対して設定)
- vertical-alignが設定できる。
- none
- 要素を非表示にする。
#参考URL
Discussion