インターネットサービス会社様にご利用いただきました。

宮城県のインターネットサービス会社様にご利用いただきました。

rush

・ご利用いただいたプラン:スタンダードコース

この度はサクウェブのご利用、誠にありがとうございました。

サクウェブは様々な業種の会社様にご利用いただいており、コーポレートサイトからブランド紹介ページ等まで幅広くご活用いただけます。
格安で短納期対応、スマホでの閲覧も見やすいので大変ご好評いただいております。

サクウェブの詳細はこちら

iPhone SEと新型iPad Proのメディアクエリについて

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

@media screen and (max-width:320px) {

/*iPhone 5, 5s, seに適用させたいCSSを記述*/

}

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

@media screen and (max-width:1024px) {

/*12.9インチiPad Proに適用させたいCSSを記述*/

}

9.7インチiPad Pro

@media screen and (max-width:768px) {

/*9.7インチiPad Proに適用させたいCSSを記述*/

}

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

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

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

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

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

設置のご相談はこちら

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

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

使い方

headタグ内に以下を挿入。

<link rel="stylesheet" href="aden.min.css">

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

 <!-- HTML -->
      <figure class="aden">
        <img src="../img.png">
      </figure>

クラス一覧
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日(土)に、セントパトリックデー・パレードを開催するそうです。日本ではここ数年、ハロウィーンなど欧米文化のお祭りを取り入れている傾向があるので、このセントパトリックデー・パレードも盛り上がるかもしれませんね。