2015年07月23日（Thu）
たまに使うCSSプロパティや疑似クラスのまとめ
たまに使うCSSのプロパティや疑似クラスのスペルが覚えられないのでマトメました。
| 書式 | 説明 |
|---|---|
| 要素名:first-child{ プロパティ名:値; } | 要素内の最初の子要素（<li>タグに便利） |
| 要素名:last-child{ プロパティ名:値; } | 要素内の最後の子要素（<li>タグに便利） |
| 要素名:nth-child(odd){ プロパティ名:値; } | 奇数番目の要素にスタイルを適用 |
| 要素名:nth-child(even){ プロパティ名:値; } | 偶数番目の要素にスタイルを適用 |
| 要素名:nth-child(X){ プロパティ名:値; } | X番目 |
| 要素名:nth-child(Xn){ プロパティ名:値; } | Xの倍数 |
| content:”文字列”; | 挿入する文字列を「”」または「’」で括って指定 |
| content:url(“画像パス”); | urlの()内に画像や音声等のファイルを指定 |
| 要素名:before{プロパティ名:値;} | 要素の直前 |
| 要素名:after{プロパティ名:値;} | 要素の直後 |
| 要素名:hover{プロパティ名:値;} | カーソルが乗っている要素 |
| text-decoration:none; | テキストに線を付けない |
| プロパティ名:値!important; | 通常の優先順位に関係無く優先的にスタイルが適用 |
| display:none; | 要素ごと非表示 |
| position:relative; | 指定したボックスがある場合は基準位置 |
| position:absolute; | 親ボックスの左上が基準位置として配置を指定 |
| [class^=”一致名”]{ プロパティ名:値; } | セレクタ名の前方一致 |
| [class$=”一致名”]{ プロパティ名:値; } | セレクタ名の後方一致 |
| [class*=”一致名”]{ プロパティ名:値; } | セレクタ名の部分一致 |
| width: calc(100% – 80px);; | CSS のプロパティ値を指定する際に計算を行うことができる |
| vertical-align: -3px; | アイコンとテキストを並べた際の微調整 |
flexbox
| property | value | 効果・説明 |
|---|---|---|
| display | flex | 子要素を横並びにする |
| inline-flex | インライン要素に使う場合 | |
| flex-wrap | nowrap | (初期値)子要素を折り返しせず一行に並べる |
| wrap | 子要素を折り返し複数行に上から下へ並べる | |
| wrap-reverse | 子要素を折り返し複数行に下から上へ並べる | |
| align-items | stretch | (初期値)親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 |
| flex-start | 親要素の開始位置から配置。上揃え。 | |
| flex-end | 親要素の終点から配置。下揃え。 | |
| center | 中央揃え | |
| baseline | ベースラインで揃える | |
| justify-content | flex-start | (初期値)行の開始位置から配置。左揃え。 |
| flex-end | 行末から配置。右揃え。 | |
| center | 中央揃え | |
| space-between | 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 | |
| space-around | 両端の子要素も含め、均等に間隔をあけて配置 | |
| flex-direction | row | (初期値)子要素を左から右に配置 |
| row-reverse | 子要素を右から左に配置 | |
| column | 子要素を上から下に配置 | |
| column-reverse | 子要素を下から上に配置 | |
| align-content | stretch | (初期値)親要素の高さに合わせて広げて配置 |
| flex-start | 親要素の開始位置から配置。上揃え。 | |
| flex-end | 親要素の終点から配置。下揃え。 | |
| center | 中央揃え | |
| space-between | 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 | |
| space-around | 上下端にある子要素も含め、均等に間隔をあけて配置 | |
| order | 数字 | 初期値は0。マイナス値を含む数値のみ指定でき、任意の順で並べ替える。 |
参考サイト：日本語対応！CSS Flexboxのチートシートを作ったので配布します
position:absolute で左右を中央に寄せる場合
.ads{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
参考サイト：【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
コメント（0件）
たまに使うCSSプロパティや疑似クラスのまとめに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。
コメントフォーム