中学生のためのレスポンシブWebデザイン

第25回「重要なこと! CSSの知識だけあっても「ブロック、カラム、モジュール」を理解できていないと苦労するぞ〜」


第25回の授業(テキストキャスティング)を開始します!
新カリキュラムの第3回になります!



[01]
第23回「まずは言葉の確認だ、「整理」「整頓」「整列」の違いってわかる?( http://blog.livedoor.jp/thinkzero/archives/4159157.html )」で、とても重要なことを説明し忘れていました!

前回の続きはこの後にして、先に解説します!
グリッドシステムの話です。

グリッドシステム
なんか難しい言葉が出てきましたけど、すぐ理解できると思う。

第23回で「整列」について学びましたが、実際にレイアウトするときには、何らかの基準線がないときれいに並べられませんよね。

図を描くとき、真っ白な紙より方眼紙を使った方が描きやすくないですか?




[02]
Webページの場合も、基準線に沿ってレイアウトを考えた方が、イメージしやすいんだ。

みんなが方眼紙を使うように、デザインでは「グリッドシステム」を使うことが多いんです。

ヨゼフ・ミューラー=ブルックマンさんというスイスのデザイナーが、1961年に書いた本でまとめられている。
54年前だから、ずいぶん歴史があるでしょう。

多くの人に知られるようになったのは、1996年に発行されたブルックマンさんの本「Grid Systems in Graphic Design」かな。

翻訳版も出てるので興味があったら図書館で探してみて。
ちょっと難しい本だけどね。




[03]
覚えて欲しいのはこの3つ!

ブロック
カラム
モジュール

まずは、図を見てください。


ブロックは、ページの中の大きな「情報のまとまり」です。テキストのまとまりを「テキストブロック」なんて言います。
たとえば、小説などは、ページの中の「1つのブロック」で表現できるんだ。テキストしかないからね。

カラムは、縦方向に分割された領域。
カラムが2つ並ぶと「2段組」、3つだと「3段組」になります。

モジュールは、構成部品って意味だけど、縦の線と横の線で区切られた領域の集まりですね。
レイアウトが複雑になるほど、モジュールも細かくなるんだ。



[04]
じゃ、具体的に見ていきましょう。
これは、Wired( http://wired.com/ )というウェブマガジン。

ブロックで分けてみると、こうなります。
どう? 大きな「情報のまとまり」って感じでしょう。




[05]
次は、カラムだけど、ページが長いので、一部分を抜き出してみるよ。

大きなブロックの中に、2つのカラムが置かれている。
「どこが、カラムかな?」っていう見方は、すごく重要なんだ。




[06]
さらに、細かく見ていくと、カラムの中にモジュールが配置されています。

で、ここ!
ここね、前回の「ナビゲーションバーの作り方の応用」って。

つまり、ブロック、カラム、モジュールを理解した上で、ナビゲーションバーの作り方も習得していれば、Wiredマガジンのようなレイアウトがつくれるってこと!




[07]
前回のサンプルをもう一度、ブラウザーで開いてみよう。
これは、大きなブロックの中に、9つのモジュールが配置されているサンプルなんですよ!

重要だから強調するけど、CSSの知識だけあっても、ブロック、カラム、モジュールを理解できていないと、つくるたびに苦労するんだ。

ページをつくり始める前に、「設計」っていう作業があるんだけど、ここでブロック、カラム、モジュールで考えることになるんです。

ちょっと難しいかもしれないけど、まずは名前だけでも覚えてね!




それでは、第26回(新カリキュラムの第4回)の投稿をお待ちください。


今回のテキストキャスティングは、こちらの講座ビデオの追加コンテンツです。
テキストキャストの課題データやサンプルデータは、専用ページからダウンロードすることができるようになります。

講座ビデオ版・Dreamweaver CC 2015 によるレスポンシブWebデザイン
CSSデザイナーとDOMパネルを活用したライブビュー・ワーク[基礎編]
購入方法:Creative Edge School Booksのストア( http://design-zero.tv/ia/dw1/
形式:ビデオ(学習パートごとに分割されています)
総再生時間:1時間40分
発売期間:27日(土曜日)、28日(日曜日)※月曜の朝7時まで
価格:1,500円
※シンクゼロマガジン(旧・全記録)の読者ページでは常時アクセスできます。



前回(第22回)までは、以下のページにまとめてあります。

中学生のためのレスポンシブWebデザイン
Dreamweaverライブビュー編


シンクゼロマガジンとは?

筆者:
Creative Edge School Books