CSSによるレイアウト

レスポンシブレイアウトとは

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブレイアウトの定義と、そのメリット、デメリットについて学びます。
講師:
04:55

字幕

このレッスンでは レスポンシブレイアウトの定義と そのメリット、デメリットについて学びます Webデザインに携わる上で 必要なことが一つあるとすれば それは常に進化をし続けるWebについて 学び続けることでしょう ここ数年間でユーザーは非常に多様な方法で Webを使うようになりました スマートフォンやタブレットは急速に普及し あらゆるWebサイトはこれまで以上に 細分化された画面サイズ 解像度 ブラウザ およびデバイスの 種類によって閲覧されています デザイナーはこのように多くの環境に対して 一つ一つ可変レイアウトを設計 デザインするか あるいはレスポンシブレイアウトを 採用するかといった選択肢を持っています さてレスポンシブレイアウトとは何でしょうか レスポンシブレイアウトは使っている環境に 対応するレイアウトです デスクトップ上では大きなスクリーンを ターゲットにして 高い解像度のグラフィックやレイアウトを デザインすることができます タブレット上ではデバイスの 種類や向きに基づいて レイアウトと機能を変更することができます スマートフォンではさらにいくつかの要素を 非表示にするなどして 小さいサイズに基づいて レイアウトを変更したり また現在の位置情報などスマートフォンの 機能を活用したりすることもできます ここに表示している3つのレイアウトは 異なるスクリーンサイズで見ていますが 全く同じページです 複数のレイアウトを一つ一つゼロから 作成しているようにも見えますが 実はそうではありません レスポンシブレイアウトは 様々なスクリーンやデバイスに 適切なレイアウトを提供するために レイアウトテクニックと複数の レイアウトタイプを組み合わせて構築します このことを念頭において ここでレスポンシブレイアウトを使うときに 考慮すべきいくつかのメリットと デメリットをご紹介します レスポンシブレイアウトを使う最大の理由は ユーザーのスクリーンサイズや デバイスに基づいて コンテンツを体験する方法を制御できることです これにより環境に応じて最適化された コンテンツを提供することができます またコンテキスト(文脈)に基づいて コンテンツを再編成したり 表示、非表示を 切り替えたりすることもできます デスクトップユーザーには デスクトップ向けのレイアウトを モバイルユーザーにはモバイル向けの レイアウトを提供できます つまりレスポンシブレイアウトを使うと ほとんどのケースではモバイルデバイス用に 専用のサイトを用意したり リダイレクトしたりする必要が ないことを意味します レスポンシブレイアウトの欠点は そのプランニングや設計において 他のレイアウトと比べて はるかに 多くの作業を必要とすることです 複数のコンテキストを 同時にデザインするために より高度な作業が必要です また一つのレイアウトに対する失敗が 他のレイアウトにも影響するため 複数の箇所に対して手直しが 必要になることもあります さらにHTMLやCSSの 新しい機能に依存しています そのため古いブラウザやデバイスを サポートしたい場合は そのためのフォールバック機能を 提供する必要があります モバイル特有の機能を使ったり 最適化されたデザインを作るためには 少なくとも中級以上のCSSと JavaScriptが必要になります 現在Webサイトの制作者は コンテンツを届けるために あらゆるデバイスを考慮しなければ 多くのユーザーを切り捨ててしまう 危険性があります スマートフォンやタブレットは もはや無視することはできないほど 多くのユーザーに利用されています レスポンシブレイアウトを習得するには いきなり全てのことを 把握しようとするのではなく まず固定レイアウトや可変レイアウトについて きちんと理解をしておくことが大切です これらの他のレイアウトに関する知識が レスポンシブレイアウトを作る上でも 役にたつことでしょう このレッスンでは レスポンシブレイアウトの定義と そのメリット、デメリットについて学びました

CSSによるレイアウト

このコースでは、大きく3種類に分かれたCSSによるレイアウトについて解説します。ピクセルパーフェクトなデザインを実現しやすい固定レイアウト、スクリーンやウィンドウのサイズ変更に対して変化する可変レイアウト、ユーザーの環境に応じて最適なレイアウトを提供できるレスポンシブレイアウトなどについて丁寧に説明します。

2時間40分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。