【CSS】レッスン3-05:画像のスタイルを変更しよう

一つ前の章では画像を自在に配置する方法について学習しました。

今回は画像のスタイルを変更する方法について見ていきましょう。

Lesson3-1:ボックス配置の基礎を理解しよう
Lesson3-2:ボックスサイズを変更しよう
Lesson3-3:ボックスを自在に配置しよう
Lesson3-4:画像を自在に配置しよう
Lesson3-5:画像のスタイルを変更しよう ◁今回はココ
Lesson3-6:背景画像を設定しよう
Lesson3-7:リンクボタンを設置しよう
Lesson3-8:リストとテーブルのスタイルを変更しよう
Lesson3-9:CSS変数を理解しよう

Webページにおいて画像は、文章だけでは伝えきれない情報を視覚的に補完する重要な要素です。

しかしただ画像を配置するだけでは、デザインとして物足りなく感じることがあります。

そこで役立つのが「画像のスタイル変更」です。画像のサイズや表示方法、透明度などを調整することで、見た目のバランスを整えたり、より印象的なデザインを作り出すことができます。

今回は、画像の表示方法をコントロールする object-fit プロパティと、透明度を調整する opacity プロパティについて学び、Webページをより魅力的に見せる方法を習得しましょう。

<<前のページ HTML/CSSの記事一覧 次のページ>>

object-fitプロパティの解説

object-fitとは?

object-fit プロパティは、画像や動画といったメディア要素を指定したサイズ内でどのように表示するかをコントロールするためのCSSプロパティです。

通常、img タグで画像を表示する際に、widthheight を指定すると、画像の縦横比が崩れることがあります。

しかし、object-fit を使うことで、元の比率を維持しながら美しく表示することができます。

主な値とその効果

  • fill(デフォルト)
    画像が指定された枠いっぱいに引き伸ばされます。縦横比は無視されるため、画像が歪むことがあります。
  • contain
    画像の縦横比を維持しつつ、指定された枠内に収めます。枠の余白部分は空白として表示されます。
  • cover
    画像の縦横比を維持しながら、枠を完全に覆うように表示します。一部の画像が切り取られることがありますが、枠内は余白ができません。
  • none
    元のサイズのまま表示され、サイズ調整は行われません。指定した枠より大きい場合ははみ出します。
  • scale-down
    nonecontain の中で、より小さいサイズで表示される方法を自動的に選択します。

以下のコードに適切な画像のパスを指定し、ブラウザ表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>object-fitの例</title>
  <style>
    .container {
      width: 200px;
      height: 150px;
      border: 2px solid #333;
      margin: 10px;
      display: inline-block;
    }

    .container img {
      width: 100%;
      height: 100%;
    }

    .fill { object-fit: fill; }
    .contain { object-fit: contain; }
    .cover { object-fit: cover; }
    .none { object-fit: none; }
    .scale-down { object-fit: scale-down; }
  </style>
</head>
<body>
  <div class="container">
    <img src="sample.jpg" alt="サンプル画像" class="fill">
    <p>fill</p>
  </div>
  <div class="container">
    <img src="sample.jpg" alt="サンプル画像" class="contain">
    <p>contain</p>
  </div>
  <div class="container">
    <img src="sample.jpg" alt="サンプル画像" class="cover">
    <p>cover</p>
  </div>
  <div class="container">
    <img src="sample.jpg" alt="サンプル画像" class="none">
    <p>none</p>
  </div>
  <div class="container">
    <img src="sample.jpg" alt="サンプル画像" class="scale-down">
    <p>scale-down</p>
  </div>
</body>
</html>
  • fill は画像が枠に合わせて引き伸ばされ、歪みが生じます。
  • contain は余白ができますが、縦横比は維持されます。
  • cover は画像の一部が切り取られますが、余白はできません。
  • none は元のサイズのままで、はみ出すこともあります。
  • scale-down は自動的に最適な表示方法が選ばれます。

よくある使い方

  • ギャラリーサイト: cover を使用して、サムネイル画像を均一に整える。
  • プロフィール写真: contain で顔が切れないように表示。
  • バナー画像: fill でスペースを完全に埋める。

このようにobject-fit は画像表示の柔軟性を高め、Webデザインをより洗練させるために欠かせないプロパティです。

以下のHTMLコードがあります。

この画像が枠にぴったり収まり、余白ができないように表示されるように、適切な object-fit の値を入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題1</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      border: 2px solid #000;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: _____; /* ここを埋めよう! */
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="sample.jpg" alt="サンプル画像">
  </div>
</body>
</html>

opacityプロパティの解説

opacityとは?

opacity プロパティは、HTML要素の透明度をコントロールするためのCSSプロパティです。

このプロパティを使用することで、画像だけでなくテキストやボックスなどの透明度も簡単に調整できます。

