CSSによるレイアウト

固定レイアウトとは

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

ぜひご覧ください。

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

字幕

このレッスンでは固定レイアウトでの定義と そのメリット・デメリットについて学びます 固定レイアウトは全体的な幅に固定され ブラウザのリサイズや デバイスの回転によって変化はしません ブラウザウィンドウの幅がどうなっているか どのようなデバイスで見ているのか といったことは考慮せず 純粋に決められたレイアウトで表示します ほとんどの固定レイアウトは ボディ要素またはサイトのコンテンツを囲む ラッパーに適用される 全体の幅の値で始まります センタリングされたり 一定のルールに基づいて 整列されていたりします 複数のカラムに分けられる場合 利用可能な幅を分割する形で 値が割り当てられます 要素と要素の間の間隔には基本的に マージングやパディングを使って制御され このような固定レイアウトができます ほとんどの固定レイアウトは デスクトップでの閲覧を念頭において 設計されています またそのターゲットとなる解像度は 年々広がる傾向にあります 古くは 800X600 という解像度を ターゲットにすべき という時代もありましたが 現在ではその倍以上のサイズの モニターも存在しています しかしブラウザーのウィンドウは 最大化していなかったり スクロールバーなどが 表示されていたりするため ターゲットの解像度はモニタサイズ そのものよりも 少し小さい値を設定します 多くの例で 960px を ターゲットとしています さて固定レイアウトを使うことについては 賛否両論があります 固定レイアウトは他のレイアウトよりも 少ないコードで作成でき 比較的簡単に作ることができます 決められたサイズだけを ターゲットにしているため 設計やレイアウトを行う際に 考慮しなければならないことが あまり多くありません 表示要素が必ず所定の位置に固定されるので ピクセルパーフェクトなレイアウトに 向いています どのような環境でも 固定の表示になります もちろんいくつかの欠点が存在します その性質上小さいブラウザウィンドウや スマートフォンなどのデバイスに 最適化できません 大きいモニタでは固定レイアウトは 小さく見えてしまい その周囲に大量の空きスペースが できてしまいます 要素間のスペースを修正する際 小さな変更でもレイアウトが崩壊する 可能性をはらんでおり ちょっとした修正でも 徹底的にテストしなければならないことを 意味します 固定レイアウトを使うかどうかを決定する際 これらの点を念頭に置く必要があります 近年モバイルデバイスの急速な普及によって 固定レイアウトの採用は 数多くの潜在的なユーザーを 無視することを意味します そのような環境を ターゲットに考慮する必要がある場合は スクリーンサイズ、向きなどの 環境によって変化するレイアウトを採用した方が 無難といえます このレッスンでは固定レイアウトの定義と そのメリット・デメリットについて学びました

CSSによるレイアウト

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

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

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

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

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