インスタ風の画像加工ができるCSSライブラリ

2016年2月25日

写真専用共有サービスのInstagram（インスタグラム）、最近では芸能人のアカウントも増え、好んで使っている方も大変多いですよね。 Instagramの魅力のひとつが、「写真がオシャレ」というところにあるかと思います。

今日は、そんなInstagramで載っていそうな、写真加工ができるCSSライブラリ「CSSGram」をご紹介します。このサイトに出てくるCSSのクラスを指定するだけで画像が加工されて表示されます。

どんな加工をしたいかは、サイトにアクセスした際にサンプルが表示されているので、そこでチェックしてくださいね。

「CSSGram」の使い方

CSSGramのライブラリを使用する方法は2つあります。

オンラインから指定して使う

一番簡単なのは、オンライン上のライブラリをlinkタグで指定することです。CSSを適用させたいHTMLファイル内のheadタグの中に、下記のlinkタグを指定しましょう。

「CSSGram」のライブラリをダウンロードして使う

ローカルで適用させたい、ライブラリファイルを取得したいという場合は、下記の手順で行ってください。

1.CSSgram のライブラリファイルをダウンロードする
2.ダウンロードしたCSSファイルを、linkタグなどを使って指定したいHTMLファイルに適用させます。
3.あとは画像に対して、適用したい加工をclass名で指定するだけ

class名で指定する際は、下記を参考にして指定してください。

ちなみに、サンプル画像の上に表示されている「#nofilter」「1977」「Aden」などが、そのままCSSを反映させるためのclass名に該当します。ファイルサイズも軽く済ませることができ、さらにclass名を変えるだけで1枚の画像でいろんな加工を楽しむことができますので、ぜひ試してみてくださいね！

style="margin-bottom: 60px;"今日の記事を試してみたい方は、インターネット・アカデミーのホームページ制作講座の範囲内で対応することができますので、受講者の方はぜひチャレンジしてみてください！