HTML編もあります。
Package（≒プラグイン）をインストールすることで無限の可能性を秘めるSublimetext
動作も軽く、日本語化さえしてしまえば汎用性はグッと高まり、製作においての鍵となりうるエディタです。
どうせなら、エディタを代表するPackageの機能をさらっと使えるようにしよう！ということで、頻度の高そうなものを解説＋メモしていきます。
偶然にもこのブログに辿り着いたSublimetext初心者の方、Packageのインストール方法は前回の記事をご参照ください。
Emmetの基本操作
windowsマシンで利用する前提で話していきます。 基本的に「Ctrl+E」で機能させます。
m0 /* Ctrl + E */ margin:0;
変換したいコマンド末尾に文字入力のアレが点滅している状態で「Ctrl + E」
これで正しいコマンドであれば、意図したCSSプロパティに変換されます。
ハイフンやコロンなどが中途半端なところにあると上手く変換されないので注意してください。
EmmetでCSSを書く
EmmetでCSSを書いていく注意として、ここは通常通り
「プロパティ:値」と「:」で区切るかもしくは「プロパティ値」と続けて入力して変換します。
「プロパティ」のみでも変換はできますが、多くの場合はデフォルトの値が決まっていて、それが出力されます。
m mt mr mb ml /* Ctrl + E */ margin: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; /* Paddingも同じ要領 */ pos l t r b z /* Ctrl + E */ position: relative; left: ; top: ; right: ; bottom: ; z-index: ; d v /* Ctrl + E */ display: block; visibility: hidden; ov /* Ctrl + E */ overflow: hidden; cur /* Ctrl + E */ cursor: pointer; td /* Ctrl + E */ text-decoration: none;
など。基礎的なものはだいたいこの書式で変換してしまったほうが良いかもしれません。
では、上と同じコードを、値を指定して変換してみます。
m10 mt50 mr20 mb10 ml5 /* Ctrl + E */ margin: 10px; margin-top: 50px; margin-right: 20px; margin-bottom: 10px; margin-left: 5px; /* Paddingも同じ要領 */ pos l50 t10 r4 b6 z99 /* Ctrl + E */ position: relative; left: 50px; top: 10px; right: 4px; bottom: 6px; z-index: 99; d vv /* Ctrl + E */ display: block; visibility: visible; ovv ovxv ovyh ovyn /* Ctrl + E */ overflow: visible; overflow-x: visible; overflow-y: hidden; overflow-y: hidden; tdu /* Ctrl + E */ text-decoration: underline;
「overlfow:hidden」は、頭文字「h」ではなく「n」を添えても変換できるんですね！
値を一括して指定する
marginやpaddingなど、ショートハンドで記述する場合。
m:0-a m:10-10-50-50 p:0-a p:50-20-30-40 /* Ctrl + E */ margin: 0 auto; margin: 10px 10px 50px 50px; padding: 0 auto; padding: 50px 20px 30px 40px;
ハイフンで区切って指定します。順番は通常のCSS通り、上、右、下、左の順です。
ちなみに「:」は無くても大丈夫でした。
さらに便利なショートハンド
ベンダープレフィックスを付与してくれたりと、本当に痒いところに手が届き足も届くような仕様。
@f+ /* webfont */ anim- /* animation */ kf /* animation keyframes */ bg:ie /* IE background Image */ op:ie /* IE Opacity */ bd+ /* border */ bg+ /* background */ bxsh /* box-shadow RGB*/ bxshr /* box-shadow RGBA*/ bxshra /* box-shadow Inset RGBA*/ cm /* コメントアウト */ /* Ctrl + E */ @font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; } /* webfont */ -webkit-animation: name duration timing-function delay iteration-count direction fill-mode; -o-animation: name duration timing-function delay iteration-count direction fill-mode; animation: name duration timing-function delay iteration-count direction fill-mode; /* animation */ @-webkit-keyframes identifier { from { } to { } } @-o-keyframes identifier { from { } to { } } @-moz-keyframes identifier { from { } to { } } @keyframes identifier { from { } to { } } /* animation keyframes */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop'); /* IE background Image */ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* IE Opacity */ border: 1px solid #000; /* border */ background: #fff url() 0 0 no-repeat; /* background */ -webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color; /* box-shadow RGB*/ -webkit-box-shadow: inset hoff voff blur spread rgb(0, 0, 0); -moz-box-shadow: inset hoff voff blur spread rgb(0, 0, 0); box-shadow: inset hoff voff blur spread rgb(0, 0, 0); /* box-shadow RGBA*/ -webkit-box-shadow: inset h v blur spread rgba(0, 0, 0, .5); -moz-box-shadow: inset h v blur spread rgba(0, 0, 0, .5); box-shadow: inset h v blur spread rgba(0, 0, 0, .5); /* box-shadow Inset RGBA*/ /* */ /* コメントアウト */少し長くなってしまっています…
中でも、個人的には「anim-」と「kf」のコンビはとても素晴らしいと思いました！
CSS3から実装されているanimationプロパティは、なぜだか記述が覚えづらく苦戦していたので…
「@f+」も、webフォントを使う上で幅広いブラウザに対応させるべく必要な記述を一括で出力してくれます。.eot（IE）とか、.woff（Firefox）とか。
最後の、「bxsh」は、出力された値の「voff」「hoff」「v」「h」を任意の値に変更することを忘れずに。
さいごに
Emmetのチートシートを見て、メモ代わりに書いた記事ですが、
意外と「@」マーク無くていいんだ～とか、今回の「:」も無くてよかったりとか、発見がありました。
チートシートにはまだまだたくさん紹介されているので、ぜひ一度目を通してみてください。
CSS3プロパティの勉強にもなりますしね＾＾
しかしSublimetextがよく動作を停止してしまうんですが、どなたか原因をご存知でしょうか…
「知ってんぜ！」という方は、satohmsysまで一報くだされば幸いです。
でわ！