「不思議」「怖い」「変」を普通に考える。タイトルバナー

補足説明※28「レスポンシブWEBデザイン」


補足 簡単に言ってしまえば、「PC」「タブレット」「スマートフォン」の、それぞれに画面サイズが異なるデバイス(端末)で、そのそれぞれの画面サイズにWEBサイトを最適化(サイズ、配置)して表示する技術です。

基本的には次の3つの技術的要素で実現されます。

(1)「メディアクエリ(Media Queries)」
■ウインドウの幅や画面解像度、デバイスの向きなどの条件によって、表示のスタイルを変えてくれます。
(2)「フルードグリッド(Fluid Grid)」
■WEBページの構成要素を任意のグリッドに沿って、配置してくれます。各要素の大きさを伸び縮みさせる「リキッドレイアウト」の手法を組み合わせたものです。
(3)「フルードイメージ(Fluid Image)」
これはウインドウの幅に合わせて画像のサイズを大きくしたり、小さくしたりする手法です。

これらの3つの機能は「CSS(カスケーディング・スタイル・シート:Cascading Style Sheets)3」の新たな機能で、CSSファイルに記述する事によりHTMLファイルを適応するスタイルに切り替えます。HTMLは最新の5で記述する事がこれからの主流になるでしょうが、CSS3の技術要素はHTMLとは独立していますのでHTML4でも問題はありません。しかし、やはりこれからはHTML5でしょうね。

このCSS3が各デバイスでの表示をそのサイズに適切な形で最適化してくれます。しかし、メリットばかりの技術ではありません。当然ながら、デメリットもあります。それらの主なものを参考までに以下にまとめておきます。

【メリット】
●デバイスごとのHTMLファイルを用意する必要はなくひとつだけ。
●サイトのURLはひとつだけ。
●閲覧者側の画面サイトに合わせて、表示を最適化できる。
●CSSとHTMLのみで製作できる。

【デメリット】
●既存のPCサイトを活かすことが難しい。作り直しが必要。
●デザイン面では各デバイスに最適化できない場合がある。
●サイト設計やデザインなどの事前準備に時間がかかる。
●一部の古いブラウザは対応していない(IE8以前など)

これはデメリットとも限らないのですが、サイト制作の作業フローが変わります。これまではデザインカンプ(案)が決まってしまえば、それに忠実なコーディングを行えばよかったのですが、レスポンシブWEBデザインでは、前述のように「事前準備」として、「全体の設計」「各デバイスごとの表示」を決めて置き、それを基に作り上げていきますので、デザイン主体の作業からプランニング主体の作業へと変わります。

詳細は「レスポンシブWEBデザイン」でWEB検索すれば、今(2014年時点)では様々な事例が閲覧できます。おそらく、これからのWEB製作の主流になっていくものと思います。

補足説明 目次へ



【商品検索】Powered by Amazon

↑「すべて表示」をクリックするとAmazon.co.jpの検索結果一覧に移動します。

■これからギターを始められる方のご参考にでもなれば。
木の音 バナー
「雑学を楽しむ」サイト
テキトー雑学堂 バナー
「花を楽しむ」サイト
花を飾る バナー


■サイトポリシー ■プロフィール
■お問い合わせ
ページトップへ戻る

Design by Megapx / Template by s-hoshino.com
Copyright(C) Ureagnak All Rights Reserved.