• 背景に関するCSSプロパティの使い方を理解する
• ボーダー（枠線）のつけ方とカスタマイズ方法を習得する
• これらの装飾効果を組み合わせて魅力的なデザインを作れるようになる

1. 背景に関するプロパティ

背景は、Webサイトの雰囲気を大きく左右する重要な要素です。CSSには背景をカスタマイズするための様々なプロパティがあります。

背景色を設定する（background-color）

要素の背景に色をつけるには background-color プロパティを使います。

.box {
  background-color: #f0f8ff; /* 薄い青色 */
}

色の指定方法には、次のような方法があります。

• 色の名前： red, blue, green など
• 16進数カラーコード： #ff0000（赤）, #00ff00（緑）など
• RGB表記： rgb(255, 0, 0)（赤）
• RGBA表記（透明度付き）： rgba(255, 0, 0, 0.5)（半透明の赤）

背景画像を設定する（background-image）

要素の背景に画像を表示するには background-image プロパティを使います。

.box {
  background-image: url('images/pattern.jpg');
}

背景画像の表示方法をカスタマイズする

背景画像の表示方法は、以下のプロパティで細かく調整できます。

• background-repeat：画像の繰り返し方法を指定
  • repeat：縦横に繰り返し（デフォルト）
  • repeat-x：横方向のみ繰り返し
  • repeat-y：縦方向のみ繰り返し
  • no-repeat：繰り返しなし（1回だけ表示）
• background-position：画像の位置を指定
  • 例：center, top left, 50% 25%
• background-size：画像のサイズを指定
  • cover：要素を完全に覆うようにサイズ調整
  • contain：要素内に収まるようにサイズ調整
  • 具体的なサイズ：100px 150px, 50% 100%など

背景の実例

<style>
  .bg-sample {
    width: 300px;
    height: 150px;
    padding: 20px;
    color: white;
    background-color: #3498db;
    background-image: url('https://learning-tech.jp/assets/images/lts-logo.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 50px;
  }
</style>

<div class="bg-sample">
  背景のサンプルです。右下に小さな画像があります。
</div>

背景のショートハンド指定（background）

複数の背景プロパティをまとめて指定するには、background を使います。

.box {
  /* 色、画像、繰り返し、位置、サイズ をまとめて指定 */
  background: #f0f8ff url('https://learning-tech.jp/assets/images/lts-logo.png') no-repeat right bottom / 50px;
}

2. ボーダー（枠線）に関するプロパティ

ボーダーは要素の周りに枠線をつけることができ、要素の境界を明確にしたり、デザインのアクセントとして使えます。

ボーダーの基本（border）

基本的なボーダーは次のように指定します。

.box {
  border: 2px solid black;
}

この指定は次の3つの値を順に指定しています：

1. 太さ：1px, 2px, 5pxなど
2. スタイル：solid（実線）, dotted（点線）, dashed（破線）など
3. 色：black, #ff0000, rgb(255,0,0)など

ボーダーを個別に指定する

上下左右のボーダーを個別に指定することもできます：

.box {
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double orange;
}

ボーダーの角を丸くする（border-radius）

要素の角を丸くするには border-radius プロパティを使います。

.box {
  border: 2px solid #333;
  border-radius: 10px; /* すべての角を10px分丸くする */
}

.profile-pic {
  border: 3px solid gold;
  border-radius: 50%; /* 50%で完全な円形になる */
}

角ごとに個別に指定することもできます：

.custom-shape {
  border-radius: 20px 5px 40px 10px; /* 左上、右上、右下、左下 */
}

ボーダーの実例

<style>
  .border-sample {
    width: 300px;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border: 3px dashed #007acc;
    border-radius: 12px;
  }
  
  .profile-img {
    width: 100px;
    height: 100px;
    background-color: #e0e0e0;
    border: 4px solid #ff9900;
    border-radius: 50%;
  }
</style>

<div class="border-sample">
  これは点線で囲まれたボックスです。
</div>

<div class="profile-img"></div>

今日のまとめ

• 背景関連のプロパティ：background-color, background-image, background-repeat, background-position, background-size などを使って、要素の背景をカスタマイズできます。
• ボーダー関連のプロパティ：border, border-radius などを使って、要素の周りに枠線をつけたり、角を丸くしたりできます。
• 応用テクニック：背景やボーダーのプロパティを組み合わせることで、魅力的なUIコンポーネントを作成できます。
• これらのプロパティでCSSの基本的な装飾技術が習得できました。実際のデザイン制作に活用していきましょう。

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

• CSSリファレンス

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

演習1：背景を活用した様々なデザインのボタンを作ろう

背景色、角丸などを組み合わせて、様々なスタイルのボタンを作成します。

<style>
  /* 共通のボタンスタイル */
  .btn-custom {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  /* ここに各ボタンのスタイルを追加してください */
  .btn-primary {
    /* プライマリーボタン */
  }
  
  .btn-success {
    /* サクセスボタン */
  }
  
  .btn-outline {
    /* アウトラインボタン */
  }
</style>

<button class="btn-custom btn-primary">プライマリー</button>
<button class="btn-custom btn-success">サクセス</button>
<button class="btn-custom btn-outline">アウトライン</button>

やってみよう！

• 共通のスタイルは既に設定されています
• 3種類のボタンそれぞれに異なるスタイルを設定しましょう
  • プライマリーボタン：青系の背景色と白い文字色
  • サクセスボタン：緑系の背景色と大きめの角丸
  • アウトラインボタン：背景なし、ボーダーのみのシンプルなデザイン

<style>
  /* 共通のボタンスタイル */
  .btn-custom {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
  }
  
  /* プライマリーボタン */
  .btn-primary {
    background-color: #4a6bdf;
    color: white;
    border-radius: 5px;
  }
  
  /* サクセスボタン */
  .btn-success {
    background-color: #28a745;
    color: white;
    border-radius: 20px; /* 大きな角丸 */
  }
  
  /* アウトラインボタン */
  .btn-outline {
    background-color: transparent;
    color: #5468ff;
    border: 2px solid #5468ff;
    border-radius: 3px;
  }
</style>

<button class="btn-custom btn-primary">プライマリー</button>
<button class="btn-custom btn-success">サクセス</button>
<button class="btn-custom btn-outline">アウトライン</button>

演習2：背景色と背景画像を組み合わせたボックスを作ろう

背景に薄い色を設定し、右下にアイコン画像を表示するボックスを作成します。

<style>
  .bg-box {
    width: 300px;
    height: 150px;
    padding: 20px;
    /* ここに背景のスタイルを追加してください */
  }
</style>

<div class="bg-box">
  背景色と背景画像を組み合わせたボックスです。
</div>

やってみよう！

• 背景色を青色（例：#3498db）に設定する
• 背景画像として「https://learning-tech.jp/assets/images/lts-logo.png」を使用する
• 背景画像は右下に配置し、繰り返しなしに設定する

<style>
  .bg-box {
    width: 300px;
    height: 150px;
    padding: 20px;
    background-color: #3498db;
    background-image: url('https://learning-tech.jp/assets/images/lts-logo.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 50px;
    margin-bottom: 15px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
</style>

<div class="bg-box">
  背景色と背景画像を組み合わせたボックスです。
</div>

次回（レッスン6）ではCSSで彩ろう！装飾効果とグラデーションをマスターしようについて学びます。影をつけたり、グラデーションを使って、WebページにUI要素に立体感や高級感を与える方法を習得しましょう。