Day 13 です。
Phase 2 も後半戦です。今日は Web サイトのビジュアルインパクトを左右する「画像」の扱い方です。
これまで、画像を配置するときに「横幅を指定したら、縦長に伸びて変になった」という経験はありませんか？
あるいは、画像をモノクロにしたり明るくしたりするために、画像編集ソフトを開いていませんか？
今日は、画像の比率崩れを CSS 1 行で防ぎ、さらにフィルター加工まで CSS で完結させる テクニックを学びます。
はじめに：ブラウザは「画像編集ソフト」になる
現代の CSS は非常に強力です。
object-fit を使えば、どんなサイズの画像が来てもレイアウトに合わせて自動でトリミング（切り抜き）してくれます。
filter を使えば、インスタグラムのような色加工やぼかしを、コードだけで適用できます。
これにより、画像素材を加工する手間が減り、後からの変更も簡単になります。
🎯 本日の目標
-
object-fit: cover：画像の縦横比（アスペクト比）を維持したまま、指定した枠にきれいに収める。 -
filter：彩度を落としたり（モノクロ）、ぼかしたりして、エモーショナルな表現を作る。 - ホバーエフェクト：マウスを乗せた時に「モノクロ → カラー」になる演出を作る。
📝 ミッション内容
以下の 2 つの画像要素を作ってください。
（※お手持ちの適当な写真画像か、ネット上のフリー素材 URL を使ってください）
-
Mission 1: 「Perfect Square」
- 元の画像が横長でも縦長でも、正方形（200px × 200px） の枠の中に、歪まずに埋まるアイコン画像を作る。
-
Mission 2: 「Dramatic Card」
- 最初は「暗くてぼやけたモノクロ画像」だが、ホバーすると「明るく鮮明なカラー画像」に変化するカードを作る。
💻 実装サンプル
正解例
See the Pen CSSマスターへの道「画像加工 (object-fit / filter)」 by サカツ (@saka2jp) on CodePen.
🧠 解説と重要ポイント
1. object-fit の種類
<img> タグに width と height を指定した時の挙動を制御します。
-
fill(デフォルト): 無理やり引き伸ばして枠に合わせる（画像が歪む）。 -
cover(推奨): 比率を保ったまま、枠を埋めるように拡大縮小する。はみ出た部分は切り取られる（トリミング）。 -
contain: 比率を保ったまま、画像が全て入るようにする。枠との間に隙間ができる。
「img タグでサイズ指定するなら、セットで object-fit: cover; も書く」 と覚えておくと便利です。
2. filter でできること
Photoshop のような加工ができます。複数重ねがけも可能です。
-
blur(5px): ぼかし。 -
grayscale(100%): モノクロ化。 -
sepia(100%): セピア調。 -
brightness(150%): 明るくする（100% が基準）。 -
contrast(200%): コントラストを強くする。 -
hue-rotate(90deg): 色相を回転させる（色を変える）。
💡 応用：背景画像を暗くして文字を読ませる
ヒーローエリア（サイトのトップ画像）などで、写真の上に白い文字を載せたい時、写真が明るすぎると文字が読めませんよね？
そんな時、CSS で画像を暗くします。
/* 方法 1: filter を使う場合（画像自体が暗くなる） */
.hero-image {
filter: brightness(50%);
}
/* 方法 2: 背景色とブレンドする場合（より細かい調整が可能） */
.hero-section {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
/* 黒い半透明の膜 */ url("photo.jpg");
background-size: cover;
}
おわりに
object-fit を知っているだけで、CMS（WordPress など）でクライアントがどんなサイズの画像をアップロードしても、レイアウト崩れを起こさない堅牢なサイトが作れます。これは実務で必須のスキルです。
また、filter を使えば、サイト全体の画像のトーンを CSS だけで統一でき、世界観を作り込むことができます。
次回は、画像を星型やハート型など、好きな形に切り抜く 「クリップパス (clip-path)」 です。Phase 2 の締めくくりとして、自由な造形を学びましょう。