もうすぐ第５０回にとどきそうなこのあまりに冗長な引っ越しメモシリーズ。当初、そのお気楽な感じを演出しようと作った、あまりに投げやりなアイコンだけど、さすがに自分でも見飽きてきた…ということもあって、今回入れ替える事にしました。
　以前「大浮世絵展」に出向いた時の影響を受けてかどうなのか、赤富士。テキトーで投げやりなところはまるで変わっていません。

HTML5には未知のタグがある…

　さて、前回に引き続き、菊池崇氏の連載第３回をぼんやり眺めているのですが、そこで初めて見るタグがいくつか存在するのに気付きます。

header, nav, hgroup, article, aside, footer, section

　なるほど、読んで字の如くというか、意味がそのまんまの分かりやすいタグ。もう＜div id=”nav”＞とか書かなくてもイイのかも。でも hgroup の意味が今一つ分からなくてググってみたら「HTML5の仕様から外れました」という記事をチラホラ見かけたりして、ちゃんと綺麗に纏まった Latest な仕様書を参照しないとダメだな…と思いました。そこで日本語解説してくれている参考サイト。

　サラッと目を通すと「main」というタグなんかも出来ていたりして、まだその用法等は正確に把握しきれないのだけれど、しかし今は「とにかく引っ越し！」が最優先。態度として決して褒められたものではないが、多少の勘違い・用法＆文法ミスには目をつむり、間違いは追々修正していくとして先に進むとします。

Coda 2で簡易HTML作成

　早速、Coda 2で簡易過ぎるHTMLを作ってみます。実は今回初めてCoda 2で書類を作り出したのだけれど、Emmetプラグインとの組み合わせで、例えば「 art 」とだけ入力して「Cntlキー＋E」を押すと、一瞬で＜article＞＜/article＞まで展開してくれるのが、今さらだけど凄く感動。
　このささやかな感動だけで、今日一日は気持ちよく生きてゆける。

　上記HTML内の各要素の、前回描いたワイヤーフレームに沿った対応は次の通り。尚、記事中のサンプルHTML内にある「hgroup」は使用しない方向で。記事掲載当時はまだ仕様から外れていなかったと思われます。

＜header＞＜/header＞　←あたま
＜nav＞＜/nav＞　　　　←ナビ
＜article＞＜/article＞　　←体
＜footer＞＜/footer＞　　←ケツ

Coda 2で簡易CSS作成

　続いて簡易なCSSを作成。連載記事内の説明を良く読んで、まず先頭に一連のCSSリセットを記述し、各要素に対して適当なエリアと背景色を設定。Coda 2内でそれぞれウィンドウを分割表示させ、右端にプレビューさせたものが下図になります。Coda 2はその名前が示すとおり、Dreamweaverとは違って基本的にほぼコードを手打ち入力しないといけないのですが、属性の候補などをアシストしてくれるので、使い続けていれば慣れてくるのではないかと楽観しています。つづく。

でもたぶん、間に合わないんだろうな…。

2014-04-29 ＞ VPS＆WordPress引っ越しメモ