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

テキストに連番を与える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素に加えるテキストに連番を与える方法についてご説明します。
講師:
03:24

字幕

このレッスンでは要素に加えるテキストに 連番を与える方法について説明します。 今まっさらな HTML ドキュメントを 開いていますけれども この body 要素の中で ためしをしてみます。 まずは a 要素ということで href は ハッシュ にしておきましょう。 井桁ですね。 そしてその中に img ということで src は入れないと DreamWeaver に怒られますので placehold を入れておきましょう http の // placehold.jp 大きさは 150 掛ける 150 という 感じにしておきましょう。 png ですね。 そしてこれを5つ作りましょう。 a 要素ごと合わせて 掛けることの5ということで 行の最後で Tab キーを打ちます。 そうすると... alt が抜けていますね。 じゃあ取り消します。 alt はまんまですけど 「画像」とします。 でも5つありますから 連番を入れたいと思います。 この場合には $ 記号を入れてあげます。 さてこれで行の最後で Tab キーを打つと 画像1、2、3、4、5というふうに 連番が与えられました。 テキストも加えましょう。 また取り消します。 そして同階層下に p 要素で加えます。 何と入れるかと言うと 「画像」ですね。 これを3桁で入れましょう。 001 002 という風に。 その場合には $ 記号を桁数分だけ 3つ打ちます。 行の最後で Tab キーを打ちます。 これで 画像 001 002 003 と いう風に入りました。 もう少し紹介しましょう。 取り消します。 001 からでなく 10 からスタート したいという場合には @ マークの後に スタートする番号を入れます。 @ マーク 10 として Tab を打つと 10 11 12 13 14 ですね。 という風に入って行きます。 もう1つだけ紹介します。 取り消して @ マークの後に数字は消してしまって マイナス記号を入れます。 こうすると逆順になります。 つまり 005 から 4, 3, 2,1 という風に さかのぼるということです。 このレッスンでは要素に加えるテキストに 連番を与える方法について説明しました。 連番は $ 記号。 そして $ 記号を複数書くと その桁数で表示されます。 更に @ マークの後に数字を書くと その数字からスタートします。 逆順にしたい場合には @ マークマイナスという事でした。

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

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

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

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

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

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