
HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。


## Sublime Text 2にインストール

Sublime Text 2（以下ST2）向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。  
 具体的な手順は下記の通り。

1. コマンドパレット（Win:Ctrl+Shift+p、Mac:Command+Shift+p）から「Package Control: Add Repository」を選択
2. 「https://github.com/sergeche/emmet-sublime」を入力
3. コマンドパレットの今度は「Package Control: Install Package」を選択
4. 「emmet-sublime」が追加されているので選択
5. ST2を再起動


## Zen-Codingとの違い

基本の使い方はZen-Codingと変わりませんが、階層構造に対しての考え方に変更が加えられました。

Zen-Codingで複数階層を混ぜたコーディングを行う場合、「()」を駆使する必要がありましたが、Emmetでは「^」で「一階層上に戻る」という機能が設けられました。地味ですがかなり嬉しい機能です。

例えば、下記のようなコーディングを行いたい場合、

```html
<div id="head">
	<p id="siteName"></p>
</div>
<div id="main">
</div>
```

Zen-Codingでは、「()」を使う必要があるので、最初に書き忘れてしまうとカーソルを戻さないといけません。

```html
(div#head>#siteName)+div#main
```

Emmetでは、「^」を記述すれば一階層上に戻れるので、そのまま書き続けることが出来ます。

```html
div#head>#siteName^div#main
```


## その他変更点

CSSの記述方法にも変更点があるそうなのですが、CSSはあんまり使っていなかったので違いに関しては良く分かりませんでした。

