Column

こんにちは！ iMedioセミナー講師の森 和恵です。

10月に入り、秋本番となりました。
今年はいろいろと新しい話題が多くて“勉強の秋”になってます。

さて。今回は、＜レスポンシブWebデザイン＞についてです。
Googleさんのモバイルフレンドリー対策などもあり、
Web制作の技として王道になってきましたね。

「レスポンシブWebデザイン」とは、マルチデバイス※に対して
適切なレイアウトでWebページを表示することです。

※“マルチデバイス”とは、パソコン・タブレット・スマホなど、
ウェブを見るのに用いる機器（デバイス）が、多数ある（マルチ）こと

あなたの好きなサイトをパソコンで見ている時に、ウインドウの幅を
細くしてみてください。画面の右端が切れてしまったサイトはNG。
切れずにレイアウトが変化し、細いサイズになっても見やすいままならOKです。

そう。細いサイズ＝スマホで閲覧するサイズです。画面サイズを問わずに
常に見やすい状態を保っているサイトが、「レスポンシブWebデザイン」の
技法を使っているのです。

話が長くなってしまいましたが、「レスポンシブWebデザイン」の技法にも、
変化がでています。講座を担当しているので、そういった情報は細かく
ウオッチしています。

最近気になった話題を３つ紹介しますね。

【１】画像形式“SVG”が、レスポンシブに便利らしい。

Illustratorと同じくベクターデータである“SVG”画像は、拡大しても
劣化しません。縮小してもつぶれにくいデータです。レスポンシブしたい時には
うってつけですね。

ブラウザーの対応状況がよくなってきたことを受けて、ロゴやアイコンなど
図版にSVGを用いるケースが増えてきました。

【２】youtubeなど、レスポンシブ対応が面倒だったパーツに“Reframe.js”。

Reframe.js（ https://dollarshaveclub.github.io/reframe.js/ ）という、
便利なスクリプトが登場したようです。

使い方は簡単。reframeのJSファイルとCSSファイルを読み込み、
レスポンシブさせたい要素につけたidやclass名を指定するだけです。

【３】<img>要素に“srcset”属性が加わるらしい。

次にくる HTML5.2 では、<img>要素に“srcset”属性が加わろうとしています。
（ http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset ）

srcset属性を用いると、表示する画面の幅ごとに異なる画像が指定できます。
広い画面では大きな画像、狭い画面では小さい画像を指定し、読み込ませることで
適切な量のデータを送ることが可能になります。

ちなみに、Can I use( http://caniuse.com/#search=srcset )をみると、
IE以外はほぼサポート済みだそうですね。そろそろ、使っているサイトも
増えてくるころかもしれません。

ということで、担当講座のご紹介。レスポンシブWebサイトの作り方について
学んでみませんか？

“レスポンシブで始める、モバイルフレンドリーなマルチデバイス対応サイト制作”（10/21）
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=21817

↑のリンクページでは、自分のサイトがモバイルフレンドリー対応かどうかを
チェックするGoogleさんへのリンクもあります。よかったら、試してみてください。

ではまた、次回お会いしましょう。

r360studio 森 和恵 (^^)

【Twitterにて情報配信中】（ https://twitter.com/r360studio ）
【 担当講座一覧 】（ http://r360studio.com/seminar/ ）