特に、画像の上に文字を重ねたり、ホバー時にフェードイン・フェードアウト効果を与える場面でよく使われます。

基本的な使い方

opacity の値は 0から1の間 で指定します。

  • 1完全に不透明(デフォルトの状態)
  • 0.550%の透明度(半透明)
  • 0完全に透明(見えなくなる)

以下のコードに適切な画像のパスを指定し、ブラウザ表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>opacityの基本例</title>
  <style>
    .image-container {
      width: 300px;
      margin: 10px;
    }

    img {
      width: 100%;
      height: auto;
    }

    .opacity-1 { opacity: 1; }       /* 不透明 */
    .opacity-0-5 { opacity: 0.5; }   /* 半透明 */
    .opacity-0 { opacity: 0; }       /* 完全透明 */
  </style>
</head>
<body>
  <div class="image-container">
    <img src="sample.jpg" alt="不透明な画像" class="opacity-1">
    <p>opacity: 1 (不透明)</p>
  </div>

  <div class="image-container">
    <img src="sample.jpg" alt="半透明な画像" class="opacity-0-5">
    <p>opacity: 0.5 (半透明)</p>
  </div>

  <div class="image-container">
    <img src="sample.jpg" alt="完全に透明な画像" class="opacity-0">
    <p>opacity: 0 (完全透明)</p>
  </div>
</body>
</html>
  • .opacity-1: 透明度が1なので、通常通りの表示です。
  • .opacity-0-5: 半透明になり、背景がうっすらと透けて見えます。
  • .opacity-0: 完全に透明になり、画像は存在しているものの見えなくなります。

opacity: 0; は要素を「非表示」にするのではなく、透明にするだけです。

そのため、マウスイベント(クリックなど)は依然として有効です。

応用例:ホバーエフェクトでの使用

opacity はホバー時に画像をフェードアウトさせたり、逆に目立たせたりする効果としてよく使用されます。

