Dreamweaver CC 2015のアップデート

Bootstrap対応の新規ドキュメントをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Bootstrapに対応したレスポンシブデザインのHTMLドキュメントを新規につくります。
講師:
06:20

字幕

このレッスンでは フレームワーク Bootstrap に— 対応したドキュメントを 新規に作る方法と— 画面の簡単な操作方法についてご説明します Bootstrap というのは レスポンシブウェブサイトを開発するための— 最も代表的な HTML と CSS JavasScript の フレームワークです Bootstrap はウェブサイトや ウェブアプリケーションを作成する— フリーのソフトウェアツール集です タイポグラフィとかフォーム ボタン ナビゲーションその他の構成要素や— JavaScript の拡張などが HTML と CSS ベースの— デザインテンプレートとして用意されています Dreamweaver CC 2015 には このフレームワーク Bootstrap を使うための— 機能が標準的に装備されました その使い方をご説明したいと思います Dreamweaver CC 2015 を開いています まだサイトを構成するローカルのファイルは 何も用意されていません ここに新規にファイルを作成したいと思います では「ようこそ」のパネルの 「新規作成」から HTML を選択します そしてまずタイトルを入力する ここは今まで通りです 「サンプル」としましょう そしてドキュメントタイプは 「 HTML5 」としておきます そしてこの隣に Bootstrap のタブがあります ここで新規に Bootstrap の CSS を作成するのか— 既に用意されているものがあって それを使うのかという選択をします 既にあればその参照をここに入れますが 今回はまだサイトのルートが空っぽですので— 新規作成にします そして事前に作成したレイアウトを 含めるか含めないかのチェックです ここをチェックしておくとひな型として— テキストや基本的なレイアウトが されていますので— それを参考にしてドキュメントを 編集することができます チェックを外すとまったく何もない 真っ白なドキュメントが開きます 今回は参考にしたいのでチェックをしておきます そして作成のボタンをクリックします まず何かポップアップが いっぱい出てきたのですが— これは新機能を説明してくれるポップアップです この下向きのカギをクリックすると 「詳細情報」というボタンがあって— ここをクリックすれば Help の 新機能の紹介ページにとびます 要らなければ✖のボタンでクローズしてください 今回はクローズしておきます そしてサイトは空っぽに見えますが これを更新しましょう そうすると CSS には Bootstrap の CSS フォントも導入されています それから JavaScript も Bootstrap の Javascript に加えて— jQuery にも対応していますので jQuery のライブラリも入っています ではこのドキュメントは保存しておきましょう 「ファイル」から「保存」で この同じ階層に「サンプル」としておきます そして保存します これで Bootstrap 対応のドキュメントが ひな型として出来上がりました このテキストやレイアウトを参考にして— 手を加えていけばいい ということになるのですが— 簡単な操作としてまず レスポンシブウェブサイトに対応しています ですから上の方に出ているのは— 「ビジュアルメディア クエリーバー」 といって— 画面サイズに応じてレスポンシブに デザインが変わっていくためのバーです ちょっとこちらのパネルが若干 スペースをとっていますので— 右によけてもらいましょう 右向きの三角が2つありますが アイコンを縮小します これがフルサイズですね そして中間サイズがここで— このバーをクリックすると 中間サイズになります ここはまだ3段組になっていますね それからこの緑が 一番幅が狭いのですが— そうすると3段組だったものが 3段重ねになっています このようにサイトの幅に応じて レイアウトを変えることができる— いわゆるレスポンシブウェブサイトの レイアウトができる訳です この色の違いなんですが 緑というのは最大幅が決まっています 767 ピクセルですね それからこの水色については最小幅と最大幅が 両方決まっている場合です 768 が最小 991 が最大ということですね それからこの紫というか 紫がかった青なんですが— これは最小の幅 Minimum Width と 書いてありますが— それだけが決まっている場合には この色になります 992 ピクセルということでクリックすると この幅を変えることはできますし— 最小の幅から あるいはどこの幅からでも フルサイズにしたい時には— このグレーの部分をダブルクリックして下さい あとガイドラインが出ていますね これはもちろん 実際のブラウザで表示した時には— このガイドラインは出てきません 編集用のガイドラインなんですが これを出したり消したりできます それはこのライブビューオプションで— 「ライブビューの表示を隠す」とすると 消えます ですからこの幅の狭い場合に どのようなレイアウトになっているか— ということが実際の表示にほぼ近い形で 確認することができます またコントロールもちゃんと活きていますので 確かめることができます この出し消しはよく使うので ショートカットを覚えておいた方がお得です Mac OS は Ctrl + Command + H 「 Hide = 隠す」ですね Windows の場合には Alt + Ctrl + H で 出す消すのオン オフの切り替えになります では出しましょう グレーの領域をダブルクリックして フルサイズにします このレッスンでは新たに加わった フレームワーク Bootstrap 対応の— ドキュメントを 新規に作る方法についてご説明しました

Dreamweaver CC 2015のアップデート

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

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

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

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

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