- 投稿日：2019-08-16T14:53:47+09:00
俺的CSSの便利なProperty・Value・Selector 50連発！
最近すごくHTMLやCSSを書いている気がするので、ここらでCSSのよく使うプロパティや知っていると便利なプロパティをまとめてみることにしました。早速行ってみましょう！
よく使うもの
1. ::before, ::after
これを指定した要素の子要素として挿入される疑似要素。子要素を持てない要素(img, inputなど)には指定不可能。
contentプロパティを指定しない限り挿入されない。なにも入れるcontentがない場合はcontent: ""を指定する。2. min-height, min-width
高さや幅の最小値を指定する。mainコンテナのように、必ずある大きさ以上の大きさが必要な要素に指定すると、コンテンツの大きさにかかわらず設定した大きさより小さくならない。
3. max-height, max-width
上の
min-系とは逆に、高さや幅の最大値を設定する。指定すると、コンテンツの大きさにかかわらず、設定した大きさより大きくならない。4. order
HTMLの要素の兄弟順をオーバーライドする。これを指定すると、強制的に兄弟要素の中でその順番になるように表示される。
nth-系には影響しない。5. visibility
display: noneと違って、表示したくないけれど領域は確保したいという場合に使える。6. z-index
要素の描画順を設定するプロパティ。
position: fixed;と使うことが多い。7. clip-path
要素の見かけの外形を設定するプロパティ。うまく使えばCSSだけでいろんな表現が可能に。
8. will-change
要素のCSSプロパティがアニメーションで変化することをあらかじめブラウザに知らせる。パフォーマンス爆上がり。
9. transform
要素を移動、回転、拡縮、変形させるプロパティ。ちょっと場所がずれるときとか、アニメーションで動かしたいときに便利。
10. :root
root疑似クラス。document.documentElementを指し示すセレクタ。カスタムプロパティと組み合わせると応用範囲は無限大。メディアクエリと組み合わせるとモバイルビュー判定にも使える。
@media screen and (max-width: 960px) { :root { --is-mobile: yes; } } @media screen and (min-width: 961px) { :root { --is-mobile: no; } }11. transform-origin
transformプロパティの基準になる点を指定するプロパティ。ローディング画面のスピナなどを作るときなど、意外と使える場面が多い。
12. position: relative
position: absoluteが親要素を基準とした位置取りにならない！？って思ったときは大概こいつの設定忘れが原因。これが設定された要素の子要素にposition: absoluteが指定された場合、これが設定された要素を基準とした位置取りになる。13. appearance: none
デフォルトの見た目をなくすプロパティ。input要素に独自のスタイルを当てたいときなど、これを設定するとうまくいくことが多い。
14. box-shadow
要素が落とす影を設定するプロパティ。背景が設定されていない要素につけると違和感マシマシ。そういうインラインなテキスト要素に影をつけたい場合は、
text-shadowプロパティを使うこと。15. background-clip
きれいなタイトル文字の修飾をしたいときに。ヘッディング要素の
background-imageプロパティに適当な画像を設定して、このプロパティの値をtextにすると、背景が文字の形で切り抜かれる。16. background-attachment: fixed
要素内のコンテンツが動いても、背景を動かしたくない場合に使う。サイトの背景に設定するといい感じになるかも。
17. border-radius
要素を角丸にできる。もはや説明不要。
18. :not
セレクタにマッチしない要素にマッチする。例えば、
:not(.not-select)というセレクタは、not-selectクラスを持たない要素にマッチする。19. :first-child, :last-child, :nth-child, :nth-last-child
指定された順番にある兄弟要素にマッチする疑似クラス。
20. :first-of-type, :last-of-type, :nth-of-type, nth-last-of-type
指定された順番にある同じタグ(spanどうし、divどうしなど)の兄弟要素にマッチする疑似クラス。
21. :required
required属性のあるformパーツにマッチする。
22. :invalid
入力された値が要求された形式に従っていないformパーツにマッチする。
23. outline
borderの外側に描画されるborderみたいなやつ。borderと違って、それ専用に場所が確保されない。
24. attr()
print画面でだけ
::after疑似要素にurlを表示したいときなど、CSSのプロパティに特定のHTML属性を設定したいときに使用する。25. user-select
ユーザーが要素を選択可能かどうかを設定する。spanにclickイベントを設定したときなど、選択されるのが鬱陶しかったり、要素を選択してほしくないときに使う。
26. pointer-events
要素のどこがマウスイベントをキャプチャするか指定するプロパティ。オーバーレイなど、ほかの要素より前に出るがマウスイベントをキャプチャしたくない要素には
noneを設定すると吉。27. cursor
要素の上に乗ったカーソルの表示の種類を設定する。ユーザビリティが上がるらしい。
28. :checked
チェックが入っているチェックボックスにマッチする。うまく活用するとHTML/CSSだけで開閉するメニューなどの2つの状態を持つUIが記述できる。
29. display: flex
要素をflexboxにする。子要素の数によって、自動でいい感じに配置を決めてくれる。すごく便利。ついつい多用しがち。
30. justify-content
要素の配置を決めるプロパティ。上の
display: flexと組み合わせて使うことが多い。31. flex-flow
flexboxで、要素を配置する向きを決める。
32. flex
flexboxの子要素に指定するプロパティ。flex-grow、flex-shrink、flex-basisの3つを一気に指定できる。flex-growは要素がコンテナより小さいときにどれくらい大きくするか、flex-shrinkは逆に要素がコンテナより大きいときにどれくらい小さくするか、flex-basisは要素がコンテナの中でどれくらいの初期サイズを持っているのかを指定する。
そこまで使うわけでもないけど知っていたら便利なもの
33. position: sticky
これを設定された要素が親要素の中でrelative + fixedのような振る舞いをするようになる。Qiitaのいいねボタンやストックボタンのスマホ版みたいな振る舞いがこれ(とtop, bottom, right, leftプロパティのどれか1つ以上)だけで記述可能。
34. text-indent
行頭字下げをするプロパティ。パラグラフの先頭で字下げしたいときに有効。
35. ::first-letter
ある要素の中で、最初の文字にマッチする疑似要素。パラグラフの最初の文字だけ大きくするような表現に使える。
36. ::select
ある要素の中で、現在選択されているものにマッチする疑似要素。選択部分の強調などに使える。
37. ::target
urlのターゲットになっている要素にマッチする。ページ内リンクで飛んだ先の要素を強調するのに使える。
38. perspective
transformと組み合わせて使う。遠近法をどの程度かけるか指定するプロパティ。
39. transform-style: preserve-3d
これを三次元の移動回転変形を指定したtransformプロパティを持つ要素の親に指定することで、3次元的な描写を可能にすることができる。
40. filter
要素に指定したSVGフィルタをかける。
::beforeに指定して背景をぼかしたり、グレイスケール化したり、いろいろな視覚効果を追加することができる。41. ::marker
::marker
リストのマーカーにマッチする疑似要素。
- ←これがリストのマーカー。
42. ::placeholder
formパーツ要素のplaceholderにマッチする。placeholderの色やフォントなどを変えたいときに便利。
43. :defined
任意のCustomElementにマッチする。
44. quotes
<q>～</q>のタグを使ったときに表示される引用符を制御できる。それ以外のタグの場合も、以下のようにして利用できる。blockquote { quotes: "「" "」"; } blockquote::before { content: open-quote; } blockquote::after { content: close-quote; }より正確な動作の説明としては「
open-quoteとclose-quoteの値を制御する」ということになる。45. text-overflow
文字がコンテナのサイズを超過したときの処理を設定する。
...のような記号で省略したり、それ以外の文字で省略したり、あるいはそれ以上を表示しなかったりするような表現が可能。46. writing-mode
文字を縦書きにするか横書きにするか設定できる。サイトの種類によっては多用することもあるかも。
47. text-orientation
writing-modeをvertical-rlまたはvertical-lrにしたときに、文字をどの向きで配置するか設定する。48. clear
浮動要素のまわりの固定要素の配置(回り込み)を指定する。浮動要素しか含まないような要素の高さを維持するために使うこともできる。
.float-only::after { content: ""; display: block; clear: both; }49. all
すべてのプロパティを一気に設定できる。親要素からすべてのスタイルを継承したいときや、逆に継承したくないとき、デフォルトの見た目にしたいときに使える。
50. touch-action
要素に対して可能なタッチアクションの種類を制限できる。たとえば、ズームしてほしくないとか、縦方向のスクロールを制限したいとかそういう場合に便利。Cookie Clickerのタッチ領域にこれを指定してほしいと何度思ったことか。
まとめ
CSS難しい……。MDNの解説ってプロパティごとに内容の質にけっこうばらつきが大きいんですね。
参考
Happy Hacking!
