このビデオでは、Dreamweaverで CSSデザイナーを使用したCSSの管理方法を紹介します Cowboy Conceptのデザインを例にDreamweaverのワークスペースについて説明します デザインはシンプルで、全画面の背景イメージ ヘッダー、ナビゲーション、ヘッドライン、本文の各タグがあります ライブビューの幅を変更すると、画面サイズに合わせて レイアウトが調整されます この効果をメディアクエリーで作成する方法を説明します 始めましょう 新規サイトを作成し、style-webpage-cssフォルダーを指定します index.htmlファイルを開き、コードを表示します HTML構造がありますが、まだCSSが適用されていません CSSデザイナーを使用して、このページにスタイルを追加します CSSデザイナーはデフォルトで、ワークスペース右側のパネルに表示されます ウィンドウメニューから開くことも 右上でワークスペースの表示設定を解除することもできます ここではCSSデザイナーをドラッグしてドッキングし その右のパネルを閉じます パネルをドラッグしてレイアウトを変更すれば プロパティの編集領域を広げられます ではCSSファイルを添付して内容を確認しましょう CSSデザイナーのソースペインで「+」ボタンをクリックします CSSを追加する方法は3つあります 新規CSSファイルを作成 既存のCSSファイルを添付、またはページで直接スタイルを定義します 2番目の添付を選択して、CSSフォルダーの main.cssファイルを選択し、OKをクリックします コードビューでは、headタグにファイルが追加されています ライブビューでは、背景イメージとスタイル付きテキストでページが更新されています このライブビューを表現するCSSを詳しく見ていきます CSSデザイナー上部の「すべて」と「現在」の2つのタブで コードを検索できます 「すべて」を選択し、添付されたすべてのスタイルを表示します CSSの構造が一覧できます エレメントを選択して「現在」タブをクリックすると計算済みスタイルが表示され Dreamweaverで現在選択中のプロパティとセレクターを表示できます 継承されたスタイルとエレメントに直接添付されたスタイルも 確認できます 「すべて」に戻ると、CSSデザイナーの@Mediaペインで メディアクエリーが定義されています メディアクエリーは、画面サイズなど 特定の条件に基づきデザインを変更します 添付されたCSSには2つのメディアクエリーがあります スタイルは簡単に追加できます classを追加してH1テキストのスタイルを設定します ライブビューでH1タグを選択して 「+」ボタンを押し、.headlineというクラスを追加します Enterキーを押してソースにmain.cssを選択し もう一度Enterキーを押すとクラスが作成されます ライブビューでクラスを右クリックし 「コードへ移動」を選択してコードビューのCSSへ移動します 作成したクラスは1番下にあるので メディアクエリーの上までドラッグし ページ上部のデフォルトのコードとグループ化します 次に、プロパティを追加してエレメントの書式を設定します ライブビューでH1エレメントを選択し、CSSデザイナーでheadlineクラスを選択します headlineクラスはセレクターの一番下のグローバルにあります プロパティペインで、カテゴリ別にプロパティをフィルターできます テキストボタンをクリックしてテキストのプロパティをフィルターします font-sizeをpx、値を64 line-heightをem 値を0.95に指定します レイアウトのプロパティボタンをクリックし、下マージンのプロパティを10pxに設定します 「セットを表示」にチェックを入れると 追加したプロパティのみ表示されます 次にメディアクエリー全体のクラスを更新します headlineクラスを右クリックして、「メディアクエリーに複製」を選択します 768ピクセルのメディアクエリーを選択します。
これでコードがコピーされます @Mediaペインで768ピクセルのメディアクエリーを選択し セレクターペインでheadlineセレクターを選択します 「セットを表示」が選択中のため、設定済みプロパティのみ表示されています font-sizeプロパティを90に line-heightプロパティを0.85に margin-bottomプロパティを30に更新します 同じ手順を繰り返し、1024ピクセルのメディアクエリーでfont-sizeを更新します headlineセレクターを右クリックし、1024ピクセルのメディアクエリーに複製します @Mediaペインでメディアクエリーを選択してからheadlineセレクターを選択します font-sizeを120pxに line-heightを0.9pxに更新します margin-bottomは20pxに更新します コードビューを見ると、大きな画面ではテキストを大きく表示するように クラスが更新されています headlineクラスのコピーが両方のメディアクエリーに作成されたことも確認できます [コンセプト COWBOY CONCEPT] CSSデザイナーとDreamweaverのワークスペースの統合により CSSのレイアウトをごく簡単に操作できます セレクターは、ライブビューかDOMパネルでエレメントを選択すれば 簡単に作成できます DOMパネルで新しいparagraphタグのセレクターを作成しましょう ソースコードに戻りDOMを表示します DOMパネルでparagraphタグを選択します ページ全体のコード構造が わかりやすく表示されます DOMパネルを折りたたみCSSデザイナーに戻って、ソースでmain.cssを選択します @Mediaでグローバルを選択し、セレクターの「+」ボタンをクリックすると bodyとparagraphの2つの特異性レベルを持つセレクターが Dreamweaverで生成されます ここで上矢印と下矢印を使用して特異性のレベル入れ替えられます セレクターを指定して、混在する場合の優先度のルールを設定できます 「セットを表示」のチェックを外し、新しいセレクターで使用できるすべてのオプションを表示し テキストのプロパティを編集します font-sizeを15px、line-heightプロパティをem 値を1.75に指定します このスタイルを768pxのメディアクエリーに複製します メディアクエリーを選択し paragraphセレクターを選択してプロパティを表示します font-sizeを18、line-heightを1.5に 更新します [コンセプト COWBOY CONCEPT] 1024pxのメディアクエリーにparagraphセレクターを複製すれば完了です メディアクエリー、セレクターの順に選択します font-sizeを24pxに更新したら、ごみ箱アイコンをクリックして line-heightプロパティを削除します 768ピクセルのメディアクエリーと同じ設定を使用するので line-heightをもう一度複製する必要はありません ライブビューのサイズを変更すると、画面のサイズに合わせて テキストのスタイルが調整されます ライブビューで、エレメントに添付されたコードに簡単に移動することもできます 例えばH1タグを選択し、headlineクラスを右クリックして 「コードへ移動」を選択すると、元のheadlineセレクターのほか メディアクエリーのセレクターにも移動できます メディアクエリーの1つを選択し、CSSデザイナーのコードビューの更新を確認します ビジュアルメディアクエリーバーから「コードへ移動」を選択することもできます 例えば、768pxのメディアクエリーを右クリックします 行番号でメディアクエリーを簡単に特定して コードに移動できます インスペクトモードで、エレメントに添付されたスタイルを検索することもできます インスペクトモードボタンをクリックし エレメントにカーソルを当てハイライトすると CSSデザイナーでのコードが表示されます エレメントをダブルクリックしてインスペクトモードを解除します [コンセプト COWBOY CONCEPT] このように、Webデザインを簡単に作成することができます すべてのセレクターを一度に表示してコードに移動するか、コンテキストによる編集で 選択したエレメントに添付されたスタイルを調整します [コンセプト COWBOY CONCEPT] CSSデザイナーなら、コードを管理し 全体のバランスをまとめるのも至って簡単です ぜひ使ってみてください [コンセプト COWBOY CONCEPT]
