【初心者向け】CSSのプロパティ一覧を覚えておきたい重要度別に分けてみた

#どうも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制作のちょいテク詰め合わせ