CSSの備忘録を記載していく。
セレクタ
/* クラス */
.class
/* id */
#id
/* >区切り → 子要素のみ適用。「A > B」の場合、Bの要素のみ適用 */
#main > p
/* カンマ区切り → 複数のセレクタにまとめて適用 */
p,td
/* 半角スペース区切り → 子孫に適用。「A B」の場合、Aの子孫階層のBに適用 */
div p
/* +区切り → 隣接する（直後の）要素に適用 */
#A+div
/* ~区切り → 後にある要素に適用 */
#A~div
/* *= → 前後方一致した要素に適用 */
class*='aa'
/* :not → E:not(s)の場合、sでないセレクタを持つE要素に適用 */
div:not(.top)
/* n番目のE要素に適用。nの部分は任意の数値以外に、奇数の場合「odd」偶数の場合「even」が指定可能 */
E:nth-of-type(n)
/* 指定した要素にカーソルを重ねたときに適用 */
:hover
/* カーソルを重ね、クリックしてから離すまで適用 */
:active
/* 指定した要素にカーソルを重ねたときに適用 */
:focus
ボーダースタイル
/* ボーダー非表示、太さも0 */
border-style: none
/* ボーダー非表示、太さも0 */
border-style: hidden
/* 1本線 */
border-style: solid
width:autoとwidth:100%の違い
width:autoとpaddingを指定している場合、paddingを含んで横幅100%となる
width:100%とpaddingを指定している場合、paddingを含まずに横幅100%となる
マージンとパディング
margin 要素の外側の余白
padding 要素の内側の余白
position
/* デフォルト値。位置を指定できない */
position: static
/* 基本的にstaticと同じ。top、right、bottom、leftで指定した位置の相対位置に配置される */
position: relative
/* ページがスクロールされても同じ位置に表示される */
position: fixes
/* 親要素からの相対位置に配置される */
position: absolute
ブロックレベル要素とインラインレベル要素
ブロックレベル要素
h1、p、ul、ol、div、tableなど
要素の前後に改行が入る（縦に要素が並んで表示される）
width、height、margin、paddingを指定できる
インラインレベル要素
a、span、strongなど
要素の前後に改行がない。（横に要素が並んで表示される）
width、heightを指定できない
margin、paddingは左右のみ指定可能
display
/* ブロックレベル要素にする */
display: block
/* インライン要素にする */
display: inline
/* インライン要素だが、width、height、margin、paddingが可能 */
display: inline-block
/* ブロックレベルのflexコンテナボックスを生成。直下の要素が並列になる */
display: flex
flexのスタイル
/* 左から右に並ぶ */
flex-direction: row
/* 右から左に並ぶ */
flex-direction: row-reverse
/* 上から下へ並ぶ */
flex-direction: column
/* 下から上へ並ぶ */
flex-direction: column-reverse
/* 改行なし */
flex-wrap: nowrap
/* flexコンテナに入るよう改行して表示 */
flex-wrap: wrap
float
/* 指定した要素を左に寄せる */
float: left
/* 指定した要素を右に寄せる */
float: right
/* 初期値。なにもしない */
float: node
/* floatで左寄せ、右寄せした要素に対する回り込みを解除する */
clear: left
clear: right
clear: both
clear: none
スタイルの強制適用
!important
overflow
/* ボックスからはみ出して表示（初期値） */
overflow: visible
/* はみ出した場合、スクロール */
overflow: scroll
/* はみ出した場合、表示しない */
overflow: hidden
/* ブラウザに依存 */
overflow: auto
box-sizing
/* パディングとボーダーを幅と高さに含めない */
box-sizing: content-box
/* パディングとボーダーを幅と高さを含める */
box-sizing: border-box
/* 親要素の値を継承する */
box-sizing: inherit
テキスト表示関連
/* 連続する空白を1つの空白として表示（改行あり） */
white-space: nomal
/* 連続する空白をそのまま表示 */
white-space: pre
/* 連続する空白を1つの空白として表示（改行なし） */
white-space: nowrap
/* テキストを切り取って省略記号を表示 */
text-overflow: ellipsis
z-index
z-index: 数値
positionでstatic以外が指定された場合、適用される
整数値 重なりの順序を指定。値が大きいほど上になる
z-index: auto 親要素と同じ階層。初期値
visibility
/* ボックスを表示 */
visibility: visible
/* ボックスを非表示 */
visibility: hidden
/* テーブルの行、列に指定した場合、その部分を詰めて表示 */
visibility: collapse