Emmetでコード入力を速めよう

Bootstrapを設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントにBootstrapが使えるように設定を行います。
講師:
03:38

字幕

このレッスンでは CSS のフレームワーク Bootsrap を使えるように HTML ドキュメントを設定します。 Dreamweaver CC 2015 には 新規のドキュメントとして Bootstrap を設定したファイルが作れます。 HTML で Bootstrap のタブがあるのですけど 必要なファイルをサーバー及びローカルに 置く前提になっています。 今回は CDN ネットワークから ライブラリなどのファイルを読み込みたいので ここはキャンセルして 直接ドキュメントに設定を加えます。 Bootstrap のサイト bootstrap.com を開きました。 トップページで「Download Bootstrap」と いうボタンがありますのでここをクリックします。 そうするとダウンロードして使うと いうこともできるんですが Bootstrap CDN とありますね。 これをコピーしてしまえば ダウンロードしなくても ネットワークから直接必要なファイル CSS とか JavaScript ファイル、そういったものを 読み込んでおくことができます。 bootstrap.min.js ではこれを全部選んでコピーしてしまいます。 そして HTML ドキュメントの 一旦 head の中に入れておきます。 ここにペーストと。 そして CSS はここでいいんですけど あと2番目、この CSS は オプションということなので 今回は使いません。 削除してしまいます。 3つ目のこの script 要素の Bootstrap ライブラリです。 ここは改行しておきましょう。 この script 要素は body 要素の 閉じタグのすぐ上においておきます。 移動します。 そして もう1つポイントなんですが Bootstrap は jQuery を必要とします。 ですから jQuery もこの上に script 要素を 加えておかなければなりません。 jQuery のサイトは jquery.dom です。 ダウンロードのボタンが上にありますので クリックします。 そして少しスクロールしていって こちらが CDN ですね。 バージョンは1と2があるのですが 古いブラウザとの互換性を考えて まだバージョン1を選ぶ事が多いので ここでもバージョン1の記述を使います。 2つ目はこれオプションですので こちらの方は使わずに 1行目だけ使う事にします。 ではこれをコピーしますけど 但し // とスラッシュが2つになっていますね。 http: というのをつけてあげると CDN から読み込むことができます。 ローカルで試すときにはこれが必要となります。 コピーをしておきます。 HTML ドキュメントの方に戻って この Bootstrap の上にペーストします。 そして頭に http: ですね。 これで保存しましょう。 「ファイル」を「保存」です。 これでこの HTML ドキュメントで Bootstrap を使う為の準備ができました。 このレッスンでは HTML ドキュメントに Bootstrap を CDN ネットワークから 読み込んで 設定するやり方について説明しました。

Emmetでコード入力を速めよう

EmmetはHTMLやCSSのコーディングを強力に支援するプラグインです。Dreamweaverをはじめ、さまざまエディタにも対応しています。このコースではHTMLとCSSの基礎を学んだ方向けに、Emmetを使うさいの基本的な入力方法について解説します。このコースでEmmetを学習して、コーディングの効率を大幅にアップしましょう!

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

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

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

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