Top
ホーム > EC  > 【HTMLはわかったけど、CSSがイマイチな方へ】CSSを使った画像加工について基本をまとめました。
201606_04_2

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。
CSSは一般的に、Webページのレイアウトや文字のデザインを指定するために使用されますが、CSSを使って画像に装飾を加えたり、画像を加工することもできます。今日はCSSを使った画像加工についてまとめてみたいと思います。
 

CSSとは?

CSSは、通常HTMLで枠をつくったWebページに対して装飾を行うために使用する言語です。
CSSでできる例としては、フォントサイズや背景色などの「表示スタイル」、印刷・出力される際の「出力スタイル」、音声で読み上げを行う際の「再生スタイル」などが挙げられます。
 
CSSを使うメリットは、文書構造を保ったままスタイルのみを指定することができる点や、1つのCSSファイルで一括してスタイルを管理できる点、そして構文をシンプルにできるためSEO的にも望ましい等が挙げられます。
HTMLだけで1つ1つスタイルを指定しようとすると、ものすごく面倒くさいですし、メンテナンス性も悪いです。
一度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でここまでできます。とってもカンタンにできるので、ぜひ試してみてください。

 

この記事を書いた人

2014年に東京から静岡県三島市に移住してきました。現在は自宅でネットショップ運営の傍ら、記事の執筆をしています。

ニアセが気に入ったらフォローしよう!

こちらの記事も人気です。

  • 【消費体験を設計すること】ARASLモデルに見るネットと実店舗の融合【消費体験を設計すること】ARASLモデルに見るネットと実店舗の融合
    ネットも店舗も消費者にとって重要なチャネルです。それぞれが上手に連携し、消費者にとっての利便性が増し、結果として企業の売り上げ増加につながるようにするには、どのように考えればよいのでしょうか。   ネットと実店舗をまたがった消費体験の創造 ネットと実店舗には、それぞれ長所と短所があります。   ネット店舗の […]
  • コラボレーション施策を巧みに操る。「ice watch」が認知度を上げた戦略的マーケティングとはコラボレーション施策を巧みに操る。「ice watch」が認知度を上げた戦略的マーケティングとは
    こんにちは古田島です。   ユニクロ、H&M、forever21などファストファッションの流行により手頃な値段でおしゃれな値段でファッションを楽しむことができる時代になりました。ところでファッションの着こなしといえば、どこを意識されるでしょうか。ビシッと決まったジャケットや可愛いTシャツなどに目がいってしまいがちですが、フ […]
  • 【キンプリの世界へようこそ】プリズムのきらめきをECサイトに反映する簡単な方法。【キンプリの世界へようこそ】プリズムのきらめきをECサイトに反映する簡単な方法。
    はじめまして、yuunaです。 フルフィルメントアーティテクトというお仕事で荷主さんと倉庫さんの間にはいって、運用設計、システム導入&開発をおこなっています。今回はキンプリの世界観をECサイトに反映したお話をさせていただきます。キンプリを知らない人には伝わりずらい内容になっているかもしれませんが、どうぞお付き合いください。 &nbs […]
  • 「Ketchup!」楽天新店舗オープンまでの裏側を大公開!「Ketchup!」楽天新店舗オープンまでの裏側を大公開!
    こんにちは!2015年新卒入社の大村です。 楽天市場で10~20代女性向けスマホアクセサリーshop「Ketchup!(ケチャップ)」の店長として日々奮闘しています。 現在弊社では、インターネットにてスマホアクセサリーの総合店や男性向け、可愛いものを集めた店舗などを国内外に30店舗以上展開しています。   […]
  • 「商品説明の書き方」ネットショップ担当者なら知っておくべき商品説明のコツ「商品説明の書き方」ネットショップ担当者なら知っておくべき商品説明のコツ
    ネットショップ運営において、商品力は武器です。しかし、販売員のいないネットショップでは、手にとって商品を見てもらうことができません。   商品をうまく見せるために、美しい写真を撮り、分かりやすい動画を挿入し・・・それも大事な方法ですが、視覚というものは誤解を生みやすいのも事実。 写真とイメージが違う、動画と動きが違う。こ […]