CSSによるレイアウト

グリッドに沿ったアセットの配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グリッドに沿ってアセット、画像を配置する方法について学びます。
講師:
11:20

字幕

このレッスンではグリッドに沿って アセット 画像を配置する方法について 学びます グリッドベースでの デザインを作成する場合 全ての要素が何らかの方法で グリッドに関連づけられることが 重要になります グリッドは固定レイアウト時は特に重要で よりバランスのとれた 一貫したレイアウトを 作成するのに役立ちます これを説明するためにグリッドに沿った レイアウトガイドを作りウェブページに アセット 画像を追加してみましょう 現在画面ではイラストレーターで サンプルファイルの フィックスドプランニングエレメンツ.aiを 開いています このドキュメントを完成させることが このレッスンの目的ではありません あくまでアセットがどのように並ぶかを 示したプランです プランではカラムをどのように レイアウトするかに加えて どのようなタイプのアセットがあるか そしてそのアセットをグリッドに沿って どのように配置するかを決めていきます 現在左側のカラムにはいくつかの アセットが配置されています 下の方を見ると 横に並んでいるものもあります これらのサイズの異なるアセットを どのように配置するかを比較しながら 検討します 例えば様々なサイズのアセットがありますが これらは全て グリッドに沿って配置されています そのためこれらは全て16で割り切れる数字 つまりグリッドに沿っている状態です ここでこのルールとは異なる ルールを決めましょう 例えば右側のカラムでは アセットを常にカラムの真ん中に センタリングして 表示したいためそのためのサイズを 決めました 一方左側のカラムでは それぞれのアセットは コンテンツと どのように関連づけられているかを 考える必要がありそうです コンテンツはアセットの周りに 回り込むでしょうか あるいは1行に収まるでしょうか 左寄せにすべきでしょうか それとも中央寄せにすべきでしょうか このようなルールを 決める必要がありますが そのための値を得るために このプランニングドキュメントを 使うことができます 例えばこのように2つの要素が 横に並ぶ場合グリッドによって アセットをどのくらいの幅にすべきか その間のスペースの幅についてはどうか ということを検討できます このようなことはCSSを書く前に 決めておきたいものです またこのような考え方が適応できるのは 画像だけではありません ページ内で使用する 全ての要素が対象になります 引用のための ブロックノート要素かもしれませんし 記事を示すアーティクル要素かもしれません はたまたビデオかもしれません とにかくこのような考え方で あらゆる要素をレイアウトできます それでは実際のコードを見ていきましょう エディターで サンプルのgrid.htmを開いてみます サンプルフォルダの中には imagesフォルダがあり そこにいくつかの画像が入っています これらの画像は先ほどのプランで決定した 数値に基づいてサイズが決められています またファイル名は それぞれの幅と高さに対応しています htmlのコードを見てみると これらの画像はグリッドに沿った形で 配置されていることがわかります さらに少し下にスクロールすると メインカラムに2カ所のセクション要素があり それぞれニュースという クラスを持っていることが わかります ブラウザでこのページを プレビューしてみましょう ブラウザを開きます 画像は表示されているものの調和を持った レイアウトにはなっていません アセットとコンテンツ つまりテキストとの関連性も わかりにくくなっています これをCSSでスタイリングしていきます 少し下にスクロールすると 先ほどの2つのセクションについても 何もスタイリングしていないため 横並びにするための作業が必要です コードに戻りスタイルの部分で フッターのスタイルの下からコードを 書いていきましょう まず始めに行いたいのはコンテンツ つまりテキストが画像と正しく 関連づけられることです そのためページ上の画像に 対応するセレクタを 記述しそれに対してfloat: left;を 記述します 合わせてマージンも上が0右が1em これは画像とテキストの間に スペースを設けるためのものです そして下が0左も0に設定します これで画像に対するスタイルができました これを保存しブラウザに戻りリロードします すると画像の右側にテキストが回り込んで 読みやすくなっています しかしセンタリングするはずの 右カラムの画像についても テキストが回り込んでしまっています また同じように大きな画像のとき テキストが回り込んでしまうと 逆に読みづらくなってしまいます したがってこれらのためのスタイルが 必要になりそうです ここではこれらの画像に対して クラスを適用して解決します エディタに戻り ここではラージイメージという クラスセレクタを記述します largeImgというクラスセレクタです テキストが回り込むのを防ぐため ディスプレイブロック このプロパティを記述します またフロートはなしにするため フロートノンも加えます さらにマージンを上下に1em 左右はautoに設定します 左右にautoのマージンを設定することで センタリングして表示されるようになります もちろんこのラージイメージというクラスを 適用した画像だけに適用されます 下にスクロールし 該当の画像にクラスを適用しましょう 101行目に大きな448×400の 画像がありますので これにラージイメージクラスを適用します 同じようにその下にある109行目に 256×256の画像がありますので こちらにも同じクラス ラージイメージを適用します 保存しブラウザに戻りリロードをすると サブカラムの画像が センタリングされていることが わかります テキストの回り込みもなくなっています 大きな画像の場合も 上下にスペースを取りつつ テキストの回り込みが解除されています 最後に2つの要素を 横に並べて表示するよう スタイルを設定します プランニングドキュメントでは 横並びにするカラムの幅や スペースのサイズを規定していました ここでは固定レイアウトに基づいて カラムの幅は240pxになります コードに戻りCSSを記述します 先ほどの続きに書いていきましょう この横並びにするセクション要素の横並びには ニュースクラスが設定されていましたので これを使います まずニュースクラスセレクタを作り これに対して幅を208pxにします これは要素全体の幅と同じ値ではありません これに16pxのパディングを追加しますので 左右のパディング16pxずつ つまり計32pxずつが幅の280pxに追加され 全体で240pxとなります 合わせてフォントサイズも少し控えめにして 90%にしておきます 行の高さも1.8に設定しておきましょう また背景色も追加しましょう ここではバックグラウンド 背景色にRGB237 そして226最後に197 こちらを設定します さらに最後に要素の間に スペースを設けるため マージンライトを32pxにして フロートレフトも 記述します これで完成のように思いますが 実際には少し余計な スタイルが残っています フロートは要素を左右どちらかに寄せて 配置します このときマージンライトで 32px分のスペースが 与えられています しかし実際には2つの要素両方に マージンがあるのではなく 片側の要素のみにマージンが必要です そのため別のセレクタを追加しましょう .news + .news このように記述することで newsクラスの次に newsクラスがあった場合のセレクタを 作ることができます ここのマージンライトを0とします 保存しブラウザを開き 再度リロードすると 一番下の部分で2つの要素が 横に並んでいることがわかります また間に32px分のスペースも 入っています グリッドを使うことでスマートに要素を 配置することができました このレッスンではグリッドに沿って アセット 画像を配置する方法について学びました

CSSによるレイアウト

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

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

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

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

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