【一覧】使用頻度の高いCSSプロパティ!

CSSプロパティ一覧

スポンサーリンク
本記事のゴール

数あるCSSプロパティの中で、よく使われるものを習得する。
CSSでどんなことができるのか、ざっくりと理解する。

CSSの基本的な書き方に関してはこちらの記事を参照してください。

https://doku-pro.com/?p=162

CSSプロパティとは

CSSプロパティはセレクタで指定された部分の何を変えるのかを書きます。
CSSは「どの部分の、何を、どうするのか」の三段階で記述し、その「何を」に相当するのがプロパティです。

図の例で説明すると、「HTMLのbodyタグの、背景色を、黒にする」となり、「背景色を」の部分がCSSプロパティになります。

プロパティにはあらゆる種類があり、その豊富さゆえに、ウェブサイトを美しく仕上げることができるのです。

cssプロパティ
CSSの書き方のルール

CSSプロパティの種類

CSSでできることは主に以下の5つです。

  • 文字や文章の装飾
  • 背景の装飾
  • 幅・高さ・余白を指定する
  • 線を装飾する
  • レイアウトを組む

それぞれの指定方法と効果を見ていきましょう。

文字・文章を装飾するCSSプロパティ

プロパティ 用途
font-size 文字のサイズを指定する 100px,100rem, x-large, smallなどといった、数値での指定方法とキーワードでの指定方法が有る
font-family フォントの種類を指定 フォントの名前を記述する
font-weight 文字の太さを指定 1~1000までの任意の数字もしくはnormal, bold(太字), lighter(一段細く)などのキーワード
line-height 行の高さを指定 normalでブラウザの判断、単位なしの数値:フォントサイズとの比率、単位ありの数値:px, em, %で指定
text-align テキストをそろえる位置を指定 left・・・左揃え、right・・・右揃え、center・・・中央揃え、justify・・・両端揃え
text-decolation テキストを装飾する none・・・飾りなし、underline・・・下線、overline・・・上線、line-through・・・打ち消し線、blink・・・点滅
letter-spacing 文字の間隔を指定 normal・・・標準のスペース、数値で指定する場合はpx,rem,%で指定。
color 文字に色を付ける カラーネーム、カラーコード、rgb値で指定する
font フォントに関するプロパティをまとめて指定 font-style, font-variant, font-weight, font-size, line-height, font-familyの値をまとめて指定できる
list-style-type リストマーカーの種類を指定 none・・・リストマーカーを消す、disc・・・黒丸、circle・・・白丸、aquare・・・黒四角、decimal・・・数字、decimal-leading-zero・・・0を含んだ数字、などなど
list-style-position リストマーカーの表示位置を指定 outside・・・ボックスの外側に表示, inside・・・ボックスの内側に表示
list-style-image リストマーカーに使う画像を指定 url・・・画像ファイルのURLを指定、none・・・指定しない
list-style リストマーカーの種類、位置、画像をまとめて指定 list-style-type, list-style-position, list-style-imageをまとめて指定

背景の装飾に関するCSSプロパティ

プロパティ 用途
background-color 背景色を指定 #で始まる6桁のカラーコード、色の名前、もしくはRGB値で指定
background-image 背景画像を指定 url(‘ここにURLを入力’)で背景画像を挿入。noneで指定しない
background-repeat 背景画像を繰り返す場合、方向を指定 repeatで縦、横に繰り返しで表示する。repeat-xで横方向に繰り返す。repeat-yで縦方向に繰り返して表示する。no-repeatで繰り返しなし
background-size 背景画像の大きさを指定 px, rem, %で数値を指定。coverで要素全体を覆うように配置される。containだと要素の中に画像が収まるように配置される
background-position 背景画像の表示位置を指定 px, rem, %で数値を指定できる。また、left(左)、right(右)、top(上)、center(中央)、bottom(下)などのキーワードでも指定できる
background 背景に関するプロパティをまとめて指定 上の5つのプロパティに関する値をまとめて指定できる

幅と高さ、余白に関するCSSプロパティ

