製品モデルの比較表をjQueryとCSSで実装する方法

アップルのサイトなど、複数の製品を販売している企業のウェブサイトなどでよく見かける商品比較表をjQueryとCSSを利用して実装できるコードが配布されています。

製品のスペックの違いなどをユーザーに分かりやすく紹介するにはとても便利です。また横にスクロールできるので商品が複数あっても見やすく、また絞り込みできるようになっていてユーザーフレンドリーな設計になっています。

デモ・ダウンロードはこちら

設置のご相談はこちら

インスタ風の画像効果をCSSで表現する

インスタグラムのように画像にフィルタをかけられるCSS。

使い方

headタグ内に以下を挿入。

適用させたい画像にクラスを追加。

クラス一覧
1977: class=”_1977″
Aden: class=”aden”
Brooklyn: class=”brooklyn”
Clarendon: class=”clarendon”
Earlybird: class=”earlybird”
Gingham: class=”gingham”
Hudson: class=”hudson”
Inkwell: class=”inkwell”
Lark: class=”lark”
Lo-Fi: class=”lofi”
Mayfair: class=”mayfair”
Moon: class=”moon”
Nashville: class=”nashville”
Perpetua: class=”perpetua”
Reyes: class=”reyes”
Rise: class=”rise”
Slumber: class=”slumber”
Toaster: class=”toaster”
Walden: class=”walden”
Willow: class=”willow”
X-pro II: class=”xpro2″

CSSのダウンロードはこちら

Sass版もあります。

参考記事

セントパトリックスデー用のフリー素材。

3月16日はアイルランドの祭日「セントパトリックスデー」です。
日本ではあまりなじみはありませんが、アメリカなどではその象徴するカラーである緑の物を身につけてパレードに参加するのが風習となっています。

今回は「セントパトリックスデー」にちなんだフリーの素材が配布されていたのでご紹介。

ダウンロードはこちら

横浜元町では3月12日(土)に、セントパトリックデー・パレードを開催するそうです。日本ではここ数年、ハロウィーンなど欧米文化のお祭りを取り入れている傾向があるので、このセントパトリックデー・パレードも盛り上がるかもしれませんね。