CSSによるレイアウト

グリッドを使ったプランニング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グリッドを使った固定レイアウトプランの作成について学びます。
講師:
08:29

字幕

このレッスンではグリッドを使った 固定レイアウトプランの作成について学びます レイアウトプランの作成は ウェブサイトを設計する上で とても重要になります 通常レイアウトプランの作成には グリッドを使いますが 固定レイアウトでは このグリッドベースでの設計が とても適しています グラフィックデザイナーの方であれば グリッドについて精通されていることでしょう もしグリッドを使ったことがない場合にでも このレッスンでその利点を理解できます 現在イラストレーターCC2014で フィックスドプランニング.aiという サンプルファイルを開いているところです サンプルファイルの中には このファイルの完成版も入っていますので 必要に応じて参照して下さい このレッスンでは行っていませんが 最もおすすめしたいのが このようなレイアウトプランの作成に 紙やノートグラフ用紙などを使うことです ここではPCの画面上で説明を行うため わかりやすいようにイラストレータを用います 通常はいきなりイラストレータのような レイアウト用ソフトウェアを起動するよりも まず紙でスケッチをして プランを練る方が良いでしょう これはレイアウトのタイプに限らず いずれのレイアウトにも言えることです さてこのチャプターの焦点は 固定レイアウトについてですが このレッスンではそのワークフローの中でも 特にレイアウトに特化した内容を 説明していきます 固定レイアウトで最初に行うことは ターゲットの解像度を定義することです これが最初の仕事になります ディスプレイの解像度は 年々広くなる傾向にありますが ターゲットの解像度はそのなかでも ウェブサイトに訪れる多くの ユーザーが使っている解像度に 設定する必要があります ここではユーザーが 最低でも1024pxの解像度を持つと仮定します 実際にはブラウザのスクロールバーや プールバーなどが同時に表示されるため レイアウトを1024pxに合わせて 作る必要はありません 例えばブラウザウィンドウを全画面にせず 閲覧している場合もありますよね そのためここでのレイアウトでは ターゲットの解像度を960pxに設定します 1024pxよりも少し小さめで どのような解像度でも ほぼ問題なく閲覧できるでしょう また960pxというサイズを選択するメリットは 他にもあります 960という数字は多くの数字で割り切れます 例えば1 2 3 4 5 6 8 10 12 15 16 20 24 30 32という具合です グリッドを元にレイアウトプランを考えるとき この960を分割できる多くの数によって 様々な幅のカラムを作成することができます 例えば6カラム 12カラム 16カラム 30カラムといった具合に ターゲットの解像度を960に設定することで とてもフレキシブルになります このように960pxという ターゲット解像度には ユーザーの解像度以外にも それを選ぶための理由があります それでは実際に960x1200pxで 矩形を描画してみましょう 矩形ツールを選びキャンバスをクリック そして960px×1200px ここでの高さはあくまで仮のものです この値で矩形を描画します 矩形が描画できました 真ん中にくるように 少し移動しましょう これがページ全体を表すということが わかりやすいように 塗りをなしにして線のみで 矩形を表現しておきます このコンテナーの中にグリッドによって 内容をレイアウトしていきます 次にグリッドの基本単位を定義します 先程述べたようにレイアウトを行う上で グリッドは大変重要で この基本単位に沿って 全てがレイアウトされます 基本単位を定義する上でのおすすめは ターゲット解像度が割り切れる数に 設定することです 他の視点を挙げるとページ内の コンテンツはどういうものか ということを把握しておくことです 例えばフォトギャラリーを作る場合 グリッドの基本単位はサムネイルのサイズに 影響されるでしょう 今ここで作ろうとしているページでは テキストを多く含むため グリッドの基本単位をデフォルトの テキストサイズに設定するのがよさそうです そのためこの場合はグリッドの基本単位を 16pxに設定します これはほぼ全てのブラウザの デフォルトのフォントサイズです これはほぼ全てのブラウザの デフォルトのフォントサイズです ユーザーはデフォルトのフォントサイズを 変更することができますが それをコントロールすることはできません 他にもユーザー側ではブラウザの機能を使って ズームしたりテキストのサイズを変更したり 画像を非表示にしたりすることができます つまりユーザーはウェブサイト側が決めた レイアウトを自由にコントロールする手段を 持っているのです そのためここでやることは ベースを決めることです あくまでレイアウトのための このように基本単位を決めるとき しばしば計算がしやすいので10pxにしては という声が聞かれます しかし実際にウェブサイトを制作するときは テキストを基本としたレイアウトを することが多いため 一文字の大きさ つまりCSSでいうところの 1emデフォルトでは16pxを基本単位として グリッドを作成するわけです 後にCSSを起動するとき1emが レイアウトグリッドと同じサイズである ということもわかります このように一見中途半端な16px という数字を選ぶには理由があるのです さて次にイラストレーターの環境設定について 説明します 編集メニューから 環境設定>ガイド>グリッドを選びます グリッドを定義する上で便利なのは このグリッド機能です 80pxごとにグリッドを引き さらにそれを5つに分割する設定にします つまり16を5倍した数の80pxにすることで 16pxごとにグリッド線を引きます またあえて80pxをベースにすることで 960pxの中で12分割したカラムも 確認することができます そのためこのレイアウトでは要素を配置する際に 12カラムも使うことができます さてなぜ12カラムなのでしょうか これはあくまで任意の数です 使うのは16カラムでもかまいません 960で割り切れる数字であれば 何でもかまいませんが 12カラムは偶数でとても使いやすい数字です OKボタンをクリックします 表示メニューからグリッドを表示を選んで グリッドを表示します さきほど作成した矩形を グリッドに合わせて配置しましょう このような形です ここでファイルを保存しておきます このレッスンではグリッドを使った 固定レイアウトプランの作成について 学びました

CSSによるレイアウト

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

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

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

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

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