2011

08/24

CodaのZen-CodingをHTML5 Boilerplate的なアレで

普段コーディングで使っているエディタがCoda(Mac専用)なのですが、
プラグインのTEA for Codaを入れるとZen-Codingが使えるようになります。
(もしかしたらVer.古いかもしれません

Zen-Codingとはなんぞやというところで、


div#container>div.logo+ul#nav>li.navList0$*5>a

でこれを解釈というか展開というかおまじないをすると

<div id="container"></div>

こんな感じに展開してくれます。
サイトの骨組みを作る時に非常に助かっています。
これ以外にも様々なテンプレートのようなものが存在し、自分でも作ることが可能です。

よく使う一例として


html:5

を展開すると


 

と展開できます。

と思いきや、lang=”en”になってたりしませんか？
きっと日本語圏の人は「lang=”ja”になって欲しい！」と勝手に解釈して無理矢理進めます！

ということで変更してみましょう！

変更するファイルは
/User/hogehoge/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin

これでパッケージの内容を表示から開くとFinderで開くと思いますので
Support/Library/zencoding/zen_settings.py
を開きます。

そうすると10行目あたりに

'variables': {
'lang': 'en',
'locale': 'en',
'charset': 'UTF-8',
'profile': 'xhtml',

というのがあるので変更して保存します。
保存後は一度Codaを再起動しないと反映されませんのでご注意を。

これで基本的なhtmlができるので


div#container>div#header+div#content+div#footer

<div id="container"></div>

こんな風に展開していって構築していきます。

でHTML5 Boilerplateを組み込んでみました！
というところで長くなりすぎてしまったため

まずZen-Codingの話をしなくてはならないというところで力尽きました
説明しようとすると割と内容が多いことに気づいたので
次回に・・・
持ち越し・・・
たいな・・・

preload preload preload