WebデザイナーのためのSublime Text入門

EmmetによるHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Emmetを使ったHTMLの入力支援をご紹介します。
講師:
08:51

字幕

このレッスンではSublime Text のパッケージ、Emmet の HTML の入力支援について学びます。それでは emmet_html_begin の方をブラウザーで開きます。同様に同じ begin のファイルをSublime Text でも開いていきます。まず Emmet によるHTML コーディングですが2つショートカットを覚える必要があります。1つ目が展開、Expand の E でCtrl+E になります。もう1つが囲む、Wrap というのがあってこちらは後ほど紹介をしますでは練習をして行きましょう。Sublime Text で開いたこのファイルの下の方に実は Practice27行目に見出しがあります。ではこの p タグで囲まれているものが実は Emmet で使われるショートカットのようなものになっているのでこちらを一緒に入力をして行きましょう。28行目の行末に Enterそして h1 とそのまま打ちます。そしてショートカットCtrl+E を押すとこのように h1 のタグが入りました。つまりタグの名前を書いてあげればすぐにそのタグの開始タグと終了タグをCtrl+E で補完できるということになります。 他にも p と打てば展開でこのようになりますしa と打ってCtrl+E として展開すれば自動的にリンクタグが入ります。それでは次の Practice です。この行末の p から改行を打って同じように打ちましょう。h1span と入力をしました。この括弧は子要素を表す括弧です。では Ctrl+E で展開をします。このように h1 タグの中にspan タグが入っているという構成が作れました。同じように、p の中にem タグという風にすれば展開したときにはこのような状態になります。それでは次の Practice です。h1.logoドットは css においてはクラスを意味していました。それでは展開をしてみましょう。Ctrl+Eこのように h1 にclass="logo"というのが入りました。class= やダブルクォーテーションを打つ必要がないので打ち間違いがグッと減るかと思います。それでは次の Practice です。今度は p そして子要素の括弧を打ち込んだらlorem という風に打ち込みます。そして展開をしてみましょう。Ctrl+Eこれは英語圏では定番のダミーテキストを入力するためのショートカットです。 また、plorem5 という風に数字を付けてから展開するとどうなるでしょうか。そうすると5単語分とい風にダミーを入力することができます。それでは次の Practice です。今度は id に挑戦してみましょう。#header と入力をして展開をしましょう。このように id 属性を付けたいときは#、ハッシュを付けてあげれば大丈夫です。今度はそれを組み合わせてみましょう。#headerh1+p という風に+ で繋いであげます。そして展開をしてみましょう。これは子要素の括弧ではなくプラスを使うと、同じ階層に別の要素をプラスすることができるという風になっています。それではさらに応用です。少し長いですが打ち込んでいきましょう#wrapper#header と+#content と+#footer という風に書いてCtrl+E で展開をするとウェブサイトでは定番のレイアウトのようなものが一瞬で骨格ができてしまいます。そして次の Practice も挑戦してみましょう。ul の子供の li が3つという風に打ちたいときは* が掛け算になっています。そしてその子供にそれぞれ a を設けたいという場合はこのように *3 の子供の a と書いてあげて展開をしてみましょう。 Ctrl+Eこのように一瞬でリストが3つ、そしてそれぞれに a タグが含まれるようになりました。その応用を学んでみましょう。今度は ul の子供の li が3つ欲しくて、その中には aここまでは上と一緒です。それぞれにクラスを付けたいということで.item と付けてあげますただ、その item は連番でクラス名を付けたいと思います。連番を表現するのは実はこのドルマークになります。この状態で展開をしてみましょう。Ctrl+Eそうするとこのように a にクラス属性が01, 02, 03 という風に連番で入ります。一度 Mac は Command+ZWindows は Ctrl+Z で取り消してみましょう。もしもドルマークが1つだったら。展開してみます。01 ではなく 1, 2, 3 と1ケタの連番になるということになっています。それでは次の練習です。今度は item という文字を3つほど打ち込んでみましょう。よくナビゲーションを作るときにあるのがもうナビゲーションが箇条書きで決まっているのだけれどもそれをタグで包む、囲むという作業をすることがあります。Emmet はこの3つを一気に囲むということが可能です。 それではこの item を3行分包んで、Mac は Ctrl+WWindows は Ctrl+Shift+Gというショートカットを打ってみましょう。そうすると下にこのようなwrap の入力欄が出てきます。ここにこの練習ファイルで書いてある文言を一緒に入力していきましょう。ul#gnavli が行数文、そしてその子供に a がクラス item という風につけてあげてそして連番を付けてあげるという風に順を追ってコードで包むということが可能です。確定は Enter を押します。このように直感的な入力方法でミスの少ない HTML を記述することができます。このレッスンでは Emmet によるHTML コーディングを学びました。

WebデザイナーのためのSublime Text入門

Sublime Textは世界中で多くのプログラマーに愛されている大人気のテキストエディタです。このコースでは、Sublime Textを使うのが初めての方にもわかりやすいようにその使い方を丁寧に解説していきます。コースの後半では実際にSublime Textを使ってコーティングを行っていきます。

2時間16分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月18日

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

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

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