もうすぐ第50回にとどきそうなこのあまりに冗長な引っ越しメモシリーズ。当初、そのお気楽な感じを演出しようと作った、あまりに投げやりなアイコンだけど、さすがに自分でも見飽きてきた…ということもあって、今回入れ替える事にしました。
以前「大浮世絵展」に出向いた時の影響を受けてかどうなのか、赤富士。テキトーで投げやりなところはまるで変わっていません。
HTML5には未知のタグがある…
さて、前回に引き続き、菊池崇氏の連載第3回をぼんやり眺めているのですが、そこで初めて見るタグがいくつか存在するのに気付きます。
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引っ越しメモ