CSS

【実践編】現役コーダーがよく使う便利なCSSプロパティまとめ

 

コーディングの際、毎回使うCSSっていうのはだいたい限られています。
スペルとか覚える気もないし、毎回ググってコピペっていうのも非効率。
手元にメモしておけば、いざという時に役に立ちます。
よかったら参考にどうぞ。

目次

絶対位置 display: flex;

flexを使ったケースが増えてきました。
縦横中央にしたい場合、これが一番楽です。
子要素に対して制御することができます。
しかしながら、高さ指定しないと効かないので要注意。

上下左右中央

display: flex;
justify-content: center;
align-items: center;

絶対位置 position: absolute;

定番にもなっているposition: absolute;を使ったCSSプロパティです。
親要素にはposition: relative;を使っておくことが前提になります。

上下中央

position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
left: 0;

左右中央

position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);

上下左右中央

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

固定表示（スクロールに追随する） position: sticky;

ある程度スクロールした時に固定表示される便利なプロパティです。
position: -webkit-sticky;を指定しないとsafafiやiphoneで効かないので要注意。
また、IE、Egge非対応だったりするので、これも要注意です。

position: -webkit-sticky; /* Safari */  
position: sticky;
top :0;

固定表示 position: fixed;

スクロール関係なく固定表示

position: fixed;
top :0;

ホバー時用アニメーション

*:hover{
	transition: all  0.2s ease;
}

継承

継承させない

:initial;

継承させる

:inherit;

floatの回り込み解除

:after{
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

フォントアイコン配置（Font Awesome）

:before{
	content: "\f077";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
}

テーブル　セル間隔

table{
  border-collapse: seprate;
  border-spacing:0px;
}
RELATED POST