CSSによるレイアウト

可変レイアウトの実装例

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
可変レイアウトについてより深く理解するために、desolveorgというサンプルサイトのレイアウト実装プランに基づいて、実際に実装を行った例について紹介します。
講師:
07:44

字幕

このレッスンでは 可変レイアウトについて より深く理解するために dissolve.orgという サンプルサイトの レイアウト実装プランに基づいて 実際に実装を行った例について 紹介します 画面はエディタでサンプルファイルの index.htmとmain.cssを それぞれタブで開いているところです CSSファイルに切り替えましょう スクロールし167行目を表示します 167行目にはボディセレクタがあります このボディセレクタのwidth 幅に90% max width 最大幅に1,180px minimum width 最低幅に860pxを 設定しました この値はあくまで最大幅 最小幅の例です 多くの場合この値は好みで 変更しても問題ないでしょう しかし少なくとも 860pxより小さい幅では いくつかの理由からレイアウトが 崩れてしまうことがわかっています ブラウザに切り替えて htmlファイルを開いてみましょう 実際にhtmlファイルを開いています ページ上部の ナビゲーションに注目して下さい 横1列になって表示されています これらの左右には まだ余裕があるように見えます これよりも幅が小さくなると 表示がはみ出してしまいそうです そのため最小幅を 860pxに設定しています コードに戻りましょう 下にスクロールしarticle要素と aside要素を示します CSSファイルの冒頭のコメントにあるように article要素の幅は70.1% aside要素は19.1% 両サイドのパディングには3.9%が 設定されています article要素は 左側に表示されるカラムですので 左にpaddingを持っています そしてaside要素は 右側に表示されるカラムですので 右側にpaddingを持っています これら2つの要素は それぞれ左右に フロートしていますので カラム間のスペースを 設定する必要ありません さらにヘッダー要素 メインナビクラス バナークラスの それぞれに整列のための プロパティを追加しています 下にスクロールしてきましょう 199行目にはヘッダー要素があります ここではパディングレフトに 3.9%を指定しています メインナビクラスも同じことです 237行目に メインナビクラスがありますが ここでもパディングレフト 3.9%を指定しています また更にスクロールし294行目に マナークラスがありますが ここでも同じように パディングレフトに3.9%が 指定されています これらのセレクタは ボディタグに含まれているため 同じ分だけパディングが必要でした もしさらにタグがネストされて マージンやパディングを 持っていた場合には この値を再計算する必要があるでしょう 一旦ブラウザを開きます ページ下にある 2つのニュースクラスが 適用された要素は 横並びで表示されており カラム内のパディングと カラムとカラムの間のスペースを マージンで指定し カラムの幅も決めて これらの要素は 美しくレイアウトされるように する必要がありました エディタに戻りましょう ここで紹介する値は必ずしも 唯一の正解ではありませんので 正常に表示されていれば 多少値が違っていても問題はありません 下にスクロールし 360行目にあるニュースクラスセレクタを みつけます これに幅が44% パディングが2% マージングライトに4%を指定しています そして最後に コンテントクラスの中にある画像に対して 表示時は実寸で ブラウザのウィンドウが縮小されたら 画像も縮小されるように スタイルを適用する必要がありました ここでは ちょっとした工夫を行っています 画像のマックスwidthプロパティに 100%を設定することで その親要素の幅と同じ大きさに広がる というテクニックがあります しかしここでは 100%という値は使っていません 何を意味しているかお見せしましょう 少し長いですが650行目まで スクロールします 650行目に コンテストイメージセレクタがありました ここではマックスwidthプロパティに 82%を指定しています なぜ82%なのでしょうか 100%を指定すると この画像が置かれている親要素 つまり右側のカラムと 同じ幅になってしまいます しかしそれはベストな見た目ではありません ウィンドウサイズを縮小した時に 画像が大きすぎる表示になってしまうのです そこで同じ画像を2つ並べて原寸の幅と パーセンテージの幅を見比べながら 大体同じ大きさに表示されるのが 82%であるという検討を行いました さてhtmlについても コードを変更する必要がありましたので タブを切り替えます 77行目と82行目を見てください こちらではイメージ要素から heightプロパティ 高さのプロパティが 削除されていることがわかります widthプロパティーは残っています 実は削除しても問題はありません ブラウザの解釈としては まずhtmlに指定されている 幅200pxという指定を採用します その後CSSによってそれが上書きされます つまり200pxという値が カラムの幅の82%を超えない限りは 200pxで表示されるということです 高さについては自動的に計算され 正常な比率で適用されます 最後に確認してみましょう ブラウザウィンドウを広げると 画像は実寸で表示され 縮小をすると 最大の幅は82%という指定に従って 画像の大きさが変化しています 可変レイアウトを作る過程では 決められた正しい答えが 1つになっているわけではありません コンテンツの関係性を考えながら 美しいレイアウトになるよう 慎重に設計をすることが大切です このレッスンでは可変レイアウトについて より深く理解するために dissolve.orgというサンプルサイトの レイアウト実装プランに基づいて 実際に実装を行った例について 紹介しました

CSSによるレイアウト

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

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

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

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

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