Dreamweaver CC 2015のアップデート

Bootstrapを使ったドキュメントの編集

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Bootstrapに対応したHTMLドキュメントを、視覚的かつ直感的な操作で編集することができます。
講師:
07:37

字幕

このレッスンでは Bootstrap の フレームワークで作られたドキュメントを— ライブビューで編集してみたいと思います いま Dreamweaver CC 2015 で開いている HTML ドキュメントは— 「ファイル」メニューの「新規」の中の 「新規ドキュメント」で— Bootstrap 対応の「事前に作成した レイアウトを含める」で作った— ひな形となるドキュメントです これを練習に使いましょう もう既に作ってありますので ここは一旦キャンセルします では要素を加えていきたいと思います まずここをクリックすると— 今選んでいるのは div 要素 そしてクラスが2つ付けられています ここにまた div 要素を追加したいのですが 右下の方を見ると— 「新規列を追加」という アイコンがありますので— これをクリックします そうすると2つの div 要素が加わりました クラスが同じ名前ですが .col-md-6 これはカラムのミディアムサイズ 6番ということです こちらも同じクラスです また上の真ん中も クラスのうちの1つは同じ名前になっています では新たに加えた div 要素に 何かテキストを入れてみたいと思います ここは見出しを入れることにしましょう div 要素を選んだ上で 「挿入」で「見出し」 H の中の4番を入れたいと思います H4 です そしてこの要素を今選んでいる div 要素の 前に入れるのか 後に入れるのか— 折り返すのか あるいは中にネストするのかと いう選択になります 今回は中に入れたいので 「ネスト」です ひな形のテキストが入りますが 編集します ダブルクリックをします そしてここは削除しましょう 「コンテンツ1」とします 同じ要領で 隣の div 要素も選んで— 「挿入」で— この「見出し」 ドラッグしても結構です その場合 div 要素の中に入れたい場合には— このように中の方に持ってくると ブルーのアウトラインと言いますか— うっすらと光ります これが中に入るという印ですので— マウスボタンを放します 同じテキストが出てきますから 編集はダブルクリックして— 削除 「コンテンツ2」とします 余白をクリックすると確定です では このコンテンツ1の方を選んで div 要素ですね— 幅を変えたいと思います 「列のサイズ変更」という 見出しが出てきますので— ドラッグして 上と揃えました ではこの「コンテンツ2」とありますが— この後に またもう一つ div 要素を加えたいと思います コンテンツ2の div 要素が選ばれた状態で— 「新しい列を追加」です そうするとまた .col-md-6 となりますので— 同じ要領で 「挿入」で— もう「見出し H4 」が 一旦設定されていますので— クリックでも大丈夫です ネストします そしてダブルクリックして— テキストを編集— 余白をクリックします さてここで H4 の上ですね— div 要素 .col-md-6 この幅を狭めてみます コンテンツ1と同じ幅 そうすると上にせり上がりました そしてクラスを見てみると .col-md-3 となっています 実はコンテンツ1の方も— 幅を狭めたらクラスが .col-md-3 に 切り替わったのですね ですからこのように 設定によって自動的に 適切なクラスが選ばれるようになります さてこの HTML ドキュメントは Bootstrap によって— レスポンシブなデザインになっています いまフルサイズですけれども 中間のサイズを選ぶと— コンテンツ 1, 2, 3 が 先ほどはカラムの表示だったのが— 縦に重なって並んでいます そしてさらに狭い 一番狭い 767 ピクセル以下の場合ですが— やはり重なっていますね この時だけ「コンテンツ2」という この div 要素の表示を消したいと思います この状態でコンテンツ2の div 要素を選びます 選び方は 1回クリックして— そうすると H4 になるのですが— この H4 の縁をクリックします このように選び損なうことがあるので— 非常にストレスが溜まる場合には H4 を右クリックして— 「親タグを選択」とすれば 簡単に親タグが選択できます さてこれを非表示にするときは— やはりこの div 要素を 右クリックして— 「エレメントを隠す」です これでなくなってしまいました アウトラインの表示は 編集用なのですが— あるとちょっと実際の表示と違ってくるので— 一旦隠しましょう 「ライブビューの表示を隠す」とすると— 点線が消えました これが一番狭い状態の場合ですね 767 ピクセル以下の場合です 真ん中の場合— やはり3段重ねになっているのですが— コンテンツ2は こちらには影響しませんので— 表示されます そして一番広いフルサイズの場合はもちろん— 3列にちゃんとカラム表示されると いう風になっています では改めて この一番狭い場合ですね— 非表示にしたものを表示したい どうやって選んだら良いかというのが 最初の疑問だと思うのですが— まずは あの点線を出しましょう この「ライブビューオプション」で— 「ライブビューの表示を隠す」 できればショートカットを覚えた方が楽です Mac は control + command + H Windows は Ctrl + Alt + H です 今回はただ 選び方は簡単です 親の div 要素を選んでしまっても構いませんので ど真ん中を右クリックです そして「非表示のエレメントを管理」という 項目を選ぶと— 編集上一時的に 見えないものが見えるようになります 見えないものだということが分かるような チェッカーマークになっていますね 気が利いています この状態でクリックします H4 ではありません 親要素にしましょう 「親タグを選択」します そうすると右下に目のアイコンが出てきて— これをクリックすれば再表示になります あるいは先ほどと同じように右クリックで— 非表示のエレメントを隠す— あるいは 再表示と 選べますので— 右クリックのメニューで選んでも結構です これで元通りということになるのですが— 一番狭い場合も 中間の場合も— 3段重ねでコンテンツ 1, 2, 3 が表示され— フルスクリーンの場合には— コンテンツ 1, 2, 3 はカラム表示されます このレッスンでは 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宛までご連絡ください。