よく使う、でもついつい忘れがちなcssコードまとめ

よく使うCSSを備忘録も兼ねてまとめました。

余白関連

●paddingとborderを幅と高さに含める

 

●テーブルの列幅を均等にする

 

●隣接するボーダーラインを重ねあわせて表示

 

●隣接するボーダーラインを離して表示

 

例：1ピクセルの隙間を作りたい場合

 

●display: table; に余白を指定
table-cell に margin は効かない為、border-collapse でdasplay: table のセル間隔を調整します

 

装飾関連

●透明度

●背景色のみを透過
・白透過

・黒透過

 

●角丸

 

●疑似クラス

・奇数番目

 

・偶数番目

 

・n番目

 

・最後からn番目

 

・親要素内で兄弟関係にあるA要素でn番目のもの
（項目の等しいブロックを繰り返す際など）

 

・要素の直前に内容を挿入する

 

●テキストシャドウ

・1番目の値
水平方向の影の距離。正の値を指定すると右方向に影、負の値を指定すると左方向に影。

・2番目の値
垂直方向の影の距離。正の値の値を指定すると下方向に影、負の値を指定すると上方向に影。

・3番目の値
影のぼかし半径。

・4番目の値
影の色。

●ドロップシャドウ

1～4番目の値はテキストシャドウに同じ。

●グロー

水平方向のずれ、垂直方向のずれを0にするとグローになります。

レイアウト関連

●dt dd を横並び

 

その他

●URLなどの長い文字列を折り返して表示