CSS3 画像と背景：より魅力的なウェブページを作成する

この文章では、CSS3の画像と背景におけるパワフルな機能について詳しく解説していきます。CSS3を使って角丸画像の実装、影の効果の追加、画像ボーダーの作成、複数背景の設定など、具体的なコード例を交えながら、より魅力的で視覚的にインパクトのあるウェブページを作成する方法を学びます。

1. CSS3 画像

CSS3では、画像のスタイルをより柔軟に制御することができます。ここでは、いくつかの重要なプロパティを紹介します。

1.1 角丸画像：border-radius

border-radius プロパティを使うと、画像の角を丸くすることができます。これにより、画像に柔らかな印象を与えることができます。

<!DOCTYPE html>
<html>
<head>
  <title>丸みを帯びた画像の例</title>
  <style>
    img {
      border-radius: 10px; /* 全ての角を半径10pxで丸くする */
    }

    img {
      border-top-left-radius: 20px; /* 左上の角だけを半径20pxで丸くする */
    }
  </style>
</head>
<body>

  <img src="https://via.placeholder.com/300x200" alt="サンプル画像">

</body>
</html>

CSS3画像

解説

  1. <img> タグ: 画像を表示するためのHTMLタグです。src 属性に画像のURLを指定します。ここではプレースホルダー画像を使用しています。

  2. <style> タグ: この中にCSSコードを記述します。

  3. img { border-radius: 10px; }: ページ上のすべての画像の四隅を半径10pxで丸くします。

  4. img { border-top-left-radius: 20px; }: ページ上のすべての画像の左上の角だけを半径20pxで丸くします。このルールは前のルールを上書きします。

このHTMLファイルをブラウザで開くと、左上の角が大きく丸みを帯びた画像が表示されます。

ポイント

  • border-radius の値を変えることで、丸みの強さを調整できます。

  • 複数の img タグがある場合でも、これらのCSSルールはすべてに適用されます。

  • 個別の画像に異なるスタイルを適用したい場合は、 class 属性や id 属性を使用し、CSSで個別にスタイルを指定します。

この例が、border-radius プロパティを使って画像に丸みを付ける方法を理解するのに役立つことを願っています。

値 説明
px ピクセル単位で半径を指定
% 画像の幅または高さに対するパーセンテージで半径を指定

1.2 画像の影：box-shadow

box-shadow プロパティは、画像に影を付けることができます。これにより、画像をページから浮かび上がらせるような効果を得ることができます。


img {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 横方向のオフセット、縦方向のオフセット、ぼかしの半径、影の色 */
}

1.3 画像のボーダー：border

border プロパティは、画像にボーダーを付けることができます。ボーダーの色、太さ、スタイルを指定することで、画像をより強調することができます。


img {
  border: 5px solid #000000; /* 太さ、スタイル、色 */
}

2. CSS3 背景

CSS3では、背景画像やグラデーションをより簡単に、そしてより柔軟に設定することができます。

2.1 背景色と画像：background-color, background-image

background-color プロパティで背景色を、background-image プロパティで背景画像を設定できます。複数の背景画像を設定することも可能です。


body {
  background-color: #f0f0f0;
  background-image: url("image1.jpg"), url("image2.png");
}

2.2 背景の繰り返し：background-repeat

background-repeat プロパティを使用すると、背景画像の繰り返し方法を制御できます。


body {
  background-repeat: repeat-x; /* 横方向にのみ繰り返す */
}
値 説明
repeat 縦横両方向に繰り返す（デフォルト）
repeat-x 横方向にのみ繰り返す
repeat-y 縦方向にのみ繰り返す
no-repeat 繰り返さない

2.3 背景の位置：background-position

background-position プロパティでは、背景画像の位置を指定できます。キーワード、パーセンテージ、ピクセル値を使用して正確に配置できます。


body {
  background-position: top center; /* 上部中央に配置 */
}

2.4 背景のサイズ：background-size

background-size プロパティは、背景画像のサイズを調整するために使用します。定義済みの値またはカスタムサイズを選択できます。


body {
  background-size: cover; /* 背景画像を要素全体にカバーするように調整 */
}

2.5 背景の貼り付け：background-attachment

background-attachment プロパティは、背景画像をビューポートに固定するか、コンテンツと一緒にスクロールするかを制御します。


body {
  background-attachment: fixed; /* 背景画像を固定 */
}

2.6 線形グラデーション背景：linear-gradient

linear-gradient 関数を使用すると、線形グラデーションの背景を作成できます。グラデーションの方向、色、および停止点を設定できます。


body {
  background: linear-gradient(to right, red, yellow); /* 左から右に赤から黄色へのグラデーション */
}

2.7 放射状グラデーション背景：radial-gradient

radial-gradient 関数を使用すると、放射状グラデーションの背景を作成できます。グラデーションの形状、サイズ、色、および停止点を設定できます。


body {
  background: radial-gradient(circle, red, yellow, green); /* 中心から外側に向かって赤、黄色、緑のグラデーション */
}

参考資料

Q&A

Q: background-size: cover と background-size: contain の違いは何ですか？

A: cover は、背景画像が要素全体を覆うように調整されます。一方、contain は、背景画像が要素内に収まるように調整されます。

Q: 複数の背景画像を設定するにはどうすればよいですか？

A: background-image プロパティに、カンマ区切りで複数の画像URLを指定します。

Q: グラデーションの開始点を変更するにはどうすればよいですか？

A: linear-gradient 関数または radial-gradient 関数で、開始位置を指定します。例えば、to bottom とすると下から上にグラデーションがかかります。