Dreamweaver CC 2015のアップデート

ビジュアルメディアクエリーを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ビジュアルメディアクエリーを使うと、スクリーンの幅に応じたデザインが定められます。
講師:
06:22

字幕

このレッスンでは ビジュアルメディアクエリーの使い方と そのスタイルの設定の仕方 についてご説明します 現在開いているHTML ドキュメントでは メディアクエリーバーが3色あります まずグリーンは これは 「max-width」とありますけれども 最大の幅が決められています そして紫の方はというと こちらは最小の幅「min-width」 が決められています そして真ん中のブルーはというと 「max」 と「min」 最大と最小 両方が決められています 例えばこちら最小が992 で 最大が1199 ということなんですが クリックするとまず最大の幅の スクリーンになって このブルーの場合については もう1回クリックすると 最小サイズの方になります こちらも同じですね 1回クリックすると最大で動かないんですが もう一度クリックすると最小幅ということです ではグレーの部分をダブルクリックして フルスクリーンにしましょう それからこのメディアクエリーバー 表示/非表示がこのボタンで切り替えられます 通常 表示していますけれども 画面を広く使いたい 縦を広く使いたいという場合には クリックすると恣意的に隠すことが出来ます そしてもちろんもう一度表示したい という場合には もう1回クリックすれば結構です このように幅に応じてメディアクエリーの バーの設定を切り替えることが出来るんですが 独自の設定を追加することも可能です ではこのscrubber ですね これをずっとドラッグして 幅の狭い設定にしましょう 「400」としました ここで新たにメディアクエリーを 設定したいと思います このグレーポイントをクリックすると それをmax として設定するのか minimum (min) として 設定するのかとあります ここはmax として設定したいので グリーンの方をクリックします max-width 「400」になっていますね やっぱり「380」が良かったと いう場合には ここで打ち直すことも出来ます 今回は「min-width」 最小幅の方は設定しません このCSS をどこに設定するのかという 選択をします ここでは「ページで定義」と 「新規にCSS ファイルを作成」 という選択があります 新規に作りましょう では「OK」ボタンをクリックします どこにそのCSS を保存するのかと 聞かれますので bootstrap.css と同じ階層にします 名前はcustom にしましょう そして「保存」ボタンをクリックします この設定で結構ですので あと「条件付きオプション」もありますが 今回は使いません コードの入力なども出来るようになっています では「OK」ボタンをクリックすると これで設定が出来ました では新たに設定されたメディアクエリーの バーをクリックすると 「380」に設定されます やっぱり「375」が良かったという場合には さらに変更することも出来ます ドラッグをして「375」 改めてクリックすると 今変更されましたという表示が出ましたが 改めてクリックすると 「375」が最新の設定になっています そしてこの「375」がmax の メディアクエリーに対して スタイルを設定することが出来ます ではそうですね このタイトルに設定することにしましょう タイトル「h1」ですけれども 「h1」にそれではID を加えましょう 今classが1個あるんですが 「クラス/ID を追加」のボタンで ID を追加します 「# 」(シャープ)の 「main.title」としましょう Enter キーです 「ソースを選択」とありますので 先ほど新規に作った 「custom.css」を選択しておきます それからメディアクエリーは 最大幅「375」今作った幅ですね これを選択します そしてEnter キーで 確定しまして このセレクターが設定されました では「CSS デザイナー」で 新たに設定を加えてみましょう 現在 選択されている「h1」の 設定をしたいと思いますので これを選びます そして「ソース」は 「custom.css」ですね 「グローバル」375 がmax-width という状態です ではここでテキストのカラーを変えましょう 「プロパティ」を見てみると 「セットを表示」のチェックが外れていれば ボタンが増えますので ここで「テキスト」を選択します そして下をスクロールしていって 「color」がありますね 「color」を選択しまして ブルーにしましょう 井桁(#)の0000FF Enter ということで カラーがブルーになりました この設定はあくまで 「max-width: 375」に対して スタイルが設定されています 確認しましょう このガイドラインがたくさんあると 見にくいので一旦 隠します ライブビューの表示を隠します これが375 ですね もう1つ大きい「767」をクリックすると カラーが黒になります では次ですね 「992」グレーの部分をダブルクリックすると ブルースクリーンになります 改めて「375」を見ると 「max: 375」の時のみ タイトルがブルーに変わるということです このレッスンでは ビジュアルメディアクエリーの使い方と そのクエリーに対するスタイルの設定 についてご説明しました

Dreamweaver CC 2015のアップデート

2015年6月のアップデートでDremaweaverにも新しい機能やパネル、インターフェイスが加わりました。このコースではBootstrapフレームワークやビジュアルメディアクエリーの導入、新しくなったCSSデザイナパネルとDOMパネル、コード入力を効率化したり構文チェックを行うツールなど主な新機能を解説します。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月27日
アップデート日:2015年11月30日

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

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

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