今回は、Webページの見た目を設定するCSSのセレクターについてまとめました。
CSSは、Web開発をするにあたって欠かせない知識となっています。
ぜひ最後までお読みください！
【CSS】基本のまとめ | プロパティ編
1. CSSとは
CSSとは、HTMLドキュメントのスタイル(文字・色・大きさ・余白など)を設定するために使用される言語のことです。
正式名称は「Cascading Style Sheets(カスケーディング・スタイル・シート)」といいます。
2. CSSの書き方
CSSでは、「どこの」「何を」「どうする」かを指定します。
例えば、以下のように記述します。
【例：style.css】
このコードでは、「h1要素の」「文字色を」「赤に変更」しています。
このコードのh1の部分を「セレクター」、colorの部分を「プロパティ」、 redの部分を「値」といいます。
例えば、以下のように記述します。
【例：style.css】
h1 {
color: red;
}
このコードでは、「h1要素の」「文字色を」「赤に変更」しています。
このコードのh1の部分を「セレクター」、colorの部分を「プロパティ」、 redの部分を「値」といいます。
3. よく使われるプロパティ
3-1. 背景色を指定する：background-color
背景色を指定するには、「background-color」プロパティを使用します。
値には「カラーコード」や「カラー名」が入ります。
【例：style.css】
色の指定方法には、以下のようなものがあります。
・カラーコードで指定する：#e6f3ff
・RGBで指定する：rgb(230, 243, 255)
・色で指定する：aliceblue
カラーコードは非常にたくさんあるので、覚える必要は全くありません。
カラー見本や、デザインデータから抽出しましょう。
値には「カラーコード」や「カラー名」が入ります。
【例：style.css】
body {
background-color: pink;
}
色の指定方法
色の指定方法には、以下のようなものがあります。
・カラーコードで指定する：#e6f3ff
・RGBで指定する：rgb(230, 243, 255)
・色で指定する：aliceblue
カラーコードは非常にたくさんあるので、覚える必要は全くありません。
カラー見本や、デザインデータから抽出しましょう。
3-10. 要素の横幅を指定する：width
要素の横幅を指定するには、「width」プロパティを使用します。
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
h1 {
width: 200px;
}3-11. 要素の縦幅を指定する：height
要素の縦幅を指定するには、「height」プロパティを使用します。
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
h1 {
height: 120px;
}3-2. フォントの色を指定する：color
フォント(文字)の色を指定するには、「color」プロパティを使用します。
値には「カラーコード」や「カラー名」が入ります。
【例：style.css】
値には「カラーコード」や「カラー名」が入ります。
【例：style.css】
p {
color: red;
}3-3. フォントのサイズを指定する：font-size
フォント(文字)のサイズ(大きさ)を指定するには、「font-size」プロパティを使用します。
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
p {
font-size: 16px;
}
3-4. フォントの太さを指定する：font-weight
フォント(文字)の太さを指定するには、「font-weight」プロパティを使用します。
値には「bold」などの太さをあらわすキーワードが入ります。
【例：style.css】
・キーワード値
・normal
・bold
・親要素に対して相対的なキーワード値
・lighter
・bolder
・数値のキーワード値
・100~900
・400がnormal
・700がbold
値には「bold」などの太さをあらわすキーワードが入ります。
【例：style.css】
p {
font-weight: bold;
}太さを指定する値
太さを指定する値には、以下のようなものがあります。・キーワード値
・normal
・bold
・親要素に対して相対的なキーワード値
・lighter
・bolder
・数値のキーワード値
・100~900
・400がnormal
・700がbold
3-5. 行の高さを指定する：line-height
行の高さを指定するには、「line-height」プロパティを使用します。
値には「高さをあらわす数値」が入ります。
【例：style.css】
値には「高さをあらわす数値」が入ります。
【例：style.css】
p {
line-height: 1.4;
}
3-6. 枠線を指定する：border
枠線を指定するには、「border」プロパティを使用します。
値には「太さ」「線の種類」「カラーコードやカラー名」が入ります。
【例：style.css】
また、borderは「border-top: 4px solid pink」「border-bottom: 8px solid tomato」のように4辺で異なる値を指定することができます。
・solid：実線
・double：二重線
・dotted：点線(ドット)
・dashed：波線(ダッシュ)
値には「太さ」「線の種類」「カラーコードやカラー名」が入ります。
【例：style.css】
p {
border: 2px solid red; /* 上下左右に2pxで赤色の実線がつく */
}
また、borderは「border-top: 4px solid pink」「border-bottom: 8px solid tomato」のように4辺で異なる値を指定することができます。
線の種類を指定する値
線の種類を指定する値には、以下のようなものがあります。・solid：実線
・double：二重線
・dotted：点線(ドット)
・dashed：波線(ダッシュ)
3-7. 角を丸くする：border-radius
枠線や画像の角を丸くするには、「border-radius」プロパティを使用します。
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
img {
border-radius: 20px; /* 上下左右の角が丸くなる */
}
「border-radius: 20px 10px 8px 16px」のように、4辺で異なる値を指定することもできます。
3-8. 要素の内側の余白を指定する：padding
要素の内側の余白を指定するには、「padding」プロパティを使用します。
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
p {
padding: 8px; /* 要素の内側(上下左右)に8pxの余白がつく */
}
px(ピクセル)以外の単位
px以外の単位には、以下のようなものがあります。
・%：ブラウザなど、他の要素に応じて変化する
・em：親要素を元にした相対値サイズ指定
・rem：ルート要素を元にした相対値サイズ指定
3-9. 要素の外側の余白を指定する：margin
要素の外側の余白を指定するには、「margin」プロパティを使用します。
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
・上下と左右で値が同じ：8px 16px (上下 左右)
・左右の値は同じ：8p 16px 24px (上 左右 下)
・上下左右の値がすべて異なる：8px 16px 24px 32px (上 右 下 左)
値には「px(ピクセル)」などの単位を伴う数値が入ります。
【例：style.css】
p {
margin: 8px; /* 要素の外側(上下左右)に8pxの余白がつく */
}上下左右で異なる値を指定する
上下左右で異なる値を指定するには、以下のようにします。・上下と左右で値が同じ：8px 16px (上下 左右)
・左右の値は同じ：8p 16px 24px (上 左右 下)
・上下左右の値がすべて異なる：8px 16px 24px 32px (上 右 下 左)
4. おわりに
今回は、Webページの見た目を設定するCSSについて解説しました。
CSSは、Web開発をするにあたって欠かせない知識です。
「もっとCSSについて知りたい！」という方は、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。