CSSによるレイアウト

CSSによる固定レイアウトの実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSを使って固定レイアウトを実装する方法について学びます。
講師:
10:44

字幕

このレッスンではCSS使って固定レイアウトを 実装することについて学びます 画面はエディタでサンプルの グリッド.htmlを開いているところです CSSを書く前に2つのことを 確認しておきましょう 1つはこのウェブページの構造です 冒頭にあるスタイルを過ぎて 下にスクロールをするとまず htmlの中身にはヘッダーがあり そして続いてcol1をクラスに持つ セクションがあります 内容はテキストがたくさん入っています 続いてそのcol2をクラスに持つ aside要素があり 一番下にはフッターがあります これがウェブページの基本的な構造です 2つ目にこのページを ブラウザで確認してみます ブラウザを開きます 素晴らしいデザインではありませんが 基本的な構造については 確認することができます これに対してCSSを書いていきましょう エディタに戻りスタイルを見るために 上にスクロールします ここでは28行目にレイアウトという コメントがあります ここにレイアウトのための スタイルを書いて行きます その前にボディ要素のスタイルについて 修正を加えましょう このウェブページは全体の幅を 960pxとしていますので ボディセレクタに対して幅960px という指定を書き加えます そしてページ全体を中央に揃えるため マージンに上が0 左右がauto 下が2emになるように 値を設定します 下のマージンに2emを設定しているのは ページの一番下が切れているように 見えないようにするためです レイアウトに戻り コーディングを始めましょう ウェブページで スタイリングしようとする 要素については 予めこのようにサイズを 決定しておくと便利です サンプルのフィックスドプランニング.ai というイラストレーターファイルで 各要素のサイズを確認することができます この値を基にコーディングしていきましょう エディターに戻ります 始めにヘッダーのスタイルを書くため ヘッダーセレクターを定めます 最初の行では背景色を適用します ここで設定する色は 特に意味を持ちませんので お好みの色に 書き換えてもらってもかまいません ここではRGBそして数値の76,67,65 この値を設定します 次の行に行きましょう 次はmargin-bottom 下に対するマージンを設定します これはヘッダーとその下にあるコンテンツとを 分離するために設けるもので 16pxと設定します これはフォントサイズを 基準とするものですので 1emと定義することもできますが グリッドに基づいている ということが明確になるよう あえて16pxという値を明示しておきます 高さ heightプロパティには 96pxを指定します 先ほどのプランでは ヘッダーは高さが128pxと 規定していましたが実際には パディングとheight 高さを加えた値が この高さの値になりますので 注意しましょう 幅についても同様の考え方です CSSに戻り96pxは高さのため heightプロパティのためですので さらにパディングを追加します パディングは上に32px右に0下に0 左に32pxです つまり32足す96で 最終的に必要とするヘッダー全体の高さが 128pxなります 左側のパディングは ページ全体に与えたい 32pxのパディングとなります さてヘッダーの定義が できましたので 次の要素である メインカラムに移りましょう メインカラムのために col1のクラスセレクタを書きます これはメインカラムに使われている クラス名です このウェブページには カラムがセクション要素と aside要素しかありませんので それぞれの要素名を使って セレクタを作ることもできますが ここではクラス名を使います メインカラムは左方向にフロートさせます そしてここでは画面の左側にcol1 画面の右側にcol2が来るようなレイアウトを 想定していますのでメインカラムは左方向に フロートです そしてヘッダーと同じように padding-left;に32pxを設定します メインカラムの幅については プランニングで 512pxと定めていました そのため次のように widthプロパティで 幅を512pxに設定します 続いてcol2のスタイルを 指定していきます col2のクラスセレクタを作ります これはすなわち サブカラムのクラスセレクタです 右方向にフロートさせます フロートライト そして2つのカラムを横に並べますので このサブカラムは 右側に配置されることになります プランニングに戻ってみるとここでは 右側にパディングが32px そしてサブカラムの幅は 352pxであることがわかります コードに戻り幅をwidthプロパティで 352pxに設定します そしてpadding-rightに 先ほどと同様32pxを設定します さらにタイポグラフィのために やっておくべきことがあります フォントサイズを90%にします メインカラムのテキストよりも サブカラムのテキストが少し 小さくなってほしいからです 最後に行の高さをline-height プロパティで1.6にします これで行間がちょうど良い見栄えにします 最後にフッダーの記述スタイルを記述します フッターセレクタを書き スタイルを定義していきます 背景色を定義しましょう 繰り返しますがここで設定している 色が気に入らなければ 自由に変更していただいてOKです ここではRGB関数を使って 100,98,102と設定します 次の行でheight 高さを80pxに設定します プランニングではフッターの高さを 指定していませんでしたが ここで80pxとしました この値は16pxという 基本単位で割り切れる値です 現在フッターの中には 何もコンテンツがありません もしコンテンツを入れる場合は パディングを少し追加し 高さの値を調整する必要があります ここまでフロートを使って 2カラムのレイアウトを 実装してきましたので ここでやるべきことが 1つあります フロートのクリアです ここではクリアプロパティの値に bothという値を使います 再度ブラウザを開いてリロードしてみましょう いったんCSSを保存しブラウザを開きます リロードすると 大きな問題はなさそうに見えますが 少しテキストの間が詰まって タイトに見えないでしょうか これは16pxのグリッドに基づいて 要素やカラムが配置されているにも関わらず テキストがそうなっていないのが原因です つまりカラム自体は意図通り配置されているのに テキストはそれに揃っておらず 見栄えとしての統一感が欠けている状態です そのためレイアウトに必要なことは 要素の幅を定義するだけではありません もっと全体を通して見た時のことを 考えなければいけません もっと全体を通して見た時のことを 考えなければいけません コードに戻りタイポグラフィの部分にある スタイルのコメントを解除します この部分のスタイルと この部分のスタイルのコメントを解除します これを保存し再度ブラウザをリロードすれば 随分見栄えが良くなったことがわかります タイポグラフィのためのスタイルを 有効にすることによって 1emつまり16pxのグリッドに沿って テキストはレイアウトされました 詳細を確認したい場合は コードに戻って ここにあるスタイルをチェックしてください さほど長いコードではありません 4つのセレクタだけです ここに書かれている行の高さ マージン フォントサイズなどは 16pxのグリッドに沿うよう計算されています これでCSSによる固定レイアウトの 実装は完成です ここでの重要なポイントは 実際にCSSを書く前のプランニングで どのようなレイアウト グリッドを実現するかを 決めておくことです このレッスンではCSSを使って 固定レイアウトを実装する方法について 学びました

CSSによるレイアウト

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

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

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

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

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