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

EmmetによるCSSコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
EmmetはCSSでも力を発揮します。様々な例をご紹介しますので、どんどん使っていきましょう。
講師:
08:59

字幕

このレッスンではSublime Text のパッケージ、Emmet による CSS コーディングを学びます。それではレッスンファイル begin をChrome で開きます。また、このファイルをSublime Text でも開きましょう。そしてこのように並べておきます。それではこのレッスンではEmmet による展開を練習していきます。まず HTML の head 部分を見てみます。こちらの head から27行目までのエリアですね。そしてその中にstyle というエリアがあります。これは HTML に直接 CSS を埋め込んでいるという形になっています。それでは css の方を入力していきたいと思います。それぞれセレクターはもう準備されているのでこの波括弧の後ろで Enter を押してcss を入力します。例えば幅 500 ピクセルにしたいという場合であればwidth: 500px という風に打つのが通常です。ですが今回は Emmet を使うのでw500 という風に打って、展開のショートカットキーCtrl+E を押しましょうこのように一瞬で w がwidth に変換されて値は 500px とい風に変換がされました。 また、height 500 もh500 として展開をしてみましょう。このように一瞬で500 x 500 ピクセルの箱にすることができました。今度は padding を作ってみましょう。padding の頭文字 pそして 10 と入力したらCtrl+E で展開です。このように一瞬で padding が入りました。また、margin というものも作ってみましょう。margin の頭文字 mそして 30そして margin は2つ、3つ、4つの値を持つことができますが2つの値を持つときはハイフンでつないでa と打ってみましょう。そして展開をします。展開をすると上下が 30 ピクセル左右が auto という状態の css を作ることができました。更に背景色も設定してみたいと思います。通常だと background という風に長い単語を打つ場合がありますが今回は bg と打って#e と打ちます。この4つの文字を打ち込んだらCtrl+E で展開をするとbg は background に#eee という風にグレーの色が入りました。これは例えば e が a だったらaaa が入りますし、a が 9 だったら999 が入ります。 また、ffcc00 などといったように6桁入力すると自動的に2桁ずつの省略形に短縮してくれたりもします。では続きです。例えばこの Practice の箱の中にフロートするものがあってそれを解除するためにoverflow hidden を掛けたい。overflow は結構長いスペルですがこれも o だけでそして値が hidden なので hoh と打って展開、Ctrl+E をしましょう。一瞬で overflow hidden を入れることができます。一旦上書き保存をして、ブラウザーを更新してみましょう。このように箱が装飾されていることが分かります。それでは次の装飾に行きましょう。h4 の括弧の後ろで改行をして、文字を太くしたいと思います。文字を太くするためのスタイルシートはfont-weight bold ですがfwb と各単語の頭文字を入力して展開をすると、このように太字の命令を書くことができます。今度はボーダーで囲ってみたいと思います。ボーダーは bd そしてボーダーは3つの値を持つことができますが予め + とい風に入力をして展開をしてみるとこのように一瞬で1px solid #000 というような基本形が入るようになっています。 色だけ変えたいので 000 をfff などと打ち替えてみました。では次に罫線と見出しの文字の間にすき間を作りたいと思うのでpadding 10 を p10 と、そして展開ですそして見出しと写真の間に余白を設けたいと思うのでmb 、これはmargin bottom となります。m だけだと marginmb だと bottom が追加です。30 を入力して展開をします。もしも ml だったらmargin left が入るわけです。一度上書き保存をしてブラウザーを更新すると、このような状態になっています。それでは次の Practice p を装飾してみましょう。Enter を押してc#ff4565 という風に色が厳密に指定されている場合このように6桁で入力します。そして展開をするとその色通りcolor が展開されると思います。また、行間をコントロールするline height を入力したいときはline height なのでlh と入力をして2 とい風にしてあげてから展開です。このように行の高さが2倍という風に入りました。そしてさらにこれを全体的に右揃えにしたいという場合があると思いますがそれは text allign というプロパティで値を right にしたいので rtar と打って展開です。 このように text-allign right が入りました。それでは上書き保存をして一旦ブラウザーを更新です。このようにカラーが入って右揃いになりそして行間が広がっているのが分かります。それでは今度 image の方を編集してみましょう。image を左に寄せたいのでfloat left を入力したいと思います。fl と入力して展開をすると、すでに float left が入っていると思います。そして画像の周りに枠を付けたいのでpadding 5 として更に bg#f で白い色を background に引きたいと思います。そして仕上げに border を付けて囲ってみたいと思います。border は bd+ と入力するとセットでこのように入るので後は色だけ書いてあげましょう。000 は真っ黒で少し強いのでこれを ccc 、灰色にしてみました。では上書き保存をしてブラウザーを更新です。最終的にこのような見た目になれば完成となります。今の一瞬だけでこのような css を入力することができました。また、この記法を知っておけば打ち直しなども非常に便利です。是非 css 入力もマスターしてみてください。 このレッスンでは Emmet によるcss コーディングを学びました。

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

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

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

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

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

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