こちらのページで詳しい説明がありましたので、ご紹介しておきます。  
 » [Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17](http://kojika17.com/2012/09/zen-coding-next-emmet.html)

こちらの紹介記事を見る限りCSSでもかなり効率化できそうですね･･･。勉強してきます。


## 注意点

現状ですが、まだ開発版ということもあり、不具合が発生してしまう恐れがあります。  
 自分の場合は、日本語変換確定のエンターキーを押すと、入力していた文字列が消える、という現象が起きました。

これがEmmetが原因なのか、他のプラグインとの衝突が原因なのかの検証は行っていませんが、バックアップを取った状態でインストールすることをオススメします。


## 参考

- [Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17](http://kojika17.com/2012/09/zen-coding-next-emmet.html)
- [Sublime Text 2をMacで使う | Kitchen Garden Blog – I'll cook and hack new one.](http://blog.hifumi.info/mac/sublime-text-2-for-mac/#emmet)
- [CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17](http://kojika17.com/2012/10/css-speedstar-for-emmet.html)

次世代Zen-coding「Emmet」をSublime Text 2で試してみた



HTMLメールを作成する際の注意点を少しだけ集めてまとめてみました。ちょっとだけ内容が古いかもしれないので、現状は違うのかもしれませんが、後方互換はなされていると信じて…。


## デザイン上の注意点

デザイン上の注意点は主にサイズ。テーブルレイアウトでも表現できなくは無いので、ファーストビューなどの大きさに気をつけるだけで大丈夫そうです。

- 横幅550～600px、少なくとも800px、できれば750px以内という説も
- ファーストビューに入る縦幅は300～500px以内

ただし、殆どのクライアントで初期表示は画像を読み込んでいない状態になるので、画像が読み込まれていないことを考えて作る必要があるみたいです。


## コーディングの注意点

懐かしのHTML4＋テーブルレイアウトで組む必要があります。今更テーブルレイアウトを組もうと考えると中々大変そう…。昔は良く組めたなぁと思います。

さらに、headタグ内を読み取ってくれないクライアントがあるそうなので、CSSは埋め込む必要があります。これでまたソースコードが大変な状態になりそう…。

- HTML 4.01 Transitional
- 文字コードはiso-2022-jp
- テーブルレイアウト
- インラインCSS
- 画像などは絶対パス

また、上述したように、画像が読み込まれない可能性が高いので、画像のサイズ指定をしっかりしておかないとレイアウトの崩れが起きてしまいます。  
 画像のサイズだけでなくtableタグなどのサイズ指定をしておくとより安心とのこと。


## 参考サイト

- [誰でも作れる！ “崩れない”HTMLメルマガ作成術（1/4）- ＠IT](http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki12/01.html)
- [横幅550~600px](http://webdevtoolsoboegaki.wordpress.com/2010/07/06/html%E3%83%A1%E3%83%BC%E3%83%AB%E4%BD%9C%E6%88%90%E8%A6%9A%E3%81%88%E6%9B%B8%E3%81%8D/)
- [HTMLメールの制作時に気をつけたい9つのポイント | コリス](http://coliss.com/articles/build-websites/operation/work/879.html)
- [HTMLメールの作成方法 | コリス](http://coliss.com/articles/build-websites/operation/work/104.html)




HTMLメール作成時の注意点ちょっとだけまとめ



HTML5から実装されるフォームの要素が多数あり、事前調査とスマートフォンサイトにも使えそうなことから、ちょこちょことメモを残しておきます。


## input typeの追加属性

inputタグのtype属性に、要素が幾つか追加されました。追加された項目については、[この辺り](http://www.html5.jp/tag/elements/input.html)で網羅されているので、そちらを参照ください。

中でも、number・date・tel・email等はお問い合わせフォームにも良くある項目なので、実装された時には活用したいですね。

また、rangeの様に入力形式が大幅に変わったものもあります。

<input type="range"></input>※対応していないブラウザでは、ただのテキスト入力欄になります。

JavaScriptを利用しないと作れなかったスライドバーでの入力方法は、色々な使い道がありそうです。


## placeholder属性

サンプルとして予め表示させておき、フォーカス時に非表示になるテキストを追加できるplaceholder要素が実装されます。

この機能についても、以前まではJavaScriptを利用して実装しており、HTMLだけで完結できるので、単純に工数の削減が見込めそうです。

<input placeholder="こんな感じに表示されます。" size="50" type="text"></input>


## required・pattern属性

まだOperaのみの対応となりますが、必須入力、正規表現によるパターン制限をHTMLのみでかけることが出来ます。

サーバサイドのプログラムか、即時反映であればJavaScriptが必要だった入力チェックですが、HTMLだけで完結できるのはものすごい便利そうです。

フォームだけでもまだまだ追加された要素は沢山ありますが、とりあえずサクッと調べてみて、気になったものを挙げてみました。  
 調べながら思ったことは、HTML5が世に出回った時にはフォームの組み方、入力形式が変わっているかもしれないなぁと感じました。


## 参考リンク集

- [input 要素 – フォーム – HTML要素 – HTML5 タグリファレンス – HTML5.JP](http://www.html5.jp/tag/elements/input.html)
- [【HTML5】HTML5で追加されたformの新要素をいろいろなブラウザで試してみた : アシアルブログ](http://blog.asial.co.jp/686)
- [【レビュー】HTML5 search、WebKitブラウザは使用注意 | エンタープライズ | マイコミジャーナル](http://journal.mycom.co.jp/articles/2010/09/10/input-type-search-on-webkit/index.html)




HTML5で追加されたフォームの新機能を試してみた


ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。

また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。

何か方法でもあるのかと調べてみたところ、「[メモ: iPad（iPhone）の困った仕様](http://hcondo2000.blogspot.com/2010/06/ipadiphone.html)」で、「二本指」でなぞることでスクロールする事が分かりました。

説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。

「直感的」な操作であるタッチパネルであっても、今回であればページ内の一部のコンテンツをスクロールさせるような、複雑な操作についてはどうしても特殊な操作が必要になりますね。

他のスマートフォンではどうなんでしょう？もうちょっと調べる必要がありそうです。

## 追記 2011年10月12日

地味に見られていて、解決策も投じてなかったので少し追記をしておきます。

### Androidの動作について

Andoroidは`overflow:auto;`に対応していないようで、二本指でスクロールしても動かないようです。  
[http://code.google.com/p/android/issues/detail?id=2118](http://code.google.com/p/android/issues/detail?id=2118)

### JavaScriptを使った対策

やはり二本指で操作をさせるのは、感覚的にも操作的にも分かり辛い事を考慮するとCSSのみでの対応は厳しいようで、既にJavaScriptのライブラリが公開されていました。  
その中で目に留まった二つを試しに使ってみました。

<dl><dt>[Skroll.js](http://5509.me/log/skroll)</dt><dd>方向は縦方向のみ対応しており、フリックでスクロールバーが表示されます。  
 注意書きにも記載されていますが、非力なスマホだと動作に不安定な箇所が出る可能性があるようです。</dd><dt>[jQuery.flickable](http://lagoscript.org/jquery/flickable)</dt><dd>縦横に対応していますが、スクロールバーはありません。  
 また、現バージョン（1.0b3）では、jQuery1.6.xに対応していないようです。</dd></dl>[デモはこちら](http://demo.sus-happy.net/sp/overflow/horizontal.html)

どちらにも一長一短があり甲乙付けがたいですが、長所が分かりやすいので場面場面で使い分けていくと良さそうな感じを受けました。

## さらに追記 2011年11月01日

どうもiOS5より、iPhone Safariで一本指でスクロールが出来るようになったみたいです。

参考：[iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 – くらげだらけ（くだくらげのBLOG）](http://d.hatena.ne.jp/kudakurage/20111025/1319475131)

また、「`-webkit-overflow-scrolling:touch;`」を指定すると、CSSだけで惰性スクロールが実装できるみたいで、「iPhoneだけ」ならJavaScriptを実装しなくても良さそうですね。

[デモも用意してみた](http://demo.sus-happy.net/sp/overflow/css-scroll.html)ので、試してみてください。

iPhone、iPadでのoverflow:scroll/autoの動作について


ページ内リンクなどで使われるアンカーポイントですが、特に指定をしないとウィンドウの上端に移動します。

ただ、ウィンドウの上端だと少し読みづらかったり、見つけづらかったりするので、少し余白を空けたいことがあります。

アンカーポイントの下に余白を空ける方法もあると思いますが、コーディングを済ませた後にアンカーポイントだけ挿入したい時に少し手間になってしまいます。

そこで、以下のようなCSSを適用させてみました。

```css
.hideAnchor {
	display:block;
	height:0px;
	/height:1px;
	overflow:hidden;
	text-indent:-9999px;
	margin-top:-10px;
	padding-bottom:10px;
}
```

上の記述でデザインはそのままに、通常挿入する位置の10px上の位置にアンカーポイントを挿入することが出来ます。

`height:0;`や`overflow:hidden;`、`text-indent:-9999px;`でテキストを隠しているのでSEO的にどうなんだろう？

HTMLのアンカーポイントの位置を上にずらしてみた


コーディングを進めていくにあたって、コンテンツ領域からはみ出ているデザインや、一部分だけ余白を取らないようなレイアウトの時に、ネガティブマージンを利用しています。

IE6での崩れも少なく（多少解釈が違う箇所もあります）、色々なところで使えるので、備忘録のためにもどのような場面で利用したのか控えておこうと思います。


## 見出し部分だけ左右の余白がないレイアウト

見出し部分だけ左右の余白がなく背景が敷いてあるようなレイアウトの際に、いちいち見出しの時だけ余白のスタイルのdivから外す方法もあると思いますが、ネガティブマージンを用いればその必要も無くなります。

### 見出しの時だけdivから外す方法

```html
<h2>見出し2</h2>
<div class="inner">
	<p>本文本文本文本文本文</p>
</div>
<h2>見出し2</h2>
<div class="inner">
	<p>本文本文本文本文本文</p>
</div>
```

```css
h2 {
	margin:15px 0;
}
.inner {
	padding:0 15px;
}
```

### 見出しにネガティブマージンを指定する方法

```html
<div class="inner">
	<h2>見出し2</h2>
	<p>本文本文本文本文本文</p>
	<h2>見出し2</h2>
	<p>本文本文本文本文本文</p>
</div>
```

```css
h2 {
	margin:15px -15px;
}
.inner {
	padding:0 15px;
}
```

ある意味見出しと本文が同じ階層になってしまうので、分かり辛いと言えばそうかもしれませんが、記述自体は減っていると思います。


## ※マーク等の時に2行目以降にスペースを空ける

[少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス](http://www.webcreatorbox.com/tech/css-tips20/)でも取り上げられてる方法で、こちらもネガティブマージン…では無いですが、マイナスの値を与えることで実現可能です。

設定していなくても読む文には困りませんが、こうした小さな気遣いが後々重要になってくると思っています。

```css
p {
	padding-left: 1em;
	text-indent: -1em;
}
```


## SEOを考慮した3カラムレイアウト

SEOを考慮すると、なるべくコンテンツエリアを始めに持ってきたほうが良いと言われていますが、3カラムレイアウトの時にはfloatの調整だけではコンテンツエリアを上に持ってくることが出来ません。

そこで、ネガティブマージンを利用することでHTMLの記述を、コンテンツエリア＞左メニュー＞右メニューの順に並べることが可能となります。

```html
<div id="wrap">
	<div id="cont">
		<p>コンテンツエリア</p>
	</div>
	<div id="lMenu" class="side">
		<p>左メニュー</p>
	</div>
	<div id="rMenu" class="side">
		<p>右メニュー</p>
	</div>
</div>
```

```css
#wrap {
	width:800px;
	margin:0 auto;
}
#cont {
	float:left;
	display:inline;
	width:400px;
	margin-left:200px;
}
.side {
	float:left;
	width:200px;
}
#lMenu {
	display:inline;
	margin-left:-600px;
}
```

CSSネガティブマージンのすすめ

英語の記事なので、具体的にどんな内容が書かれているか理解できていませんが、[オブジェクト指向CSS（Object Oriented CSS: OOCSS）について書かれた記事](http://www.sitepoint.com/blogs/2009/06/16/first-look-object-oriented-css/)を読んで、CSSの記述方法について、もしかしたらOOCSSとは違う考えなのかもしれませんが、少し考えてみました。

これまで、スタイルを付与したい箇所にid/classを指定し、それぞれに固有のスタイルを当てはめていましたが、

- Web上の表現として良く利用するスタイル
- そのサイト内でよく利用するスタイル
- そのページ内でよく利用するスタイル
- 指定の箇所でしか利用しないスタイル

に分けられるのでは無いかと考え、それらについて定義したスタイルを「使い回す」だけでコーディングを行って、効率が良いのか試しています。

具体的にどのような記述を行っているかは以下の通り。


## Web上の表現として良く利用するスタイル

ここは、どこまで含まれるのか模索中ですが、今のところ以下のようなスタイルをすべてのページで読み込むようにしています。

```css
/* リンク */
a {
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}
a.mr,
.mr a {
	text-decoration:none;
}
a.mr:hover,
.mr a:hover {
	text-decoration:underline;
}

/* 配置 */
.left {
	text-align:left !important;
}
.right {
	text-align:right !important;
}
.center {
	text-align:center !important;
}

.fleft {
	float:left;
}
.fright {
	float:right;
}
```

どのようなサイトでも使われている、リンク装飾、文字配置についてを指定して、サイトによってはリンク色などより詳細な値を上書きしています。


## そのサイト内でよく利用するスタイル

サイトによって余白のとり方などに特徴があり、数値が同じ箇所については、ここで指定しすべてのページで読み込むことで「使い回す」事が可能です。

例えば、以下のようなスタイルを用意しておきます。

```css
.topMg {
	margin-top:-20px;
}
.btmMg {
	margin-bottom:40px;
}
```

上記二つのスタイルで、

1. 指定要素の上に20px余白
2. 指定要素の下に20px余白
3. 指定要素の上に40px余白
4. 指定要素の下に20px余白

の4通りを作り出すことが可能です。

```html
<div id="preview">
	
	<p class="btmMg">一つ前の要素</p>
	<p class="topMg">指定要素</p>

	
	<p class="topMg">指定要素</p>
	<p class="btmMg">一つ後の要素</p>

	
	<p class="btmMg">一つ前の要素</p>
	<p>指定要素</p>

	
	<p class="btmMg">指定要素</p>
	<p>一つ後の要素</p>
</div>
```

上記の考えで、同様に「そのページ内でよく利用するスタイル」も定義を行い、最後に固有のスタイルを付与していきます。

ある程度のレイアウトでしたら、固有のスタイルを定義することなくHTMLを編集するだけで可能なので、効率が上がるのでは無いかと考えていますが…

明確な答えが出てきたらまた書くことにします。