どうも7noteです。大量にあるCSSプロパティに、覚えておきたい優先順位を付けてみました。
↓関連記事↓
前回HTMLのタグを覚えて置きたい順で勝手に重要度を振ってみたのですが思いのほか需要があったようなので、CSSもやってみました。
そして気になるCSSのプロパティの数ですが、なんと＼ 249個 ／。
※https://weblan3.com/css/css_property#css_property_purpose より算出。
いや多すぎでしょ。今度こそどう頑張っても覚えられんわ。
ということで、今回も個人的に重要だなと思う順で、覚える優先順位をつけてみました。
※あくまで主観です。ご了承ください。
※CSS3のタグも交えて解説しています。
重要度★★★「絶対に覚えておいたほうがいいCSS」
「フォント・文字色」
color・・・ 文字の色を指定するfont・・・ 文字フォントに関する指定をまとめて行うfont-family・・・ 文字フォントファミリー（フォントの種類）を指定するfont-size・・・ 文字フォントのサイズ（大きさ）を指定するfont-style・・・ 文字フォントを斜体で表示するfont-weight・・・ 文字フォントの太さを指定する
「テキスト関連」
text-align・・・ 内包する要素に対して横位置の揃え方を指定するtext-decoration・・・ 文字列に装飾線や点滅を指定するtext-indent・・・ 文章のインデント幅を指定する
「文字揃え・段落の振る舞い」
letter-spacing・・・ 文字の間隔を指定するline-height・・・ 行の高さを指定する
「要素の横幅や高さ」
height・・・ 要素の高さを指定するwidth・・・ ボックス領域の幅を指定するmax-height・・・ 要素の高さの最大値を指定するmax-width・・・ 要素の幅の最大値を指定するmin-height・・・ 要素の高さの最小値を指定するmin-width・・・ 要素の幅の最小値を指定する
「余白の指定」
margin・・・ 要素の外側の余白（マージン）を指定するmargin-bottom・・・ 要素の底辺に当たる外側の余白（マージン）を指定するmargin-left・・・ 要素の左辺に当たる外側の余白（マージン）を指定するmargin-right・・・ 要素の右辺に当たる外側の余白（マージン）を指定するmargin-top・・・ 要素の上辺に当たる外側の余白（マージン）を指定するpadding・・・ 要素の内側の余白を指定するpadding-bottom・・・ 要素の内側の底辺側に当たる余白を指定するpadding-left・・・ 要素の内側の左辺側に当たる余白を指定するpadding-right・・・ 要素の内側の右辺側に当たる余白を指定するpadding-top・・・ 要素の内側の上辺側に当たる余白を指定する
「要素の表示や配置方法」
bottom・・・ positionに従って要素を配置する際に、底辺からの距離を指定するclear・・・ 要素の回り込み（float）を解除するdisplay・・・ 要素の表示形式を指定するfloat・・・ 要素を右または左へ寄せて配置するleft・・・ positionに従って要素を配置する際に、左辺からの距離を指定するoverflow・・・ 要素からはみ出した内容の表示方法をまとめて指定するoverflow-x・・・ 要素からはみ出した内容の水平方向の表示方法を指定するoverflow-y・・・ 要素からはみ出した内容の垂直方向の表示方法を指定するposition・・・ 要素の配置方法について相対的か絶対的にするかを指定するright・・・ positionに従って要素を配置する際に、右辺からの距離を指定するvertical-align・・・ ボックス内のインライン要素に縦位置を揃える基準を指定するvisibility・・・ 要素の領域を残したまま表示・非表示を指定するz-index・・・ 要素の重なり順序を指定する
「背景（バックグラウンド）」
background・・・ 背景に関する指定をまとめて行うbackground-color・・・ 背景色を指定するbackground-image・・・ 背景画像を指定するbackground-position・・・ 背景画像の表示開始位置を指定するbackground-repeat・・・ 背景画像の繰り返しを指定するbackground-size・・・ 背景画像を表示するサイズ（大きさ）を指定する
「外枠（ボーダー・アウトライン）」
border・・・ 要素の周囲にボーダー（枠線）を付けるborder-bottom・・・ 要素の底辺にボーダー（枠線）を付けるborder-left・・・ 要素の左辺にボーダー（枠線）を付けるborder-radius・・・ 要素の角丸についてまとめて指定するborder-right・・・ 要素の右辺にボーダー（枠線）を付けるborder-style・・・ ボーダー（枠線）の種類を指定するborder-top・・・ 要素の上辺にボーダー（枠線）を付ける
「カラム・レイアウト関連」
align-items・・・ flexコンテナ内に含まれる全てのflexアイテムに対して揃える位置を指定するflex・・・ flexbox内のアイテムの伸縮に関する指定をまとめて行うflex-direction・・・ flexbox内のアイテムの並び順を指定するflex-wrap・・・ flexboxに入り切らないアイテムの折り返し方法について指定するjustify-content・・・ flexboxコンテナ内でのボックスの詰め方を指定する
「リスト（list）関連」
list-style・・・ リストマーカーに関する指定をまとめて行う
「内容の挿入・置換」
content・・・ 内容（コンテンツ）を挿入する
「アニメーション」
animation・・・ アニメーションに関する指定をまとめて行う
「トランジション」
transition・・・ 時間によって変化するトランジション効果の遷移についてまとめて指定する
「影（シャドウ）の指定」
box-shadow・・・ ボックスに影をつけるtext-shadow・・・ 文字に影（ドロップシャドウ）を付ける
「変形・トランスフォーム」
transform・・・ 要素を変形させる
重要度★★「使う機会のあるCSS」
「テキスト関連」
text-overflow・・・ 要素からはみ出した文字を省略する
「文字揃え・段落の振る舞い」
white-space・・・ テキスト内の空白、タブ、改行の表示の仕方を指定するword-break・・・ 文章の改行の仕方について指定するwriting-mode・・・ 文字表記の方向（縦横）を指定する
「背景（バックグラウンド）」
background-attachment・・・ 背景画像の固定・移動を指定する
「外枠（ボーダー・アウトライン）」
border-bottom-color・・・ 要素の底辺に設定したボーダー（枠線）の色を指定するborder-bottom-left-radius・・・ 要素の左下の角丸を指定するborder-bottom-right-radius・・・ 要素の右下の角丸を指定するborder-bottom-style・・・ 要素の底辺に設定したボーダー（枠線）のスタイル（種類）を指定するborder-bottom-width・・・ 要素の底辺に設定したボーダー（枠線）の太さを指定するborder-color・・・ 要素のボーダー（枠線）の色を指定するborder-image・・・ 要素のボーダー（枠線）に画像を指定するborder-left-color・・・ 要素の左辺に設定したボーダー（枠線）の色を指定するborder-left-style・・・ 要素の左辺に設定したボーダー（枠線）のスタイル（種類）を指定するborder-left-width・・・ 要素の左辺に設定したボーダー（枠線）の太さを指定するborder-right-color・・・ 要素の右辺に設定したボーダー（枠線）の色を指定するborder-right-style・・・ 要素の右辺に設定したボーダー（枠線）のスタイル（種類）を指定するborder-right-width・・・ 要素の右辺に設定したボーダー（枠線）の太さを指定するborder-top-color・・・ 要素の上辺に設定したボーダー（枠線）の色を指定するborder-top-left-radius・・・ 要素の左上の角丸を指定するborder-top-right-radius・・・ 要素の右上の角丸を指定するborder-top-style・・・ 要素の上辺に設定したボーダー（枠線）のスタイル（種類）を指定するborder-top-width・・・ 要素の上辺に設定したボーダー（枠線）の太さを指定するborder-width・・・ ボーダー（枠線）の太さを指定するoutline・・・ アウトラインの表示方法をまとめて指定する
「カラム・レイアウト関連」
align-content・・・ flexコンテナ内の縦に余白がある場合にflexアイテムの並べ方を指定するcolumns・・・ カラム幅とカラム数を指定するflex-basis・・・ flexbox内のアイテムの固定幅を指定するflex-flow・・・ flexbox内のアイテムの並び順と折り返しの指定をまとめて行うflex-grow・・・ flexbox内のアイテムの伸びる倍率を指定するflex-shrink・・・ flexbox内のアイテムの縮む倍率を指定するorder・・・ flexbox内のボックスの配置順序を指定する
「内容の挿入・置換」
counter-increment・・・ contentで挿入されたカウンタの値を進めるcounter-reset・・・ contentで挿入されたカウンタの値をリセットする
「アニメーション」
animation-delay・・・ アニメーションが開始するタイミングを指定するanimation-direction・・・ アニメーションの再生方向を指定するanimation-duration・・・ アニメーションの再生一回分の時間の長さを指定するanimation-fill-mode・・・ アニメーションが再生されていない時にどのような状態で待機するかを指定するanimation-iteration-count・・・ アニメーションの繰り返し回数を指定するanimation-name・・・ アニメーションの名前を定義するanimation-play-state・・・ アニメーションを再生させるか一時停止させるか指定するanimation-timing-function・・・ アニメーションの再生タイミングに変化を付ける
「トランジション」
transition-delay・・・ 時間によって変化するトランジション効果の要求が発生してから実際に開始するまでの時間を指定するtransition-duration・・・ 時間によって変化するトランジション効果が開始してから終了するまでの時間を指定するtransition-property・・・ 時間によって変化するトランジション効果の対象となるプロパティを指定するtransition-timing-function・・・ 時間によって変化するトランジション効果の変化に緩急を指定する
「変形・トランスフォーム」
transform-origin・・・ 要素を変形させる際の基準点を指定するtransform-style・・・ 要素を変形させる際の基準点を指定する
重要度★「使うかもしれないレベルのCSS」
※IE非対応のものも含まれています。
「フォント・文字色」
font-feature-settings・・・ OpenTypeフォント機能の利用について、有効/無効を指定するfont-kerning・・・ 欧文フォントにカーニングを適用するfont-stretch・・・ 文字フォントの横幅の広さを指定するfont-variant・・・ 文字フォントの表示に関するサブプロパティの値をまとめて指定するfont-variant-caps・・・ スモールキャップス（small caps）などの、文字フォントのグリフ（字形）を指定するfont-variant-ligatures・・・ 隣り合った文字フォントの合字（リガチャ）を指定するfont-variant-numeric・・・ 数字の表示形式を指定する
「テキスト関連」
text-decoration-color・・・ 文字の装飾線の色を指定するtext-decoration-line・・・ 文字の装飾線の位置を指定するtext-decoration-style・・・ 文字の装飾線の種類を指定するtext-emphasis・・・ 要素内のテキストに付与する強調マークに関する指定を行うtext-emphasis-color・・・ 要素内のテキストに付与する強調マークの色を指定するtext-emphasis-position・・・ 要素内のテキストに付与する強調マークの位置を指定するtext-emphasis-style・・・ 要素内のテキストに強調マークを付与するtext-transform・・・ テキストの大文字表示・小文字表示を指定する
「文字揃え・段落の振る舞い」
direction・・・ 文字表記の方向（左右）を指定するline-break・・・ 要素内での行末や行頭の禁則処理の厳密さを指定するunicode-bidi・・・ 文字表記の方向（左右）を指定するword-spacing・・・ 単語の間隔を指定する
「ルビ関連」
ruby-position・・・ ルビの位置を指定する
「要素の表示や配置方法」
clip・・・ ボックスを切り抜き表示（クリッピング）するoverflow-wrap・・・ 長い単語の折り返し方法について指定する
「背景（バックグラウンド）」
background-clip・・・ 背景の描画範囲を指定するbackground-origin・・・ 背景の描画する際の基準となるボックスを指定する
「外枠（ボーダー・アウトライン）」
border-image-outset・・・ ボーダーイメージエリアを広げるborder-image-repeat・・・ ボーダー（枠線）に指定された画像の繰り返し方法を指定するborder-image-slice・・・ ボーダー（枠線）に指定された画像の使用範囲を指定するborder-image-source・・・ ボーダー（枠線）に使用する画像ファイルを指定するborder-image-width・・・ 画像ボーダーの太さを指定するoutline-color・・・ アウトラインの色を指定するoutline-offset・・・ アウトラインのオフセット値を指定するoutline-style・・・ アウトラインのスタイルを指定するoutline-width・・・ アウトラインの太さを指定する
「カラム・レイアウト関連」
align-self・・・ flexコンテナ内にあるflexアイテムの位置揃えを個別に指定するcolumn-count・・・ カラム数を指定するcolumn-fill・・・ カラム同士の高さ（長さ）を揃えるかどうかを指定するcolumn-rule・・・ カラムの区切り線のスタイル・幅・色を指定するcolumn-rule-color・・・ カラムの区切り線の色を指定するcolumn-rule-style・・・ カラムの区切り線のスタイルを指定するcolumn-rule-width・・・ カラムの区切り線の幅を指定するcolumn-width・・・ カラム幅を指定する
「リスト（list）関連」
list-style-image・・・ リストマーカーに画像を指定するlist-style-position・・・ リストマーカーの表示位置を指定するlist-style-type・・・ リストマーカーの種類を指定する
「テーブル（table）関連」
border-collapse・・・ テーブルセルのボーダーの表示の仕方を指定するborder-spacing・・・ テーブルセルのボーダーの間隔を指定するcaption-side・・・ テーブル（表）のキャプションの位置を指定するempty-cells・・・ 空白セルのボーダーの表示・非表示を指定するtable-layout・・・ テーブルを描画する際のレンダリングアルゴリズムを指定する
「内容の挿入・置換」
quotes・・・ contentプロパティで挿入する引用符の表示方法を設定する
「変形・トランスフォーム」
backface-visibility・・・ 要素の裏面を見られるようにするかどうかを指定するperspective・・・ 子要素に対して遠近効果を指定するperspective-origin・・・ perspectiveで指定した遠近投影の基点となる位置を指定する
重要度ゼロ「非対応ブラウザがあるなど、実用的でない」
「フォント・文字色」
font-language-override・・・ 表示する文字フォントの言語を部分的に変更するfont-size-adjust・・・ 文字フォントの種類の違いによるサイズのバラつきを調整するfont-synthesis・・・ 太字や斜体を持たないフォントファミリーの場合に、太字や斜体で表示するかどうかを指定するfont-variant-alternates・・・ 文字フォントの代替グリフ（字形）の選定を制御するfont-variant-east-asian・・・ 表示する文字フォントのグリフ（字形）の指定を行うfont-variant-position・・・ 上付き文字、下付き文字を指定する
「テキスト関連」
text-align-last・・・ 内包する要素の最終行に対して横位置の揃え方を指定するtext-autospace・・・ アルファベット等との間隔を指定text-combine-horizontal・・・ 文字を縦書き表示にした際に縦中横のレイアウトにするtext-combine-mode・・・ 縦書き表示で縦中横のレイアウトにした文字の表示方法を指定するtext-decoration-skip・・・ 文字の装飾線について除外する対象を指定するtext-height・・・ テキストの高さを指定するtext-justify・・・ 行の両端揃えの方法を指定するtext-orientation・・・ 縦書き文章の文字の表示方向に関して指定するtext-underline-position・・・ テキストのアンダーラインの位置を指定する
「文字揃え・段落の振る舞い」
baseline-shift・・・ 優先するベースラインを指定し直すdrop-initial-after-adjust・・・ 頭文字の第一接続点の揃え位置を指定するdrop-initial-after-align・・・ 頭文字の第一接続点の揃えラインを指定するdrop-initial-before-adjust・・・ 頭文字の第二接続点の揃え位置を指定するdrop-initial-before-align・・・ 頭文字の第二接続点の揃えラインを指定するdrop-initial-size・・・ 頭文字のサイズを指定するdrop-initial-value・・・ 頭文字を何行分にするかを指定するline-stacking・・・ 行ボックスに関する指定をまとめて行うline-stacking-ruby・・・ 行ボックスを重ねる際のルビの扱いを指定するline-stacking-shift・・・ 文字のベースラインを考慮するかどうかを指定するword-wrap・・・ 単語の途中における改行処理の仕方を指定する
「リンク・ブックマーク」
bookmark-label・・・ ブックマークのラベル（名前）を指定するbookmark-level・・・ ブックマークのレベル（度合い）を指定するbookmark-target・・・ ブックマークのターゲット（対象）を指定するtarget・・・ リンクターゲットに関するプロパティをまとめて指定するtarget-name・・・ リンク先を開いたときに表示する場所を指定するtarget-new・・・ リンク先を新規ウィンドウ、または新規タブで開くtarget-position・・・ リンク先を開く新規ウィンドウ、または新規タブの位置を指定する
「ルビ関連」
ruby-align・・・ ルビまたは本体の揃え方を指定するruby-overhang・・・ ルビが長い時に、対象文字に含まれない前後の文字の配置方法を指定するruby-span・・・ ルビがかかる本体の要素数を指定する
「要素の表示や配置方法」
alignment-adjust・・・ 要素の水平位置を揃える基準を指定するalignment-baseline・・・ 要素の水平位置を揃える際に親要素との相対関係に基いて指定するoverflow-style・・・ 要素からはみ出した内容の表示スタイルを指定するzoom・・・ 要素の表示倍率（拡大・縮小）を指定する
「背景（バックグラウンド）」
background-break・・・ インライン要素の背景画像の繰り返し方法を指定する
「外枠（ボーダー・アウトライン）」
border-break・・・ ボックスが分割された場合のボーダーの表示方法を指定するborder-length・・・ 脚注の区切り線の長さを指定する
「カラム・レイアウト関連」
box-align・・・ 親要素内に含まれる子要素を揃える水平位置の基準を指定するbox-decoration-break・・・ ボックスがページ区切りや折り返しになった場合に断片の表示方法を指定するbox-direction・・・ 親ボックス内に配置する子要素の表示方向を指定するbox-flex・・・ flexboxコンテナの伸縮比率を指定するbox-flex-group・・・ flexboxコンテナにグループを割り当てて伸縮の優先順位を指定するcolumn-gap・・・ カラムの間隔を指定するcolumn-span・・・ 要素がまたがる（横切る）カラム数を指定する
「リスト（list）関連」
marker-offset・・・ リストマーカーとの間隔を指定する
「内容の挿入・置換」
crop・・・ 置換要素の表示範囲を指定するpage-policy・・・ ページごとの章や節、セクション等の番号のカウント方法や名前の割り当て方を指定する
「マーキー（marquee）」
marquee-direction・・・ マーキーのスクロール方向を指定するmarquee-play-count・・・ マーキーのスクロール再生回数を指定するmarquee-speed・・・ マーキーのスクロールスピードを指定するmove-to・・・ 要素をフローから削除し、ドキュメントの後の時点で再挿入する
「音声読み上げ」
cue・・・ 要素の前後の合図音を指定するcue-after・・・ 要素の後の合図音を指定するcue-before・・・ 要素の前の合図音を指定するpause・・・ 要素の前後で音声を一時停止するpause-after・・・ 要素の後ろで音声を一時停止するpause-before・・・ 要素の前で音声を一時停止するrest・・・ 音声読み上げの要素の間を指定するrest-after・・・ 音声読み上げの要素の前の間を指定するrest-before・・・ 音声読み上げの要素の後の間を指定するspeak・・・ 音声出力の読上げ有無について指定するspeak-as・・・ 音声出力の読上げ方法について指定するvoice-balance・・・ 音声の左右の出力バランスを指定するvoice-duration・・・ 音声読み上げシステムが要素の内容を読み上げるまでにかける時間を指定するvoice-family・・・ 音声読み上げシステムで出力される音声の種類を指定するvoice-pitch・・・ 音声読み上げシステムで出力される音声の高さ（ピッチ）を指定するvoice-range・・・ 音声読み上げシステムで出力される音声の高さ（ピッチ）の範囲を指定するvoice-rate・・・ 音声読み上げシステムで出力される音声の速度を指定するvoice-stress・・・ 音声読み上げシステムで出力される音声の強調を指定するvoice-volume・・・ 音声読み上げシステムで出力される音声の音量を指定する
「スクロールバー」
scrollbar-base-color・・・ スクロールバーのベースになる色を指定するscrollbar-arrow-color・・・ スクロールバーの矢印にあたる色を指定するscrollbar-face-color・・・ スクロールバーの表面にあたる色を指定するscrollbar-3dlight-color・・・ スクロールバーの左端と上端にあたる色を指定するscrollbar-highlight-color・・・ スクロールバーのハイライトにあたる色を指定するscrollbar-shadow-color・・・ スクロールバーの影にあたる色を指定するscrollbar-darkshadow-color・・・ スクロールバーの右端と下端にあたる色を指定する
まとめ
CSSは作成するwebサイトによって必要になるプロパティも大きく変わってきます。
ただ★★★のものは使用する場面が多いので覚えておくと便利です。
重要度★や重要度ゼロは私自身も使ったことのないものが多くあるので、「これ便利だよ」「こういうときに使うよ」などがあればぜひコメントで共有してもらえると嬉しいです。
解説テキストの引用元：https://weblan3.com/css/css_property#css_property_purpose
【フロントエンド強化月間に参加中↓↓】
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