前回に引き続き、レスポンシブWEBデザイン突貫工事シリーズの第３回。フレーズが長くて場所も取るので今後はRWDと略させていただきます（既に一般的なようです）。頭の中では大ざっぱに第５０回までに粗削りな状態でサイト公開に雪崩込む予定になっていますが、４月も残り４日という状況で、その計画は一体どれだけ現実的なのかと。では早速、前回紹介した菊池崇氏の連載を順に追って行きます。
　まず連載第１回を読んでみました。なるほど、RWDというのは見た目云々というよりむしろ、今後長期に渡る作業効率化とコスト削減を主眼に置いたコンセプトなのですね。その基礎作りをしっかり施工しておいてから、では見た目も良くして行きましょう、という考え方（あくまで自分なりの解釈）なのかと。

第1回「レスポンシブWebデザインとは」

ワイヤーフレームを描く

　続けて連載の第２回目を読んでみました。この回ではRWDならではのワークフローの説明と、作業下準備について書かれています。それに倣って僕も「ワイヤーフレーム」なるものを１５秒で描いてみました。もちろんチラウラ（チラシの裏）を使っています。
　頭からケツまで、何てことはない今では当たり前の１カラム。とは言っても、僕も2008年から「やっぱ１カラムだよね」と真ん中に１本ドカンと置いて他は何も付け足さないというスタイルを取っていましたから別に新しくもありません。と言うか、モバイル・ガジェットを少しでも意識すると、RWDなんて事は知らなくても必然として１カラムになりますよね。しかし僕のサイトの奇妙なところは、昔から通常のＰＣ向けサイトでありながら１カラムだということで、横幅が広がったから２〜３カラムにしようか…とは全く思わなかった点。今回の引っ越し先も「１カラム」にすることはほぼ決定していますが、読者が「サイドメニュー等が無いのが不便極まりない」と感じているのだとしても、そんなの知ったことか！

第2回「レスポンシブWebデザインのワークフローと画面設計」

そう言えばHTML5って何だ

　第１回〜２回はすんなり進めたけれど、連載の第３回目から進行具合はスローになってしまうのでした。まず最初にHTML5って、改めてどういう事だったっけ？から始まってしまったのです。なので今更だけど、参考記事をいくつか読んでみたり。そして「これはHTML5だよ！」って宣言はどうするのかしら？とか基本的なところもググってみました。なるほど、特に宣言らしい宣言は無いのですね…。

第3回「HTMLの用意とリセットCSSの作成」

　第４１回で紹介した「CodaでつくるWebサイト制作入門」に、Coda 2を使ったHTML5書類の作成方法が載っていました。Emmetプラグインをインストールしている状態で、新規作成したファイルに「html:5」とタイプします。

　次に「Cntlキー+E」を押すと…。ドン！と展開してこのように（↑）。感動した。なるほど、Emmetって言うなれば、速記のエンコード＆デコードをやってくれるんですね。もうだいぶ以前から、コードを打つ作業環境はこうなってたのね。ほおー。

　デフォルトだと英語仕様で宣言されるので、下の参考記事を読んで日本語仕様に変更しておきました。snippets.jsonファイルをCoda 2自身で開いて上書き保存。Coda 2の再起動で反映されました。つづく。

本日はここまで。引き続き連載第３回の記事を読みつつ、次回は簡易HTML&CSSを作ってみます。

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