Life is Tech! Lesson
オリジナル制作サンプル集
写真をセピア色やモノクロにする
難易度：
プロパティ：filter
関連レッスン：Chapter 1 レッスン 5
できあがりイメージ
つくりかた
Step1
セピア色にする要素をHTMLから探す
HTML
<div class="big">
<img src="img/cro-big.jpg" width="500">
<h3>サクサククロワッサン</h3>
</div>
HTMLの"big"というクラス名のdivタグの中にある、画像 (imgタグ) に対してCSSを反映させていきます。
Step2
セピア色にする要素のCSSセレクタをつくる
CSS
.big img {
}
CSSで クラス名"big"内の img を指定します。
Step3
セピア色を指定する
filter を追加して、セピア色を指定しましょう。
CSS
.big img {
filter: sepia(100%);
}
filter を使うと写真の色を変更したり、様々な加工を行うことができます。
sepia を指定すると写真がセピア色 (茶色っぽい色) になります。
カッコの中にフィルターの強さを % で指定します。
Step4
コードを書くかコピー＆ペーストする
CSS
filter: sepia(100%);
コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。
ワンポイント解説
セピア色以外にも、filter に grayscale を指定すると、写真を白黒にすることができます。
クラス名"small"内の img に grayscale を指定してみました。
CSS
.small img {
filter: grayscale(100%);
}
Step5
実際の見え方を確認する
サクサククロワッサンの写真がセピア調に、レーズンデニッシュとこだわりライ麦パンの写真がモノクロになっていれば完了です。
