こんにちは！かたすけです。
Webサイトの見た目を美しく、そして機能的にするために欠かせないCSS。今日は、その中でも特に重要なプロパティを厳選し、初心者にもわかりやすく徹底解説します。この記事を読めば、Webデザインの基礎がしっかりと身につきます！
プロパティって何？という方はこちら↓
`background-color`: 背景色を操る
要素の背景色を指定するプロパティです。Webページの印象を大きく左右するため、色の選択は慎重に行いましょう。
- 指定できる値:
- 色名: `red`, `blue`, `green`, `lightgray` など
- 16進数表記: `#ff0000` (赤), `#00ff00` (緑), `#0000ff` (青), `#cccccc` (薄い灰色) など
- RGB: `rgb(255, 0, 0)` (赤), `rgb(0, 255, 0)` (緑), `rgb(0, 0, 255)` (青) など
- RGBA: `rgba(255, 0, 0, 0.5)` (半透明の赤) など。最後の値は透明度（0〜1）
この色のカラーコードはこれ！というのを覚える必要はありません。こんなことができるんだ、というのを覚えましょう！
- コード例:
body {
background-color: pink;
}- ブラウザでの表示結果:
- 背景がピンク色の `body` 要素が表示されます。
- 使用上の注意点:
- 背景色と文字色のコントラスト比に注意し、文字が読みやすいようにしましょう。
`font-family`: フォントの種類を指定する
要素のフォントの種類を指定します。Webサイトの雰囲気に合ったフォントを選びましょう。
- 指定できる値:
- フォントファミリ名: `”Arial”`, `”Times New Roman”`, `”游ゴシック体”` など
- 総称ファミリ名: `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy`
- 複数のフォントをカンマ区切りで指定できます。左から順に適用され、利用できない場合は次のフォントが適用されます。
- コード例:
p {
font-family: 'Arial', 'Times New Roman', sans-serif;
}フォントファミリ名は’ ’または” “で囲む。総称ファミリ名は最後にそのまま書く。
- ブラウザでの表示結果:
- Arialでテキストが表示されます（Arialが利用できない場合は、Times New Romanのフォントで表示されます）。
- 使用上の注意点:
- Webフォントを利用する場合は、事前に読み込む必要があります。
- 日本語フォントを指定する場合は、日本語に対応しているフォントを選びましょう。
- 総称フォントファミリーは、具体的なフォントを指定できない場合に、ブラウザに適切なフォントを選択させるためのものです。
`font-size`: フォントのサイズを指定する
要素のフォントサイズを指定します。適切なサイズを設定することで、テキストの可読性を高めることができます。
- 指定できる値:
- 絶対値: `px` (ピクセル), `pt` (ポイント)など
- 相対値: `%` など
- キーワード: `small`, `medium`, `large`, `smaller`, `larger` など
- コード例:
h1 {
font-size: 20px;
}- ブラウザでの表示結果:
- 見出しは20ピクセルで表示されます。
`border`: 境界線を引く
要素の周囲に境界線（ボーダー）を引きます。線の種類、太さ、色を指定できます。
- 指定できる値:
- `border-width`: 線の太さ (`px`, `em`, `thin`, `medium`, `thick` など)
- `border-style`: 線の種類 (`solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset` など)
- `border-color`: 線の色 (色名, 16進数表記, RGB, RGBAなど)
- これらをまとめて `border: 1px solid black;` のように指定することも可能です。
- 個別に指定することも可能です。`border-top`, `border-right`, `border-bottom`, `border-left`
- コード例:
h1 {
border: 2px solid red;
}- ブラウザでの表示結果:
- 赤い実線で囲まれた `h1` 要素が表示されます。
- 使用上の注意点:
- `border-style` を指定しないと、境界線は表示されません。
- `border-width` を指定しない場合は、デフォルトの太さ（`medium`）が適用されます。
`border-radius`: 角を丸くする
要素の角を丸くします。値を大きくするほど、角の丸みが大きくなります。
- 指定できる値:
- `px` など
- 4つの角を個別に指定することも可能です。`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`
- コード例:
h1 {
border: 1px solid black;
border-radius: 10px;
}- ブラウザでの表示結果:
- 角が丸くなった `h1` 要素が表示されます。
- 使用上の注意点:
- `border-radius` に50%を指定すると、要素が円形になります（要素が正方形の場合）。
`padding`: 内側の余白を設定する
要素の内側（コンテンツと境界線の間）に余白を設定します。
- 指定できる値:
- `px`,`%` など
- 4つの辺を個別に指定することも可能です。`padding-top`, `padding-right`, `padding-bottom`, `padding-left`
- 値を1つだけ指定した場合、4辺すべてに同じ余白が適用されます。
- 値を2つ指定した場合、1つ目の値は上下、2つ目の値は左右の余白に適用されます。
- 値を4つ指定した場合、上、右、下、左の順に余白が適用されます。（時計回り！）
- コード例:
h1 {
border: 1px solid black;
padding: 20px;
}- ブラウザでの表示結果:
- コンテンツと境界線の間に20pxの余白がある `h1` 要素が表示されます。
- 使用上の注意点:
- `padding` は要素のサイズに影響を与えます。
`margin`: 外側の余白を設定する
要素の外側（境界線の外側）に余白を設定します。要素間の間隔を調整する際に使用します。
- 指定できる値:
- `px`, `%` など
- `auto`: ブラウザが自動的に余白を計算します（ブロックボックスの中央揃えなどに使用）。
- 4つの辺を個別に指定することも可能です。
- `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
- 値を1つだけ指定した場合、4辺すべてに同じ余白が適用されます。
- 値を2つ指定した場合、1つ目の値は上下、2つ目の値は左右の余白に適用されます。
- 値を4つ指定した場合、上、右、下、左の順に余白が適用されます。
- コード例:
h1 {
border: 1px solid black;
margin: 20px;
}- ブラウザでの表示結果:
- 要素の外側に20pxの余白がある `h1` 要素が表示されます。
- 使用上の注意点:
- 上下の `margin` は、隣接する要素間で相殺されることがあります（マージン相殺）。
- `margin: 0 auto;` を指定すると、要素を水平方向に中央揃えにできます（ただし、ブロックボックスに限ります）。
`width`: 要素の幅を指定する
要素の幅を指定します。
- 指定できる値:
- `px`, `%` など
- `auto`: ブラウザが自動的に幅を計算します。
- コード例:
h1 {
width: 200px;
}- ブラウザでの表示結果:
- 幅が200pxの `h1` 要素が表示されます。
- 使用上の注意点:
- `width` はコンテンツ領域の幅を指定します。`padding` や `border` は `width` に加算されます
- `%` で指定した場合、親要素の幅に対する割合で幅が決定されます。
`text-align`: テキストの配置を指定する
要素内のテキストの水平方向の配置を指定します。
- 指定できる値:
- `left`: 左寄せ
- `right`: 右寄せ
- `center`: 中央揃え
- コード例:
p {
text-align: center;">
}
pの中にa要素などのインラインボックス要素があると、それは中央揃えになります。- ブラウザでの表示結果:
- テキストが中央揃えで表示されます。
- 使用上の注意点:
- `text-align` はインラインボックス要素（`span`, `a` など）にも適用され、それらを中央揃えにする際は、その親要素にtext-align: center;を指定します。
`display`: 要素の表示形式を指定する
要素の表示形式を指定します。Webページのレイアウトを決定する上で非常に重要なプロパティです。
- 指定できる値:
- `block`: ブロック要素として表示します（幅全体を占有し、前後に改行が入ります）。
- `inline`: インライン要素として表示します（コンテンツの幅だけを占有し、前後に改行は入りません）。
- `inline-block`: インライン要素のように配置されますが、幅と高さを指定できます。
ボックスモデルの復習はこちらから！↓
- コード例:
a {
display: block;
}
- ブラウザでの表示結果:
- `a` 要素ブロック要素として表示されます
`color`: 文字の色を指定する
要素内のテキストの色を指定します。
- 指定できる値:
- 色名: `red`, `blue`, `green` など
- 16進数表記: `#ff0000` (赤), `#00ff00` (緑), `#0000ff` (青) など
- RGB: `rgb(255, 0, 0)` (赤), `rgb(0, 255, 0)` (緑), `rgb(0, 0, 255)` (青) など
- RGBA: `rgba(255, 0, 0, 0.5)` (半透明の赤) など
- コード例:
p {
color: blue;
}- ブラウザでの表示結果:
- テキストが青色で表示されます。
- 使用上の注意点:
- 背景色とのコントラスト比に注意し、文字が読みやすいようにしましょう。
`font-weight`: フォントの太さを指定する
要素内のテキストの太さを指定します。
- 指定できる値:
- `normal`: 標準の太さ
- `bold`: 太字
- コード例:
p {
font-weight: bold;
}- ブラウザでの表示結果:
- テキストが太字で表示されます。
- 使用上の注意点:
- フォントの種類によっては、指定した太さが適用されない場合があります。
まとめ
この記事では、Webデザインの基礎となる重要なCSSプロパティについて解説しました。これらのプロパティを理解し、使いこなすことで、Webページの見た目を自由にコントロールできるようになります。さらに学習を進め、魅力的なWebサイトを制作していきましょう！
ではまた次回！
最後まで読んでいただき、ありがとうございました！
この記事は、以下の書籍の情報を参考に作成させていただいております。
とてもお勧めです！
リンク
