WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

くりりん

2018/02/12

CSSだけでInstagramのようなフィルター加工ができる、「Instagram.css」の使い方

投稿者: くりりん
カテゴリー: マークアップ >CSS

本サイトでもよく紹介に上がる「Instagram」。写真に加工を一手間加えるだけで味が出ますよね。
そんな写真加工をCSSだけでできる「Instagram.css」についてご紹介したいと思います。

Instagram.cssには41種類のフィルターが用意されているので簡単に加工が施せます。
導入手順もあっという間で、とりあえず加工の色合いを見てみたい方にもおすすめです。

対応ブラウザ

1点注意として、IE(インターネットエクスプローラー)は対象外となっております。
その他のブラウザの、Google Chrome、Firefox、Opera、Safariが対応しているので確認する際はご注意ください。

導入手順

まずは公式サイトから、CSSファイルをダウンロードしましょう。

GithHubからダウンロードをして

ダウンロードしたzipファイルを解凍し、入手したCSSのファイル「instagram.css」をHTMLの<head>~</head>内で読み込みます。
※CSSが圧縮された、「instagram.min.css」でもOK!

<head>
<link rel="stylesheet" href="instagram.css">
</head>

フィルターの種類

あとはフィルターを施したい画像をhtml要素で囲み、クラスを付与します。

<img src="img/pic_01.jpg" alt="" class="class="filter-[filter-name]">

[filter-name]の部分に入るものは以下になります。

  • filter-1977
  • filter-aden
  • filter-amaro
  • filter-brannan
  • filter-brooklyn
  • filter-charmes
  • filter-clarendon
  • filter-crema
  • filter-dogpatch
  • filter-earlybird
  • filter-gingham
  • filter-ginza
  • filter-hefe
  • filter-helena
  • filter-hudson
  • filter-inkwell
  • filter-kelvin
  • filter-juno
  • filter-lark
  • filter-lofi
  • filter-ludwig
  • filter-maven
  • filter-mayfair
  • filter-moon
  • filter-nashville
  • filter-perpetua
  • filter-poprocket
  • filter-reyes
  • filter-rise
  • filter-sierra
  • filter-skyline
  • filter-slumber
  • filter-stinson
  • filter-sutro
  • filter-toaster
  • filter-valencia
  • filter-vesper
  • filter-walden
  • filter-willow
  • filter-xpro-ii

公式サイトの方にフィルター名と色合いが一緒に載っているので、好みのフィルターのクラス名を探してみてください。

実際に使用してみたのがこちらになります。

■filter-1977

■filter-mayfair

■filter-crema

何も加工を施していないものと比べてみると、一気におしゃれ度が増しました!
写真加工の参考にも是非試してみてください。

あわせてこちらの記事もどうぞ♪
難しい審査はナシ!Instagramの写真をWebサイトへ表示する方法
トーンカーブで簡単!Photoshopでインスタ風写真を作ろう

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