以下のコードに適切な画像のパスを指定し、ブラウザ表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ホバーで透明度変更</title>
  <style>
    .hover-effect {
      width: 300px;
      transition: opacity 0.5s; /* スムーズな変化 */
    }

    .hover-effect:hover {
      opacity: 0.6; /* ホバー時に透明度60% */
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="ホバーで変化する画像" class="hover-effect">
  <p>画像にマウスを乗せてみましょう!</p>
</body>
</html>
  • transition: opacity 0.5s;
    透明度が変化する際に0.5秒かけてスムーズに表示が切り替わる効果を付与しています。
  • :hover の使用:
    画像にマウスを乗せたとき(ホバー時)だけ透明度が 0.6 になり、マウスを離すと元に戻る動きが自然に見えます。

注意点

  • 子要素にも影響する:
    opacity は親要素に適用すると、その子要素全体にも同じ透明度が適用されます。個別に透明度をコントロールしたい場合は、要素ごとに opacity を指定する必要があります。
  • クリックイベントは有効:
    opacity: 0; でも要素は「存在」しているため、クリックなどの操作が可能です。完全に操作を無効化したい場合は display: none; を使用します。

以下のHTMLコードがあります。

この画像を50%の透明度(半透明)で表示するように、適切な opacity の値を入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題1</title>
  <style>
    img {
      width: 300px;
      height: auto;
      opacity: _____;  /* ここを埋めよう! */
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="サンプル画像">
</body>
</html>

応用テクニックの紹介

画像のデザインをさらに洗練させるために、object-fitopacity だけでなく、CSSの他のプロパティを組み合わせて使用することで、より魅力的な視覚効果を作り出すことができます。

この章では、簡単に取り入れられる3つの応用テクニックを紹介します。

filterプロパティ:画像にエフェクトを追加する

filter プロパティは、画像にぼかしや色の調整などの視覚効果を簡単に適用することができます。

Instagramのようなフィルター効果をCSSだけで実現できるため、注目度の高いデザインを作る際に便利です。

  • blur(px):画像をぼかす
  • grayscale(%):グレースケール(白黒化)
  • brightness(%):明るさの調整
  • contrast(%):コントラストの強弱

以下のコードに適切な画像のパスを指定し、ブラウザ表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>filterの使用例</title>
  <style>
    .filter-effect {
      width: 300px;
      transition: filter 0.3s ease;
    }

    .filter-effect:hover {
      filter: grayscale(100%) blur(2px); /* ホバー時に白黒&ぼかし効果 */
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="フィルター効果の画像" class="filter-effect">
  <p>画像にマウスを乗せると、白黒とぼかし効果が適用されます。</p>
</body>
</html>
  • 通常時: カラー画像が表示されます。
  • ホバー時: grayscale(100%)blur(2px) で白黒かつぼかし効果がかかります。
  • transition: エフェクトの変化が滑らかになるように設定しています。

clip-pathプロパティ:画像の形を切り抜く

clip-path プロパティを使用すると、画像や要素を円形や多角形など、さまざまな形に切り抜くことができます。

プロフィール画像や装飾用のバナーでおしゃれな見た目を作る際に役立ちます。

  • circle():円形に切り抜き
  • polygon():多角形の形を作成
  • ellipse():楕円形に切り抜き

以下のコードに適切な画像のパスを指定し、ブラウザ表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>clip-pathの使用例</title>
  <style>
    .circle-image {
      width: 200px;
      height: 200px;
      object-fit: cover;
      clip-path: circle(50%); /* 完全な円形に切り抜く */
    }

    .star-image {
      width: 200px;
      height: 200px;
      object-fit: cover;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 
                          50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* 星型 */
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="円形の画像" class="circle-image">
  <p>円形に切り抜いた画像</p>

  <img src="sample.jpg" alt="星形の画像" class="star-image">
  <p>星型に切り抜いた画像</p>
</body>
</html>
  • circle(50%): 画像を円形に切り抜いています。数値を変えると半径が変わります。
  • polygon(): 座標を指定して複雑な形(星型)を作成できます。
  • object-fit: cover;: 切り抜き後の画像の表示バランスを整えるために使用。

transitionプロパティ:スムーズなアニメーション効果

transition プロパティは、CSSプロパティの変化を滑らかにアニメーション化するために使用されます。

opacityfilter などと組み合わせることで、インタラクティブなデザインを簡単に実現できます。

<-- 基本構文 -->
transition: [プロパティ] [時間] [イージング] [遅延];

<-- 例 -->
transition: all 0.5s ease-in-out;

以下のコードに適切な画像のパスを指定し、ブラウザ表示してみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>transitionの使用例</title>
  <style>
    .transition-effect {
      width: 300px;
      transition: transform 0.4s ease, opacity 0.4s ease; /* 拡大&透明度変化 */
    }

    .transition-effect:hover {
      transform: scale(1.1); /* 画像を1.1倍に拡大 */
      opacity: 0.8;          /* 少しだけ透明に */
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="アニメーション効果の画像" class="transition-effect">
  <p>マウスを乗せると画像が拡大して透明度が変化します。</p>
</body>
</html>
  • transform: scale(1.1): 画像をホバー時に1.1倍に拡大します。
  • opacity: 0.8: 少しだけ透明度を下げ、柔らかな印象にします。
  • transition: 両方の変化が滑らかに実行されるように指定しています。

まとめ

  • filter で画像にエフェクト(ぼかし、グレースケールなど)を追加できます。
  • clip-path を使えば、円形や星型など、自由な形に画像を切り抜けます。
  • transition で、スタイルの変化をスムーズにアニメーション化できます。

これらの応用テクニックを組み合わせることで、より魅力的なデザインを作ることができます。

次は、学習内容を振り返るまとめに進みます!

以下のHTMLコードに、画像にマウスを乗せたときにゆっくりと拡大(1.2倍)するアニメーションを追加しましょう。

スムーズに変化させるための transition の値を入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題3</title>
  <style>
    img {
      width: 300px;
      transition: _____;  /* ここを埋めよう! */
    }

    img:hover {
      transform: scale(1.2);  /* ホバー時に1.2倍に拡大 */
    }
  </style>
</head>
<body>
  <img src="sample.jpg" alt="拡大アニメーションの画像">
</body>
</html>

まとめ

今回のレッスンでは、Webページ上で画像をより魅力的に表示するためのさまざまなスタイル変更方法について学びました。

ここまで学習お疲れさまでした!
今回習得したテクニックを活かして、画像の見せ方に工夫を凝らしてみましょう。

少しのスタイル変更でもWebページ全体の印象が大きく変わることに気づくはずです。引き続き楽しく学習を進めて、デザインスキルをどんどん磨いていきましょう!

練習問題3-5:プロフィールカードをデザインしよう

Webサイトのプロフィールカードをデザインしましょう。

条件を満たすようなCSSを完成させ、以下のHTMLコードに読み込ませてください。

  1. 画像の表示方法
    • 画像は円形に切り抜き、縦横比が崩れないように表示する。
  2. 透明度の調整
    • マウスを乗せたとき(ホバー時)、画像が透明度80% になるようにする。
    • 透明度の変化は0.4秒でスムーズに切り替わるようにする。
  3. 追加の効果
    • ホバー時には、画像が少し拡大(1.1倍) するアニメーション効果も付ける。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>プロフィールカードのデザイン練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="profile-card">
    <img src="profile.jpg" alt="プロフィール画像">
    <h2>山田 太郎</h2>
    <p>Webデザイナー</p>
  </div>
</body>
</html>

初めてのWebサイトを作ろう3-5

このサイトの Lesson1-1(HTML学習の入り口) か Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る