Dreamweaver CC 2015のアップデート

CSSデザイナーパネルを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSデザイナーパネルを使うと、ライブビューで確かめながら、要素のスタイルが編集できます。
講師:
06:18

字幕

このレッスンでは CSS デザイナーパネルを使ったー CSS の編集の仕方についてご紹介します 今画面に開いているのは Bootstrap のテンプレートを使って 作った HTML ドキュメントです この要素どれでも結構ですから クリックすると 要素が選ばれます これはp 要素ですね― そしてその外側をクリックすると div 要素― あるいはもっと外側をクリックすると body 要素― というふうに 何が選ばれているかが分かります その上でその選ばれているもの あるいは全体についての CSS の設定を 「CSS デザイナー」パネルで 編集することが出来ます 現在「すべて」というボタンが押されています そうするとドキュメント全体のルールを 一覧表示します そして選んだものに対して CSS の設定をしたいという場合には 「現在」をクリックすると 現在選択された範囲のルールを 一覧表示してくれます ではこのボタンが入っている div 要素を クリックして選ぶと class が3つ設定されていますね ではこの設定を変更したいと思います 「現在」を選んでいますので 今選んでいるこの div 要素に関する 設定が出て来ます そして現在を選んでいるときは 「セレクター」の中で「計算済み」 という項目が選択出来ます 「計算済み」というのは 例えば幅が 50% とか ちょっと変えてみたいのは― こちらの 左右の余白で 15px ずつ取っていますが この設定を数値をクリックして 変えることも出来ますし この設定を無くしたらどうなるか 試すと CSS プロパティを 無効にするボタンがあります 今ちょっと余白がありますが ここをクリックすると このプロパティの設定が無効になります ですから左に寄りました またもう一度クリックすれば 改めて有効にすることが出来ます 設定の変更も出来ますし 設定を追加することも出来ます 今度は追加してみましょう スクロールをして ここに4つ div 要素があります そしてその div 要素をさらに 親のdiv 要素が住んでいる状態です class は.row という 名前になっていますが ここにセレクターを追加しましょう セレクターは class でも結構ですし 今回は ID を使いたいと思います これは通常の CSS と同じで #(シャープ)マークに 名前は round にしましょう そしてEnter キーです その CSS をどこに設定するか ですが ファイルを新規に作成出来ますが 今回は「ページで定義」にします そしてメディアクエリーを 選択出来るんですが 今の段階では選択肢がありませんので このまま外側をクリックします そして改めて div 要素を選択すると #round というセレクターが加わっていますね ID が加わっています ではセレクタをこの中に追加しましょう +(プラス)のボタンをクリックすると セレクターを追加出来ます そして今 設定した round が 追加適用の中にもう含まれていますから― .container はちょっと除外して round のみのセレクターに したいと思いますので Enter キーです そうすると round が入りました この段階では「すべて」が 自動的に選ばれています 切り替わっているんですね これで結構です このまま設定を続けましょう 「プロパティ」で「セットを表示」に 今チェックが付いていますが 設定済みプロパティのみを表示する という設定なので このチェックを外しますと 設定出来る項目が増えました 背景色が変えられますので 「背景」をクリックします バックグラウンドカラー/背景色の設定を 今付いていませんけれども クリックすると 直感的にどうすればいいか お分かりになりますね ブルー系で少しこの辺とか 自由に選択することも出来ますし あるいは 16 進数で # E6E6FA とすると ラベンダーと言われる設定になりますが カラーネームですね これでEnter キーを押すと ライブビューでちゃんと色が付きます さらにセレクターの中の 設定するプロパティを 自由に入力してしまうことも出来ます もちろんオートコンプリートが働きまして では border で始まるプロパティが たくさんあるんですが 「border-radius」 角を丸くするんですね オートコンプリートで選択されていますので Enter キーを押してしまえば入ります 大きさは 20px 位にしましょう 20px と入れてEnter キー そうすると角が丸くなりました このガイドが出ていると 見にくいかと思いますので 一時的に「ライブビューオプション」で ライブビューの表示を隠しましょう そしてこのパネルをちょっと右に寄せます アイコンに縮小します こちらフルスクリーンの状態ですね 中間ですとこんな感じになります さらに一番小さい状態では― この4つの div 要素が 積み重なった表示になります ではグレーをダブルクリックして フルスクリーンにしましょう このレッスンでは CSS デザイナーパネルを使ったー CSS の編集の仕方についてご説明しました

Dreamweaver CC 2015のアップデート

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

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

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

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

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