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

Bootstrapのスタイルを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Bootstrapの背景やボタンなどのスタイルを、要素に定めてみます。
講師:
03:26

字幕

このレッスンでは Bootstrap のスタイルを 要素に当て嵌めてみます。 この HTML ドキュメントには Bootstrap を使う為に必要な ライブラリなどの設定だけは出来ています。 まだ body 要素は空です。 ここに要素を加えていきましょう。 まずは div 要素です。 そして ID と クラス 両方つけたいと思います。 div 要素は省略することができますので まず id の # マークで home という ID を付けます。 クラスも加えますので ドット で container とします。 これは Bootstrap でスタイルが 定められているクラスです。 そしてその子供に div 要素なので div は省略して構いません。 勿論書いても構わないんですけども 無駄な入力はやめておくことにします。 クラスはやはり Bootstrap のクラスで jumbotron というものです。 後でどうなるか見てみたいと思いますけども 背景がつきます。 そして子要素に h1 並べて説明書きを加えたいと思うんですけど p 要素と この辺にしておきましょうか。 これで Tab キーで展開します。 こんな形になりました。 h1 のところでカーソルが光っていますので 「ようこそ」と。 それから説明はままですが 「説明書き」と。 という風に入力します。 そして一旦ファイルを保存して Dreamweaver は「ブラウザでプレビュー」と いうメニューでブラウザで 確認することが出来ます。 Google Chrome で確認しましょう。 このような感じですね。 先程の jumbotron というのが この薄いグレーの背景です。 それから h1 と p 要素と 2つがちゃんと表示されています。 もう1つだけ今度は ボタンを加えたいと思います。 説明書きの下に やはり p 要素で そしてその子供に a 要素を置きます。 クラスを定めますので ドットで btn 。 Bootstrap のクラスです。 もう1つクラスを加えたいという場合には またドットに続けて クラス名を書けば結構です。 btn の default という クラスがありますので これで展開しましょう。 href の中はハッシュにしておきます。 そしてテキストですね。 「さらに詳しく」と。 では保存をして確認してみたいと思います。 「ブラウザでプレビュー」です。 「さらに詳しく」というボタンが加わりました。 Bootstrap のクラスを使っていますので ちゃんとボタンのように スタイルが変わってくれます。 押した場合はこんな感じですね。 このレッスンでは Bootstrap の クラスを割り当てて 要素にスタイルを設定しました。 jumbotron は背景を付けて 目立つようにしたい要素に 使うクラスです。 それからボタンの場合には クラス btn に加えて いくつか種類がある中から btn-default というクラスを使いました。 これらのクラスで要素の見た目が ボタンのようになったという事です。

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

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

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

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

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

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