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

Bootstrapでサムネイル画像を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Bootstrapのスタイルでサムネイル画像を並べて配置します。
講師:
02:58

字幕

このレッスンでは Bootstrap のスタイルで サムネイル画像を並べて配置してみます。 今開いているドキュメントですが 下の方にカラムの配置がしてあります。 この3つ目のカラムですね。 ここをサムネイル画像の 並んだものにしてしまいましょう。 ということでタイトルは ここは画像とします。 そして今あるあたりのイメージですが 下のテキストも含めて消してしまいましょう。 コードを全体に表示するようにします。 コードビューにしておきましょう。 Emmet で入力をします。 まずは div 要素です。 そしてクラスは row 並べるのでノードを使って その中にまたクラス 子供で col-xs ですね 小さいもので3つ並べたいので 4を3つ入れることにします。 x3ということですね。 そしてさらに子供で a 要素です。 そして href は# 井桁にしておきましょう。 このクラスに thumbnail という スタイルを使います。 thumbnail には b が入りますので ご注意ください。 その後子供に img です。 これはソースをやはり Adobe を 使ってしまいますので この辺をコピーして持ってきて サイズは少し小さめにします。 300 でなく 200x200 というふうにしたいと 思います。 これで展開しましょう。 タブです。 ではいったん保存をして ブラウザでプレビューします。 これがサムネイルのスタイルです。 200x200 は 300x200 に比べて ずいぶん小さいですね。 これは実は 実際にタブで開いてみると これだけの大きさがあるのですが サムネイルのスタイルを適応したために 小さくして表示してくれていると いうことになっています。 このレッスンでは Bootstrap のスタイルで thumbnail 画像を並べて 配置してみました。 その際新たに row と column 4ですね、 これを加えて a 要素に クラス thumbnail と入れて 画像をその中に子供として置くことによって thumbnail を並べて配置する ということができたわけです。

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

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

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

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

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

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