CSSによるレイアウト

固定レイアウトのためのTIPS

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
固定レイアウトのためのTIPSをご紹介します。
講師:
05:00

字幕

このレッスンでは固定レイアウトのための チップスをご紹介します 予め部分的に完成してある ウェブサイトを使うのではなく 0から固定レイアウトをプランしてみましょう とはいえ何もないところから始めるより 少しとっかかりがあった方がいいですよね 好みのレイアウトからそれを再作成する というやり方をしてみましょう 既存のレイアウトを調べて そのグリッドを分解することで ウェブサイト制作における設計や プランニングについてより深い理解を 得ることができるでしょう ここではlynda.comというウェブサイトを 使ってみます あくまで例ですので 実際に行う時は任意のサイト お好みのレイアウトを 選んでいただいて構いません CSSを確認できるようなサイトだったら さらに良いでしょう lynda.comの場合直接CSSのソースを確認することは 少し難しい状態にあります CSSを開くとこのように 難読化されている状態です しかしこれはクリティカルな 問題ではありません CSSを把握できない場合でも 方法はあります お気に入りのレイアウトをみつけたら スクリーンショットを撮って下さい 画面ではlynda.comのスクリーンショットを撮影し イラストレーターのドキュメントに 貼付けたところです 例としてイラストレーターを使っていますが ガイドラインが引けるような プログラムであれば 何のソフトを使っても構いません ここでまず行うことはサイトの基礎となる グリッドを見つけガイドラインを引き このようにページの中のカラムを明らかにすることです カラム同士が同じ幅になっており ページのグリッド構造を構成していることがわかります そしてさらに矩形を重ねてみましょう これは大きく分けて左側と右側に カラムを持っている2列のレイアウトですが 左のカラム自体はその中で3つのカラムに 分割されています このようにそれぞれのカラムの構成や スペースを明らかにするために ガイドラインを引きました この時点でこのページを作るために どのようなhtmlとcssが必要か なんとなく想像がついたはずです 誤解しないでいただきたいのは これと同じレイアウトを完璧に再現することを 目的とはしていないことです これらのレイアウトの構造を参考に 新しいレイアウトを作りそれらの中に 独自のコンテンツを配置していくことが 目的です サンプルファイルの中には いくつかの画像が入っています これらの画像はimagesフォルダに入っており 新しく作成したレイアウトに収まるよう 好きなようにサイズを変更できます この時作成したグリッドに合わせることを 忘れないようにしましょう さらにいくつかのテキストファイルが assetsフォルダの中に入っています 中身にはアメリカの作家 マーク・トゥエインのア・ドックズ・テイルという 短編の原稿が入っています これらはコピーして貼付け ダミーテキストとして使用できます いわゆる意味のないダミーテキストよりも このような著作権が切れたテキストを 用いることで少し楽しく作業を 進めることもできるでしょう いずれにしてもグリッドベースの レイアウトではコンテンツが グリッドに沿っているかどうかに 注意を払う必要があります アセットを配置する際にはグリッドを 意識したレイアウトタイポグラフィを 作ることを心がけて下さい もう一度linda.comのサイトを 見てみましょう 可能な場合はこのウェブサイトで 使われているCSSを確認しましょう そして普段書いているCSSと 比較してみて下さい 冒頭にも申し上げた通り今回のような 複雑なサイトではCSSを読み解くことは 難しいかもしれません しかし全てのスタイルを チェックすることは困難でも 基本的な構造を比較することは できるはずです 実際にやってみると比較することに 没頭してしまうかもしれません しかし最初から全てのスタイルを 把握しようとしないてください ここでのポイントは好みのレイアウトが どのような構造になっているのかを 把握することです このレッスンでは既存のウェブサイトを使って その構造を解析し新しい レイアウトに活かすチップスについて ご紹介しました

CSSによるレイアウト

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

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

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

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

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