カテゴリー: CSS

iPhone SEと新型iPad proが発売されました。
見た目のデザインは従来のものとほとんど変わらないようです。
iPad Proからは12.9インチと9.7インチが登場。「ほとんどのポータブルPCをしのぐ驚異的なパワー」と豪語するほどのスペックを搭載。いよいよノートパソコンを使わなくなる時代が迫ってきている予感を感じさせます。

そしてモバイルデバイスの新商品が発売されると制作者が気になるのはメディアクエリ。

iPhone SEは4インチのRetinaディスプレイと6sからサイズダウンしました。
ディスプレイサイズが1,136 x 640ピクセル解像度、326ppiなのでiPhone 5sと同じになります。

iPhone SE

9.7インチiPad Proは2,048 x 1,536ピクセル解像度、264ppiなので従来のipad、Air、miniなどと同じで12.9インチは2,732 x 2,048ピクセル解像度、264ppiなため1024pxになります。

12.9インチiPad Pro

9.7インチiPad Pro

ちなみに上記はポートレイトモード(縦画面)のみでランドスケープモード(横画面)は
iPhone SE：568px
12.9インチiPad Pro：1366px
9.7インチiPad Pro：1024px
となります。

インスタグラムのように画像にフィルタをかけられる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版もあります。

参考記事