CodePenでEmmetを使う

http://docs.emmet.io/cheat-sheet/

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-5-53-44

Emmetとは

Emmet は元々 Zen-coding という名前で開発されていた HTML と CSS のショートカットのようなもので、tag名や()を全て入力しなくても、簡略化した記法の最後に tab を押すことで、HTML や CSS へ展開できるコーディングのためのシステムです。

Emmetを各種エディター、CodePenで使うには

Emmet は Sublime Text や Atom 等、ほとんどのエディターのためにプラグインが用意されており、使用することができます。

CodePenでは最初からEmmetを使うことができます。

Emmetの例

Emmetの一例を以下に記します。全てのEmmetについては本家サイトのショートカット集から確認できます。http://docs.emmet.io/cheat-sheet/

See the Pen used emmet by nakanishi (@nakanishi) on CodePen.

よくあるヘッダーのナビを作る

See the Pen used nav by nakanishi (@nakanishi) on CodePen.

HTMLの構造

navを用いて、その中にul要素を配置する。

li要素の点と余計な空白を消す

li {
 list-style: none;
 padding: 0;
 margin: 0;
}

liを左に寄せて、隙間を調整する

li {
 text-align: center;
 float: left;
 border: solid 1px;
 padding: 0px 10px;
 margin-left: -1px;
}
list:first-child {
 margin-left: 0;
}

aリンクを修正

a {
 text-decoration: none;
 color: black;
}

補足

ボーダー1pxを追加すると、線が2本重なって2pxの線になってしまう。この場合は、全体をmargin: -1pxし、さらにfirst-childだけmargin: 0にすればよい。

各アイテム間の隙間はmarginではなくpaddingを使用する。

Web標準とブラウザの対応状況

Web標準化の流れ

HTMLやCSSといった技術の標準化は、基本的にW3C(World Wide Web Consortium)によって行われており、草案(WD)→最終草案(LC)→勧告案(PR)→勧告(REC)という仕様策定プロセスを経て「勧告」の段階で正式採用となる。

先行実装とベンダープレフィックス

しかし実際には、勧告=正式採用される前、草案に掲載される頃には「各社が先行して機能を実装」しており、勧告段階よりも早く実質的に使用に耐える仕様も多い。このように勧告前に各ブラウザが先行して搭載した機能に関してはベンダープレフィックス(例:-moz-、-webkit-) が付加された状態で運用される。

ブラウザの対応状況をCaniuse.comで確認する

http://caniuse.com/ で各機能の対応状況を確認できる。緑が対応、黄色が部分的に対応、赤が未対応である。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-12_23_57_30

ユーザー数の比率を確認できることもできる。また Showing all を選択すると(現行だけではなく)全てのブラウザの状況を確認できる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-12_23_57_45