Menu

Column

TOP > マガジン > スタッフコラム > レスポンシブWebデザイン、最近の話題について

スタッフコラム

講師 森コラム
2016年10月05日

レスポンシブWebデザイン、最近の話題について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【3】<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/