CSSによるレイアウト

割合の計算

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
可変レイアウトを設計する際の、割合の計算について学びます。
講師:
08:57

字幕

このレッスンでは 可変レイアウトを設計する際の 割合の計算について学びます 可変レイアウトの設計では 多くの作業が固定レイアウトと 同じような過程を持っています その中でも最大の違いは 配置する要素の割合を 計算しなければならない点です 幅 margin paddingなどの 固定された値を決めるだけではなく 実現したいレイアウトのための 適切な割合を求める必要があります 割合、パーセンテージを求めるには 少しトリッキーな点がありますので 注意しましょう 画面ではIllustratorで サンプルファイルの fluid_planning.ai を開いています Illustratorをお持ちの方は 同じような手順で構いませんが もしお持ちでない場合でも 紙などを使って同じことを行うことができます ここではIllustratorを使うかどうかは 問題ではありません 最も重要なことはレイアウト内の要素の割合 パーセンテージを計算することです ここでは2つのカラムが横に並ぶ レイアウトをプランしています 10ピクセル単位で 細かいグリッドが引かれており 少し太いグリッドは 60ピクセル感覚になっています ドキュメントの左側に 今後進めていくステップが 1、2、3、4とあります まずターゲットの解像度と グリッドを定義します 可変レイアウトにするのになぜターゲットの 解像度を決めなければいけないの? と疑問に思う方もいらっしゃるかもしれません これは言い換えると 可変レイアウトにおける理想的なサイズ と考えていただければ間違いありません このように理想的なサイズを決めておくと 後々marginやpaddingなどの 値を決める際に役立ちます ここでは理想的なサイズを 960ピクセルとします これにより仮にpaddingを設定する時に 20ピクセルにするか40ピクセルにするか ということを考えることができ さらに全体の幅の何パーセントになるかを 計算することができるようになります 割合の計算を簡単にするために 理想的なサイズを設けて レイアウトのモックアップを作ることを ここではターゲットの解像度と呼んでいます それではこの2つのカラムとスペースを使って モックアップの作成をすすめましょう まず割合を計算するため それぞれの値を測定します ここでは既に測定してある値を表示します まずターゲットの解像度は 960ピクセルとしました 左のカラムの合計の幅が590ピクセル 右のカラムの合計の幅が350ピクセル それらの間のスペースが 20ピクセルとなっています 左端のpaddingは左のカラムの中に 右端のpaddingは 右のカラムの中に含まれており それぞれのコンテンツ自体の幅が 570ピクセル 330ピクセルとなっています これが可変レイアウト作成のための 出発点になります さて それぞれの要素の幅が分かりましたので 次に行うのはこれらの割合を計算することです 電卓に切り替えます とても単純な計算です 左カラムの幅590ピクセルを 全体の幅960ピクセルで割ると その答えは0.614 切り上げて62%としましょう ブラウザでは小数点を扱うことができるので 可変レイアウトを行う時 百分の一、千分の一 あるいは一万分の一の値を持った 割合を使うこともできますが ここではシンプルに考えられるよう 値を切り上げます カラム間のスペースである 20ピクセルにおいても同じことです 20ピクセルを全体の960で割ると 0.02、約2%となります 同じように右カラムの350ピクセル こちらの値を全体の960ピクセルで割ると 0.36、約36%です このように求められる割合は 細かい数値になるため ある程度値を丸めておきます Illustratorに戻りましょう 計算した割合を表示してみます 左のカラムが62%で カラムの間のスペースが2% そして右のカラムが36%です さてこれらの下に書かれている値は 左のカラムのpadding そのコンテンツ幅 カラム間のmargin 右のカラムのコンテンツ幅 そのpaddingでした これらの割合も計算すると 実際に計算した結果を表示してみます ここが可変レイアウトを行うときに 混乱が起きやすい箇所です 左側のカラムでは 570ピクセルのコンテンツ幅と 20ピクセルのpaddingを持っています この時20ピクセルのpaddingの割合を 計算しようとする時 590ピクセルで割ろうとしがちですが それは間違いです paddingとmarginは それらをもつ要素の 親要素に基づいて計算されます つまりこの左のカラムの親要素 ここでは960ピクセルと書かれている body要素が基準となります そのためこのpaddingの 正しい割合を得るためには 20割る960という計算を行います このようにして計算した割合が padding2% コンテンツ幅60% カラム間のスペース2% コンテンツ幅が34% 最後にpaddingが2%となります 続いてレイアウト内にさらに要素を 追加した時のことを検証してみましょう この要素の幅を計測すると コンテンツの幅が250ピクセル その周りのpaddingが 10ピクセルであることが分かります 二つの要素の間は30ピクセルの スペースが空いています これらの要素の親要素は オレンジ色の左のカラムでした したがって要素に含まれる 10ピクセルのpaddingの割合は このオレンジ色のカラムの幅の割合として 計算する必要があります しかし この時 カラム全体の幅を 使わないようにしましょう カラムに含まれるコンテンツの幅を使います つまり10ピクセルを 570ピクセルで割ります 590ピクセルではありません コンテンツ幅の割合を求める時は その親要素の全体の幅に基づいて それを計算します marginやpaddingの割合を 求める時には 親要素のコンテンツ自体の幅に 基づいてそれを計算します 実際に計算した結果を表示します paddingは1.75%とあります 繰り返しになりますが この割合は丸めた数値です コンテンツの幅は44.5%で カラム間のスペースは4%です これらも丸めた数値です これで可変レイアウトを作成するための 割合を計算することができました 可変レイアウトは要素間の関係が何よりも 重要になるということを覚えておいて下さい また割合を算出する時は 計算結果をそのまま使うのではなく ある程度丸めた数値を使います 計算結果はある程度の基準であり そのまま用いることは適切ではありません このレッスンでは 可変レイアウトを設計する際の 割合の計算について学びました

CSSによるレイアウト

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

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

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

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

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