概要
『EmmetでHTML高速記述 Lv1, Lv2』問題
詳細
『EmmetでHTML高速記述 Lv1, Lv2』問題 の出題を開始しました。
『EmmetでHTML高速記述 Lv1』
https://codeiq.jp/ace/tbpgr/q725
『EmmetでHTML高速記述 Lv2』
https://codeiq.jp/ace/tbpgr/q746
CodeIQブログ中間ランキング
http://codeiq.hatenablog.com/entry/2014/02/24/155219
CodeIQ MAGAZINE最終ランキング(要ログイン)
https://codeiq.jp/magazine/2014/03/7195/
しえるさん(@cielavenir)製の優れもの採点ツール
https://dl.dropboxusercontent.com/u/110505645/CodeIQ/2014/02/emmet/emmet.html
しえるさんありがとうございます!
@tbpgr版お蔵入り採点ツール
Level1用
https://dl.dropboxusercontent.com/u/110505645/CodeIQ/2014/02/emmet/emmet_tools_lv1.html
短縮URL:http://p.tl/rgpu
Level2用
https://dl.dropboxusercontent.com/u/110505645/CodeIQ/2014/02/emmet/emmet_tools_lv2.html
短縮URL:http://p.tl/R3U2
どんな問題?
HTML,CSS等を素早く書くためのツールであるEmmetに関する問題です。
昔から知っている人はZen-Codingといったほうが通じやすいかもしれません。
コードゴルフ形式で短いほど高評価になっています。
通常のプログラム言語によるコードゴルフは、突き詰めるとトリッキーな内容になりますが
Emmetについてはそもそも短く書くことが目的なので実益も兼ねていています。
難易度別に2問用意してあります。
2問こなすと、EmmetのHTML向けの基本的な文法をひと通り把握できるようにしました。
文法を詰め込んだ結果、生成対象のHTMLが全く意味のないものになっていることを
予めお詫びいたします。
Emmetについてもう少し詳しく
元々はZen-Codingというツールでしたが、途中でEmmetに変更になりました。
エディタ・IDEのPluginやWebのツール、htmlのtextareaにツールとして設定したりと
多種多様な形態で提供されています。
基本的な構文はさほど多くない。
CSSの省略記法は元の名前を短縮したものがベースなので覚えやすい。
チートシートも色々とネット上にある。
と、習得のための敷居はとても低く導入も楽なので技術として投資効率が良いと思います。
・本格的にHTML、CSSを書く人
・小さなHTMLのサンプルでHTMLやJavaScriptの動作検証をする際など
・JavaDoc内のAPIコメント中のタグ
など、様々な人の役に立つと思います。
また、
などの記述にも利用出来ます。
アンケート
Emmetをはじめて利用する方も多いと思います。
気が向いたら下記のアンケート内容でツイートしてみてください。
フォーマット
1.利用経験、2.継続利用について、3.フリーメッセージ #Emmet問題アンケート
例
1.すでに使っている、2.今後も使おうと思う、3.なし #Emmet問題アンケート 1.はじめて、2.今後も使おうと思う、3.便利! #Emmet問題アンケート 1.はじめて、2.別に使いたくない、3.覚えるのが面倒 #Emmet問題アンケート
Lv1 経過情報
日次 | 総人数 | 平均文字数 | 最短文字数 |
---|---|---|---|
2014/03/10 10:00:00 | 100 | 78 | 75 |
2014/03/09 23:00:00 | 99 | 78 | 75 |
2014/03/08 22:30:00 | 97 | 78 | 75 |
2014/03/07 22:50:00 | 96 | 78 | 75 |
2014/03/06 22:35:00 | 90 | 78 | 75 |
2014/03/05 23:35:00 | 89 | 78 | 75 |
2014/03/04 22:40:00 | 83 | 78 | 75 |
2014/03/03 23:05:00 | 78 | 79 | 75 |
2014/03/03 00:00:00 | 75 | 79 | 75 |
2014/03/01 23:00:21 | 74 | 79 | 75 |
2014/03/01 00:30:21 | 74 | 78 | 75 |
2014/02/27 23:31:00 | 71 | 78 | 75 |
2014/02/26 22:00:43 | 65 | 79 | 75 |
2014/02/25 23:19:00 | 64 | 78 | 75 |
2014/02/24 23:30:00 | 59 | 77 | 75 |
2014/02/24 00:38:00 | 56 | 77 | 75 |
2014/02/22 22:24:00 | 50 | 77 | 75 |
2014/02/21 23:22:00 | 47 | 77 | 75 |
2014/02/20 23:43:00 | 43 | 77 | 75 |
2014/02/19 23:30:00 | 36 | 77 | 75 |
2014/02/18 22:25:00 | 29 | 78 | 75 |
2014/02/17 23:15:00 | 17 | 79 | 75 |
Lv2 経過情報
日次 | 総人数 | 平均文字数 | 最短文字数 |
---|---|---|---|
2014/03/08 22:45:00 | 74 | 152 | 144 |
2014/03/07 23:10:00 | 72 | 153 | 144 |
2014/03/06 22:40:00 | 69 | 152 | 144 |
2014/03/05 23:50:00 | 67 | 153 | 144 |
2014/03/04 22:45:00 | 65 | 152 | 144 |
2014/03/03 23:20:00 | 63 | 153 | 144 |
2014/03/03 00:10:00 | 62 | 153 | 144 |
2014/03/01 23:00:00 | 61 | 153 | 145 |
2014/03/01 00:30:00 | 61 | 153 | 145 |
2014/02/27 23:45:00 | 60 | 153 | 145 |
2014/02/26 22:04:32 | 56 | 153 | 145 |
2014/02/25 23:32:16 | 54 | 153 | 145 |
2014/02/25 00:00:02 | 52 | 153 | 145 |
2014/02/24 01:00:28 | 51 | 153 | 145 |
2014/02/23 00:06:00 | 44 | 154 | 145 |
2014/02/21 23:33:52 | 40 | 154 | 145 |
2014/02/21 00:00:00 | 36 | 154 | 145 |
2014/02/20 00:00:00 | 32 | 155 | 145 |
2014/02/18 23:32:00 | 23 | 155 | 145 |
2014/02/18 00:20:00 | 13 | 160 | 149 |
Emmet Lv1 フィードバック誤記述の修正
下記の部分が誤っておりました。申し訳ございません。
解答例
修正前
!<.class_div$#id_div${inner_div$}*5+hr+table<(.row$<.col${inner_column$}*5)*2
修正後
!>.class_div$#id_div${inner_div$}*5+hr+table>(.row$>.col${inner_column$}*5)*2
解答ポイント(タグ名を省略するとdivタグになります)
修正前
html<head+body<[id='div']
修正後
html>head+body>[id='div']
フィードバック文中の誤記述
修正前
あなたはの答案は
修正後
あなたの答案は
参考情報
公式サイト
http://docs.emmet.io/
Emmetツール一覧
http://emmet.io/download/
問題の評価に利用するツール。htmlなのでブラウザがあれば利用可能です。
https://github.com/emmetio/codemirror