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

第21回「ワイドスクリーンでは、「マルチカラムレイアウト」でカラム数を指定して記事を2段組みにしよう! 」


今回は、「マルチカラムレイアウト」っていう新しいCSSを学習します。
1行だけで、2段組み、3段組みなどのレイアウトを指定できるすごい便利な機能です。

こんな感じで、記事を段組みにできるんだ。
ただ、ちょっと注意点があるので、最後に説明します。





第21回の授業(テキストキャスティング)を開始します!




[01]
レイアウトを調整しましょう。
ウェブページの下を見てください。

記事を含むコンテナと、一番下のフッターとの間隔が狭いですよね。
少し広げましょうか。





[02]
記事とサイドバーが入っているコンテナを選択しましょう。
DOMパネルの「article」の上の「div(class="cf")」をクリックして選択!

新しいクラス名と追加します。
[エレメントディスプレィ]の[+]をクリック!
ここでは「contents」という名前を入力して、Enterキーを押します。






[03]
CSSデザイナーの[ソース]で「style.css」が選択されていることを確認。

[@Media]の「グローバル」をクリック、続けて[セレクター]の[+]をクリックして、「.contents」に変更してから、Enterキーを押しましょう。

[プロパティ]の[margin]の下の値をダブルクリックして「3em」と入力して、Enterキー!
本文の3文字分の空きを指定しました。





[04]
はい、間隔が広くなりました。
大丈夫ですね。





[05]
さて、いよいよ「マルチカラムレイアウト」の指定です。
まず、CSSを指定するコンテナを新たに作成しておきます。

DOMパネルで、記事が入っているコンテナを選びます。
「div(class="cf contents")」のタグの部分をクリック!

「artticle」のタグもクリック!

見出しの下の記事を選択しますので、「h3」の下の「p」タグをクリックして選択してください。





[06]
挿入パネルのポップアップメニューから[HTML]を選び、一番上の[Div]をクリック!

[エレメントディスプレィ]に4つのアイコンが表示されます。
これから挿入する新しいコンテナの中に、記事を入れたいのだから[ネスト]ですね、クリックしてください。
この作業は何度もやっているので、図は省略するよ!

記事は3つの段落に分かれていますが、いま追加したコンテナに入っているのは一番上の段落だけです。
下の2つの段落もコンテナの中に入れましょう。

復習です。
DOMパネルで、あっという間ですね。
2番目の「p」タグを選択しておきます。ドラッグして、上の「p」タグに重ねてから、少し下にカーソルを移動させると、グリーンの水平線が表示されるので、そこでマウスボタンを離します。
覚えてます?

3番目の「p」タグもまったく同じ。
ドラッグしてコンテナの中に入れてください!





[07]
CSSを指定できるように、追加したコンテナに新しいクラス名を付けましょう。
「div」タグをクリックして選択!

[エレメントディスプレィ]の[+]をクリックして、ここでは「mcol」という名前を付けます、入力して、Enterキーを押してください。

ポップアップが表示されますが、Enterキー!





[08]
CSSを指定していきましょう。
CSSデザイナーの[ソース]で「style.css」が選択されていることを確認。

[@Media]の「(min-width : 769px )」をクリック、続けて[セレクター]の[+]をクリック!
「article section .mcol」って表示されてますよね、Enterキーを押しましょう。

ウィンドウの幅が769ピクセル以上になったら、これから指定するCSSを適用するよ!ってことですね。

[プロパティ]の一番下の[その他]で直接入力していきますよ。
プロパティの部分をクリックしてください。





[09]
詳しい説明は後でしますので、まずは指定してしまいましょう。

「-moz-col」と入力すると、候補メニューが表示されますので、「-moz-column-count」を選んで、Enterキーを押しましょう。
値には「2」と入力して、Enterキー!

これで、記事が2つのカラムに分かれます。2段組みになります。
でも、まだですよ。指定は終わっていません。

「-webkit-col」と入力すると、候補メニューが表示されますので、「-webkit-column-count」を選んで、Enterキー!
続けて、値に「2」と入力して、Enterキー!

最後です。
「col」と入力すると、候補メニューが表示されますので、「column-count」を選んで、Enterキー!
続けて、値に「2」と入力して、Enterキー!
これで完了!





[10]
これで、2段組みになりましたが、Dreamweaver上でこんな表示になっている人いるかな?

アプリケーションバーのライブビューオプションのアイコンをクリックして、メニューの[ライブビューの表示を隠す]を選択、続けて、[JavaScriptを無効にする]を選んでみて!






[11]
どう? 正しく表示された?
Dreamweaverだけの問題だから、ウェブブラウザーで表示した場合は、ぜんぜん大丈夫だから。

確認できたら、元に戻すよ。
アプリケーションバーのライブビューオプションのアイコンをクリックして、メニューの[JavaScriptを無効にする]を選び、続けて、[ライブビューの表示を隠す]を選択してください。





スクラバーでドラッグしてみよう!
ウィンドウの幅が広いと、2段組みになって、狭くなると元に戻るでしょう。

なんか、たくさん指定しましたけど、実際は1行だけで、段組みを表現できるんだ。
「2」って入力したでしょう。だから、2段組みになっている。
直感的だと思いませんか?
これが、マルチカラムレイアウトなんです。



「-moz-」とか「-webkit-」って入力しましたが、これはブラウザーごとの呪文みたいなものなんだ。

マルチカラムレイアウトって、新しい機能なので、ブラウザーによってはまだ「お試し」モードになっている。
「-moz-」や「-webkit-」は、お試しモードのブラウザー用。

時間が経てば、必要なくなるんだ。
だから、一番最後に呪文が付いていない「column-count」を指定しているでしょ。
いずれ、この1つだけでOKになる。

今はまだ呪文と付けておいてね、ということ。



それでは、第22回の投稿をお待ちください。


うまくいかなかった人は、完成データを確認してください!
「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページの「テキストキャスティング」のところに、まとめてありますので、ダウンロードして復習に使ってくださいね!



今回のテキストキャスティングは、こちらのオンライン講座の追加コンテンツです

Dreamweaver CC 2015 基礎編パート1



関連記事:
Dreamweaver/Museのカテゴリーページ:



関連コンテンツ:
Muse CC 2015 ビジネスガイドブック




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

筆者:
Creative Edge School Books