CSSによるレイアウト

可変レイアウトとは

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

ぜひご覧ください。

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

字幕

このレッスンでは可変レイアウトの定義と そのメリット、デメリットについて学びます 可変レイアウトはブラウザ またはビューポートの幅に基づいて 変化するレイアウトを作成することができます リキッドレイアウトと呼ばれることもあります ブラウザのサイズが変更された場合 可変レイアウトはその中に含まれる 全てのコンテンツの領域を増減します これによりスペースを活用した レイアウトを設計でき ブラウザのウィンドウのサイズに基づいて ユーザーに異なる見栄えを 提供することができます 可変レイアウトを設計するには 固定レイアウトよりもより慎重に 全ての要素の関連性を考慮する必要があります 一方のウィンドウサイズで見た時と もう一方のウィンドウサイズで見た時の 見た目は一致しません このように可変レイアウトは 柔軟なレイアウトを実現できる一方 固定レイアウトと同様にメリット デメリットがあることを意味します 最大のメリットはユーザーの解像度や ウィンドウサイズによって レイアウトを変化させられるということです ユーザーがスクロールしたり ズームしたり サイズ調整を行ったりしなくても 見た目を変えられます それはまた狭いウィンドウサイズでも 横スクロールバーが表示されないようにできる ということでもあります デザイナーは固定レイアウトのように ピクセルパーフェクトな デザインをしなくても構いません どの要素がどのくらいの幅か ということよりも それぞれの要素がどのように関連しているのか ということにフォーカスする必要があります もう一方では全てを制御した デザインを作ることはできないため ユーザーがどのような見栄えで コンテンツを閲覧するかは 完全にコントロールすることができません 完全なコントロールができない代わりに 解像度による変化を手に入れられる という トレードオフだとお考えください また特に非常に広い解像度において 余分な空白が発生してしまいます 小さい解像度で最適なレイアウトを作成しても 広い解像度で見た時に多くの場合 間延びした印象になってしまいます そのため可変レイアウトを作成する時は ある程度の解像度を想定しておき その最小と最大の幅を 決めておくことが一般的です これは可変レイアウトの設計が 多少の困難を伴うことを意味しています 可変レイアウトの製作には より入念な設計と 比較的複雑なコードが必要になります このレッスンでは可変レイアウトの定義と そのメリット、デメリットについて学びました

CSSによるレイアウト

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

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

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

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

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