CSSによるレイアウト

カラムやスペースの設計

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グリッドを使った固定レイアウトプランにおいて、カラムやスペースを設計する方法について学びます。
講師:
09:26

字幕

このレッスンではグリッドを使った 固定レイアウトプランにおいて カラムやスペースを設計する 方法について学びます イラストレーターでサンプルファイルの フィックスドプランニング.aiを開きます まずメインカラムについて考えていきましょう このページではテキストが 多く用いられる予定で 見出しや本文がページの中で 重要なコンテンツになる ということを示しています ここでは電卓を使ってカラムの間に どのくらいスペースを設ければ 読みやすいかを考えます 英語圏では一般に読みやすいとされている 一行の幅は66文字分であると考えられています 英語圏での一文字の幅は 全角文字の半分ですので つまり0.5emになります そのためここでの基本単位である デフォルトのテキストサイズである 16pxであれば1文字の幅は 半分の8pxになり それに66文字をかけた値が幅になります 計算してみましょう 電卓で 一文字の幅である 8に対して66をかけます その答えは528pxになります 以上のことからメインカラムは 528pxとして左側に配置します イラストレーターに戻って この部分に注目してください いくつか塗りがついた 矩形が配置されています これは料理番組であらかじめ 調理しておいたものを 取り出すように この先の編集を簡単にするためのものです この真ん中のブロックをAltキー macではoptionキーを押しながら ドラック&ドロップで複製をして 幅を528pxそして高さを1200pxに設定します 矩形のサイズを設定できました 位置を調整しておきましょう メインカラムはレイアウトグリッドの グリッド上に並んでいます ここで思い出しておきたいのは グリッドは大きく分けて12カラムに 分かれているということです このように少し太いグリッド線で 分けられているカラムが 全体で12個あります つまりコンテンツのエリアが このグリッド上に 並ぶ必要がある ということを示します メインカラムを ドラッグ&ドロップで大きくして このグリッド線に 沿うように設定しましょう これでメインカラムは 1 2 3 4 5 6 7カラム分の 大きさになりました ここで先ほど66文字分の 幅にしたかったのでは と疑問に思うかもしれません しかしあくまでそれは目安です カラムはそれに近い値であれば 問題ありません 大まかにだいたいメインカラムを どのくらいの大きさにすればよいか という基準になる値を 決めているわけです 最終的にはグリッドに基づいて 全てを決定していくことになります さらに付け加えると ページ全体のパディングと 2つのカラムの間の マージンが必要になるため この大きさがそのまま そのコンテンツの幅になるわけではありません さて2カラム目をレイアウトしましょう メインカラムを先ほどと同様複製して そしてグリッドに揃えます グリッドに揃えることができたら どちらのカラムか 判別がつけられるように スポイトツールで 違う色を選択します これでメインカラムと サブカラムの区別がつきます レイアウトの基礎ができました グリッドに基づき7カラムのエリア そして右側に5カラムの エリアを作りました 意図したものではありませんが 7対5という比率は 白銀比と呼ばれる美しい比率です それではここまで完成したレイアウトを 確認してみましょう これらのエリアは実際に どのくらいの幅になっているのでしょうか 左のカラムをクリックして 変形パネルをクリックすると 左のカラムは幅が560px 同様に右のカラムは 幅が400pxになっていることがわかります テキストを複製してメモしておきましょう テキストを先ほどと同様複製し 左のカラムは560px そして右のカラムは400pxです しかし全体の幅をそのまま ページの幅として扱うと 見づらいため パディングやマージンのような スペースを作る必要があります まずパディングを作ります この黄色の小さなブロックを複製して パディングを設けましょう 繰り返しになりますが パディングもグリッドに沿って 配置する必要があります 一つの細かいグリッドの間隔は 16pxですので これを利用します ただしこのようなレイアウトでは 16pxつまり1em分のパディングは 少なく見えますので 32pxに設定します これは2つのグリット分という幅です 他のエリアと同じように 高さを1200pxに変更しておきます 位置を調整します 同じように反対側にも パディングを設定します またメインカラムとサブカラムの間の スペースについても考えてみましょう こちらにも両サイドのパディングと 同じ幅だけスペースを設けます この32pxのスペースは 左のメインカラムに つければよろしいでしょうか それとも右側のサブカラムに つければよろしいでしょうか ここではちょうど 真ん中になるように配置します つまり左側に16px分 右側に16px分が置かれている状態です こうすることで先ほどの白銀比である 7対5を保てます これでページの両サイドにパディングを メインカラムとサブカラムの間に マージンを設けることができました CSSを書く上でコンテンツの幅を 知っておく必要がありそうです ここは32px そして隣のこの場所も32px さらにこちらも32pxです それぞれのカラムから このスペース分の値を 引きましょう こちらのカラムは 32pxと半分の16pxを 560pxから引いて512pxです そしてこちらのカラムは 400pxから32pxと16pxを引いて 352pxです この値はCSSで そのまま使うことができます これでカラムとスペースの 設計ができました 必要に応じてヘッダーやフッターを 追加することもできます グリッドに合わせて ヘッダーを描画します 少し薄い色にしておきましょう このとき高さについても 考える必要がありそうです この場合もグリッドに沿って 配置するのが良いでしょう ここではヘッダーの高さを 128pxに設定します 高さも忘れないようにテキストで メモしておきましょう 複製し 高さ128pxをメモしておきます このようにレイアウトプランを 作成することで コードエディタでCSSを書く前に カラムやスペースの幅高さを 明確にすることができます このレッスンではグリッドを使った 固定レイアウトプランにおいて カラムやスペースを 設計する方法について学びました

CSSによるレイアウト

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

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

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

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

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