プロパティ 用途
width 要素の幅を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
height 要素の高さを指定 px, rem, %などの数値で指定。autoとすると自動で設定される
margin 要素の外側の余白を指定。半角スペース区切りで上・右・下・左の順で指定 px, rem, %などの数値で指定。autoとすると自動で設定される
margin-top 要素の外側の上の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
margin-right 要素の外側の右の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
margin-bottom 要素の外側の下の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
margin-left 要素の外側の左の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
padding 要素の内側の余白を指定。半角スペース区切りで上・右・下・左の順で指定 px, rem, %などの数値で指定。autoとすると自動で設定される
padding-top 要素の内側の上の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
padding-right 要素の内側の右の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
padding-bottom 要素の内側の下の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される
padding-left 要素の内側の左の部分の余白を指定 px, rem, %などの数値で指定。autoとすると自動で設定される

padding(パディング)、margin(マージン)に関するもっと詳しい記事はこちらです。

境界線に関するCSSプロパティ

プロパティ 用途
border-width 線の太さを指定 px, rem, %などの数値で指定。また、thin(細い線), medium(普通), thick(太い線)などのキーワードでも指定できる
border-style 線の種類を指定 none・・・線を非表示、solid・・・一本の実線、double・・・日本の実線、dashed・・・破線、dotted・・・点線 etc
border-color 線の色を指定 カラーコード、もしくは色の名前
border 上の三つのプロパティをまとめて指定 border-width, border-style, border-colorの値を半角スペース開けて指定
border-top 要素上部に関してまとめて指定 border-width, border-style, border-colorの値を半角スペース開けて指定
border-right 要素右部に関してまとめて指定 border-width, border-style, border-colorの値を半角スペース開けて指定
border-bottom 要素下部に関してまとめて指定 border-width, border-style, border-colorの値を半角スペース開けて指定
border-left 要素左部に関してまとめて指定 border-width, border-style, border-colorの値を半角スペース開けて指定

レイアウトに関するCSSプロパティ

プロパティ 用途
display 要素のタイプを指定 block, inline, inline-block, flex, gridなど
flex-direction 子要素の並ぶ向きを指定 row(デフォルト)・・・子要素を左から右に配置、row-reverse・・・子要素を右から左に配置、column・・・子要素を上から下に配置、column-reverse・・・子要素を下から上に配置
flex-wrap 子要素の折り返し方を指定 nowrap(デフォルト)・・・折り返しは無い、wrap・・・子要素を折り返して、複数行に配置、wrap-reverse・・・子要素をしたから上に折り返して複数行に配置
justify-content 水平方向の揃えを指定 flex-start(デフォルト)・・・左から順次配置、flex-end・・・行末から右揃えで配置、center・・・中央揃え、space-between・・・最初と最後の子要素を両端に配置し、残りはその間に均等間隔で配置、space-around・・・すべての子要素を均等間隔で配置
align-items 垂直方向の揃えを指定 stretch(デフォルト)・・・親要素の高さ、もしくはコンテンツの一番多い子要素の高さに合わせて配置、flex-start・・・親要素の開始位置から上揃えで配置、flex-end・・・flex-startの逆、center・・・中央揃え、baseline・・・ベースラインでそろえる
align-content 複数行にしたときの揃えを指定 stretch(デフォルト)・・・親要素の高さに合わせて広がる、flex-start・・・親要素の開始位置から上揃えで配置、flex-end・・・flex-startの逆、center・・・中央揃え、space-between・・・最初と最後の子要素を上下の端に配置し、残りは均等に間隔をあけて配置、space-around・・・すべての子要素を均等間隔で配置
grid-template-columns 子要素の幅を指定(グリッドを使うとき) px, rem, %, frなどの数値で指定
grid-template-rows 子要素の高さを指定(グリッドを使うとき) px, rem, %, frなどの数値で指定
grid-gap 子要素同士の余白を指定(グリッドを使うとき) px, rem, %, frなどの数値で指定

flexという値がついたプロパティは、FlexboxというCSSの機能を適応させるためのもので、非常に簡単にレイアウトを整えることができます。詳しくは以下の記事を参考にしてみてください。

スポンサーリンク
https://doku-pro.com/?p=265

また、gridという文字がついているプロパティもレイアウトを整えるための機能であるCSSグリッドの一環で、それについてはこちらの記事で詳しく解説しています。

https://doku-pro.com/?p=294

CSSプロパティ・まとめ

よく使われるCSSプロパティを列挙しました。この記事に登場するCSSプロパティは基本中の基本なので、「どんなプロパティでどんな値が指定できるか」をある程度分かるようにまとめました。

辞書的な感じで、忘れた時にふと見るといいですよ

スポンサーリンク