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

CSSの省略コードを入力する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSの基本的なプロパティを省略コードで入力してみます。
講師:
02:13

字幕

このレッスンでは Emmet を使って CSS の基本的なプロパティを 省略コードという短縮された 記号で入力してみます。 今まっさらな HTML ドキュメントを 開いています。 CSS は外部ファイルで リンクをすることにしましょう。 title の後に link として Tab キーを押すと展開されて ファイルを指定すればいいという 状態になります。 ちょっとこれを取り消しましょう。 link の後に :(コロン)とタイプして CSS とタイプしてから Tab キーを押してみます。 そうするとデフォルトなんですけども style.css という href の 属性が指定されます。 これで行きましょう。 一旦ファイルは保存します。 そして実は style.css は 空っぽのものを作ってあります。 空っぽと言っても一応 body の セレクタだけあって あとここはコメントですね。 では ごく基本的なプロパティを 入力してみましょう。 例えば 幅 width です。 width の頭文字 w の後に 80% と 入力して Tab キーを押しますと、 width 80% ということになります。 今度は高さ height ですね。 h 100 単位をつけません。 そして Tab キーを押しますと、 デフォルトの単位 px が入ります。 今度は margin です。 これもやはり頭文字だけでいいんですけども m2. と小数点で入れます。 そしてコンマゼロは コンマだけでも構いません。 そうすると小数点が入ると em という単位になります。 ではもう1つ 今度は p で 15 。 単位はありません。 そうすると Tab キーで padding: 15px と いうことで入力されます。 このレッスンでは、CSS の 基本的なプロパティを 省略コード、短縮された 簡単な記号で入力をして 値を指定する方法について 説明しました。

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

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

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

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

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

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