html5

Coda2にzen-codingを入れて、カスタマイズ

Coda2のzen-codingで地味に困る事。を追加。
解決方法をご存知でしたらぜひ教えて下さいませ。
追記ここまで。

日本語化されるまで触らないでおこうと思いつつ
ちょっとしたコーディングをする際にちょこちょこ起動してるCoda2

zen-codingを入れてhtml:5とやるとlang=”en”になっていたり<!DOCTYPE HTML>と少し気持ち悪かったのでカスタマイズする事に。

zen-codingを拾ってくる

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
Zen Coding for Coda v0.7.1 をダウンロードした

/Users/[ユーザー名]/Library/Application Support/Coda 2/Plug-ins/TEA for Coda.codaplugin
右クリックして「パッケージの内容を表示」

Support/Library/zencoding/zen_settings.py
をバックアップしてから
CotEditorで開いた

でもってenをjaに変更

[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,[/text]
[image]気持ち悪い場所

ついでに

私、気になりますっ!

なんでHTMLが大文字でlangはlocaleなんでしょう?
[image]書き換えます

!DOCTYPE HTMLを
!DOCTYPE htmlにしました。
[image]小文字とjaにしました

ちなみに、W3C(HTML5)の記述はこんな感じだった
[html]<!DOCTYPE html>
<html lang="en-US-x-Hixie">
[/html]
lang属性はなんて書くのがいいんだろう?

おまけでjQueryやviewportの記述も追加しておく
[image]色々追加
コンディショナルコメントのところの[]は\でエスケープ。

この段階のhtml:5をzen-codingすると

[html]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!–[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]–>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

</body>
</html>[/html]
こうなる。

テンプレ部分の参考サイト

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

ちゃんと勉強してテンプレを作りたいなー。

html5で隙間

sectionとarticleの違いがよく分からないまま
ちょいちょいhtml5でコーディングを始めた
そんなこんなで画像の下に隙間ができる。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

[css classname=”css-sh”]
img{border:0;}
[/css]

なのでvertical-align:bottom;を追加してみたら隙間が消えた。
[css classname=”css-sh”]
img{border:0;vertical-align:bottom;}
[/css]

昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな?

思い出せない

編集中 / HTML5、わからん事リスト。

ようわからん事

  1. articleとsectionの使い分けとか入れ子とか
  2. figureに含むfigcaptionは1つなのか
  3. <header id=”header”>みたいな表記をよく見かけるけど<header></header>にしない理由は? / headerはbody直下だけじゃなくセクション毎に発生するからidが必要なのかな、なんだかなぁ。

その他

nav(aside)に見出しがないとuntitled sectionになって気持ち悪いけど特に問題ないみたい。
HTML5.jp|質問の回答 #4 / Nav のタイトル(ドキュメント・アウトライン)

“untitled section” でも問題ない。outliner のディベロッパーには、”navigation” か、それに相当する言葉を使うべきだ、と提案されている。しかし、そうなるのかどうか、なったとしても、それがいつになるのかは、わからない。(直下に見出しがなければ、