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

Bootstrapでカラムレイアウトをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Bootstrapのグリッドシステムを使って、カラムでレイアウトしてみます。
講師:
04:07

字幕

このレッスンでは Bootstrap の Grid system を使って カラム、段組で レイアウトしてみたいと思います。 今 DreamWeaver で開いている HTML ドキュメントなんですが、 ナビゲーションバーがあって メインの部分がありますけれど その下に段組、三段組で入れたいと思います。 この下ですね。 HTML ドキュメントに入力する前に、 Bootstrap の段組のスタイル カラムのスタイルを確認しておきましょう。 bootstrap.com のサイトです。 CSS で Grid system そしてサンプルの中から Mobile, tablet, desktop というのを選択してみます。 タブレットであるとか スマートフォン、それから PC と 何種類かに応じて スタイルを設定できるのですが 今回は1つ この col-sm-4 これで作ってみたいと思います。 この数を足して12にする ということが基本になります。 ですから、これを3つ 使いたいと思います。 DreamWeaver に戻りまして Emmet で入力します。 まずは div 要素です。 クラスは row を最初に入れます。 div は省けますので row ですね。 その子供に、また div 要素。 ここで先ほどコピーしたものを使います。 ペーストしてしまいましょう。 ここに「ペースト」と ドットがちゃんと入ってますね。 そして、その子供に h2 の要素。 並べて img 更に並べて p というふうにしましょう。 そして、三段組と言いましたので この 4 の後に、掛ける 3 と いうことで 展開します。 さて、ソースがないと DreamWeaver 怒ってますね。 ここは、あたり ダミーの画像を入れることにします。 ダミーの画像を作ってくれる サイトがありますので これを利用することにします。 Placehold.jp です。 サイズはですね。 300 × 200 とします。 良く使うものがプリセットにあるんですが、 この中に 300 × 200 がないので 入力をしました。 そして「画像を精製する」 とすると URL が提供されますので、 これをコピーします。 DreamWeaver のコードの画面 狭いので 「コードビュー」 コードだけを全体に表示してしまいましょう。 そしてここにペーストですね。 タイトルも一応入れておきましょう。 これもダミーですけれど 「タイトル」と。 そして p 要素には「テキスト」と。 ちょっと入れる位置が違いますね。 「テキスト」としましょう。 せっかく Emmet で3つ入れたんですが、 コピーしたほうが良さそうですね。 コピーをします。 そして ここにペースト、 もう1つ 三行にペーストします。 そして 保存して確認しましょう。 「ブラウザーでプレビュー」します。 「ようこそ」というメインの部分の下に 三段組で タイトル・アタリの画像・テキスト が入りました。 このレッスンでは Bootstrap の Grid system を使って カラムのレイアウトをしてみました。 使ったクラスは 今回は col-sm-4 というものです。 それから Placeholder と言いますけれど ダミーの画像を作ってくれる サイトもご紹介しました。

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

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

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

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

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

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