CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。
CSSは一般的に、Webページのレイアウトや文字のデザインを指定するために使用されますが、CSSを使って画像に装飾を加えたり、画像を加工することもできます。今日はCSSを使った画像加工についてまとめてみたいと思います。
CSSとは？
CSSは、通常HTMLで枠をつくったWebページに対して装飾を行うために使用する言語です。
CSSでできる例としては、フォントサイズや背景色などの「表示スタイル」、印刷・出力される際の「出力スタイル」、音声で読み上げを行う際の「再生スタイル」などが挙げられます。
CSSを使うメリットは、文書構造を保ったままスタイルのみを指定することができる点や、１つのCSSファイルで一括してスタイルを管理できる点、そして構文をシンプルにできるためSEO的にも望ましい等が挙げられます。
HTMLだけで１つ１つスタイルを指定しようとすると、ものすごく面倒くさいですし、メンテナンス性も悪いです。
一度CSSの利便性を体験すると、もうCSS無しではWebページを作れなくなると言っても過言ではありません。
CSSはブラウザに依存する
CSSの中には、各ブラウザ毎に個別に記述しなければならないものがあるので、注意が必要です。この記述を「ベンダープレフィックス」といいます。
主要ブラウザのベンダープレフィックスは以下の通りです。
最低限、下記のベンダープレフィックスは設定するようにしましょう。
・Firefox・・・「-moz-」
・Google Chrome、Safari・・・「-webkit-」
・Opera ・・・「-o-」
・Internet Explorer・・・「-ms-」
CSSで画像にフィルタをかける方法
さて、そんなCSSですが、なんとCSSを用いて画像加工をすることもできるのです。
画像加工ソフトでお馴染みのフィルタ機能（グレースケールやセピアなど）を、CSSを使えばカンタンに設定することができます。
・ グレースケール（grayscale）
グレースケールは、 0%から100％で指定しましょう。
ちなみに100%にすると真っ黒になります。
img {
filter: grayscale(100%);
}
・セピア（sepia）
セピアもグレースケールと同様に、 0%から100％で指定しましょう。
img {
filter: sepia(70%);
}
・ 明るさ（brightness）
明度の指定をしたいときは、0～無限の数字で設定します。0にすると真っ黒になります。
img {
filter: brightness(0.8);
}
・ ぼかし（blur）
ぼかしたいときの設定です。Pxで設定しますが、数字が大きくなるにつれてぼかし具合が強くなります。
img {
filter: blur(10px);
}
CSSで画像に枠やシャドウをつける方法
次に、CSSを使って画像に枠やシャドウなどの装飾を加える方法をご紹介します。
・枠
ボーダーで囲む方法。px数で太さの調整、色コードで色彩の調整ができます。
img {
border:10px solid #cfcfcf;
}
二重線で囲む方法。上のsolidをdoubleにすることで線が二重になります。
img {
border:10px double #cfcfcf;
}
・シャドウ
画像に影をつけてみましょう。
Pxで設定する数値は、左から順に横方向、下方向、ぼかし、範囲、最後に色彩の調整です。
いろいろ数字を変えて試してみてくださいね。
img {
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
}
最後に
いかがでしたでしょうか。
画像加工ソフトを使わなくても、CSSでここまでできます。とってもカンタンにできるので、ぜひ試してみてください。
