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

MARKLEAPS

2019.09.19

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

余白関連

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

div {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

div {

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

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

table {
	width: 100%;
	table-layout: fixed;
}

table {

width: 100%;

table-layout: fixed;

}

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

table {
	border-collapse: collapse;
}

table {

border-collapse: collapse;

}

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

table {
	border-collapse: separate;
}

table {

border-collapse: separate;

}

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

table {
	border-collapse: separate;
	border-spacing: 1px;
}

table {

border-collapse: separate;

border-spacing: 1px;

}

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

div {
	display: table;
	border-collapse: separate;  /* セルの間隔を空ける */
	border-spacing: 2px 0;  /* 左右 上下で記述 */
}

div {

display: table;

border-collapse: separate; /* セルの間隔を空ける */

border-spacing: 2px 0; /* 左右上下で記述 */

}

装飾関連

●透明度

div {
	opacity: 0.5;
｝

div {

opacity: 0.5;

｝

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

div {
	background-color: rgba(255,255,255,0.7);
}

div {

background-color: rgba(255,255,255,0.7);

}

・黒透過

div {
	background-color: rgba(0,0,0,0.7);
}

div {

background-color: rgba(0,0,0,0.7);

}

●角丸

div {
	border-radius: 10px;
}

div {

border-radius: 10px;

}

●疑似クラス

・奇数番目

:nth-child(odd) {}

1	:nth-child(odd) {}

・偶数番目

:nth-child(even) {}

1	:nth-child(even) {}

・n番目

:nth-child(n) {}

1	:nth-child(n) {}

・最後からn番目

:nth-last-child(n) {}

1	:nth-last-child(n) {}

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

:nth-of-type(n) {}

1	:nth-of-type(n) {}

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

p:before {content: "★";}

1	p:before {content: "★";}

p:before {content: url("../pic/arrow.png");}

1	p:before {content: url("../pic/arrow.png");}

●テキストシャドウ

p{
	text-shadow: 1px 1px 3px #000;
}

text-shadow: 1px 1px 3px #000;

}

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

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

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

・4番目の値
影の色。

●ドロップシャドウ

div{
	box-shadow: 3px 3px 5px 0 #777;
}

div{

box-shadow: 3px 3px 5px 0 #777;

}

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

●グロー

div{
	box-shadow: 0 0 12px 0 #777;
}

div{

box-shadow: 0 0 12px 0 #777;

}

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

レイアウト関連

●dt dd を横並び

dl{
	width: 600px;
}

dt{ 
	width: 100px;
	float: left;
	clear: left;
}

dd{ 
	width: 500px;
	float: left;
	display: inline;
}

dl{

width: 600px;

}

dt{

width: 100px;

float: left;

clear: left;

}

dd{

width: 500px;

float: left;

display: inline;

}

その他

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

div {
	word-break: break-all;
}

div {

word-break: break-all;

}

よく読まれている関連記事

CSSアニメーション　2つの機能