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

第22回「マルチカラムレイアウトの指定を続けるよ! 今回はカラムの間隔と区切り線を指定して読みやすい段組みにしましょう! 」



前回の続きです。
マルチカラムレイアウトの指定を追加していきますよ!
今回は、カラムの間隔、区切り線の指定です。




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




[01]
それでは、CSSを指定していきましょう。

CSSデザイナーの[ソース]で「style.css」、[@Media]で「(min-width : 769px )」が選択されていることを確認。
前回と同じね!

続けて、[セレクター]の「article section .mcol」をクリックしてください。





[02]
まず、2つのカラムの間隔を指定します。

[プロパティ]の[その他]のプロパティをクリック、「-moz-col」と入力すると候補メニューが表示されますので「-moz-column-gap」を選んで、Enterキーを押しましょう。

値をダブルクリックして、「2em」と入力してEnterキーを押してください。
これで、本文の2文字分の間隔が指定されました。

前回は説明しませんでしたが、「-moz-」は、Firefoxというウェブブラウザーのお試しモード用の呪文なんだ。






[03]
同様にプロパティをクリック、「-webkit-col」と入力すると候補メニューが表示されますので「-webkit-column-gap」を選んで、Enterキーを押してください。
続けて、値をダブルクリックして、「2em」と入力してEnterキー!

「-moz-」はFirefoxでしたが、「-webkit-」は、ChromeやSafariのお試しモード用の呪文です!

最後です。
プロパティをクリック、「col」と入力すると候補メニューが表示されますので「column-gap」を選んで、Enterキー!
値をダブルクリックして、「2em」と入力してEnterキー!





[04]
ウェブブラウザーで表示を確認してみましょう!

まず、保存。ファイルメニューの[すべてを保存]を選択!
続けて、ファイルメニューの[ブラウザーでプレビュー]を選び、表示したいブラウザーを選択してください。





[05]
ちゃんと表示されていますか?

上がGoogle Chrome、下がFirefoxです。
問題ないですね。





[06]
次は、区切り線を指定しましょう。

まずは、Firefox用の呪文!
プロパティをクリック、「-moz-c」と入力、候補メニューから「-moz-column-rule」を選んで、Enterキー!

値をダブルクリックして、「1px dotted #aaaaaa」と入力してEnterキーを押してください。

「1px」(線の太さが1ピクセル)+「dotted」(破線)+「#aaaaaa」(線の色)という内容だよ。

次も同じ値なので、コピーしておいてね!




次は、ChromeとSafari用の呪文!
プロパティをクリック、「-webkit-c」と入力、候補メニューから「-webkit-column-rule」を選んで、Enterキー!
値をダブルクリックして、「1px dotted #aaaaaa」をペーストして、Enterキー!




最後は、CSSの指定!
いずれ、この指定だけで済むんですよ。

プロパティをクリック、「col」と入力、候補メニューから「column-rule」を選んで、Enterキー!
値をダブルクリックして、「1px dotted #aaaaaa」をペーストして、Enterキー!





[07]
ウェブブラウザーで表示を確認してみよう!
大丈夫ですね!





[08]
さて、Dreamweaverの表示ですが、まだこんな感じになってます?
前回、やった手順で、元に戻しておきましょう。

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






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

面倒ですね、正しく表示してほしいな。





[10]
念のため、Dreamweaver上でも確認!
スクラバーをドラッグして確認しておきましょう。




マルチカラムレイアウトの指定、どうだった?
新しいCSSなので、CSSデザイナー上でも直接入力しないといけませんが、候補メニューが出てくるから、楽でしょ。

お試しモードのブラウザーでは、呪文が必要なので、同じ指定で3種類入力するのが面倒だけど、これも知識として覚えておいて!



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


うまくいかなかった人は、完成データを確認してくださいね!

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



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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books