本記事のゴール
数あるCSSプロパティの中で、よく使われるものを習得する。
CSSでどんなことができるのか、ざっくりと理解する。
CSSの基本的な書き方に関してはこちらの記事を参照してください。
Contents
CSSプロパティとは
CSSプロパティはセレクタで指定された部分の何を変えるのかを書きます。
CSSは「どの部分の、何を、どうするのか」の三段階で記述し、その「何を」に相当するのがプロパティです。
図の例で説明すると、「HTMLのbodyタグの、背景色を、黒にする」となり、「背景色を」の部分が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の機能を適応させるためのもので、非常に簡単にレイアウトを整えることができます。詳しくは以下の記事を参考にしてみてください。
また、gridという文字がついているプロパティもレイアウトを整えるための機能であるCSSグリッドの一環で、それについてはこちらの記事で詳しく解説しています。
CSSプロパティ・まとめ
よく使われるCSSプロパティを列挙しました。この記事に登場するCSSプロパティは基本中の基本なので、「どんなプロパティでどんな値が指定できるか」をある程度分かるようにまとめました。
辞書的な感じで、忘れた時にふと見るといいですよ
