コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

一夜漬けエメット

導入のポエット

突然ですが僕は一夜漬けとか苦手です。暗記とかめっちゃ苦手なんですよ。テストとかある日の前日は大体ゲームとかしてました。「一日でなんとかなるわけでもないし、どうでもいいや」とかなりませんでした?僕はどうでもいいやってなるタイプでした。

えっ?テストの結果ですか……、それは……。



一夜漬けでEmmet記法を覚える

そういったわけでして(?)、HTML使ってドット絵が描きたくなったんですよ。そうなったときに、ドット用のタグ要素を作るのが辛いって自体に陥ったのでEmmet記法を覚えることにしたのでした。まあ、HTMLはドット絵書く言語なのにそういう機能は標準で付いてないからね仕方ないよね [要出典]。

公式
Emmet — the essential toolkit for web-developers

チートシート
Cheat Sheet

何の説明もなく公式ページ貼りましたがこれが何かというと、HTMLやCSSの記述を省略記法で記述できるプラグインです。

参考:ドットインストール
Emmet入門


ドット絵がかけるようになった

みんな大好きJSFidlle*1がEmmet使えるよってことを今更になって知ったので、そこで何か作っていくことにします。

流石に16×16個のタグを用意するのは辛いなってことでEmmetで書いていきます。普通の連番出力だったら、スクリプトでループ回せばいいんですけど "HTMLとCSS" でドット絵描きたいだけだったのでEmmetを使うことにしました。


以下入力で連番クラス込みのタグが出力されるって便利ですね。今まで、その便利さに気づかなかったけど流石に100個を超えるタグを作ろうとすると僕もゴリ押しで書こうってのは考えちゃうんですよ。

div.class名>div.item_$*256 [TABを押す]

セレクタっぽい感じで使えるので改めて書き方を覚える要素がない。

あとこれで属性追加できるのも地味に便利な気がした。

a[href=#] [TABを押す]


その他の機能は別にどうでもいいかなって覚えていないです。結局僕が必要とした機能は二つだけだった。これなら一夜漬けでもなんとかなる……。まあ、こんなの覚えてもテストにでないですけどね。




まあ、今更Emmetてのを知ったので触ってみたって話でした。

おしまい

*1:僕しか使っている人を見たことがない……。