前回に引き続き、レスポンシブWEBデザイン突貫工事シリーズの第3回。フレーズが長くて場所も取るので今後はRWDと略させていただきます(既に一般的なようです)。頭の中では大ざっぱに第50回までに粗削りな状態でサイト公開に雪崩込む予定になっていますが、4月も残り4日という状況で、その計画は一体どれだけ現実的なのかと。では早速、前回紹介した菊池崇氏の連載を順に追って行きます。
まず連載第1回を読んでみました。なるほど、RWDというのは見た目云々というよりむしろ、今後長期に渡る作業効率化とコスト削減を主眼に置いたコンセプトなのですね。その基礎作りをしっかり施工しておいてから、では見た目も良くして行きましょう、という考え方(あくまで自分なりの解釈)なのかと。
ワイヤーフレームを描く
続けて連載の第2回目を読んでみました。この回ではRWDならではのワークフローの説明と、作業下準備について書かれています。それに倣って僕も「ワイヤーフレーム」なるものを15秒で描いてみました。もちろんチラウラ(チラシの裏)を使っています。
頭からケツまで、何てことはない今では当たり前の1カラム。とは言っても、僕も2008年から「やっぱ1カラムだよね」と真ん中に1本ドカンと置いて他は何も付け足さないというスタイルを取っていましたから別に新しくもありません。と言うか、モバイル・ガジェットを少しでも意識すると、RWDなんて事は知らなくても必然として1カラムになりますよね。しかし僕のサイトの奇妙なところは、昔から通常のPC向けサイトでありながら1カラムだということで、横幅が広がったから2〜3カラムにしようか…とは全く思わなかった点。今回の引っ越し先も「1カラム」にすることはほぼ決定していますが、読者が「サイドメニュー等が無いのが不便極まりない」と感じているのだとしても、そんなの知ったことか!
第2回「レスポンシブWebデザインのワークフローと画面設計」
日本のウェブデザインはなぜこんなにも世界と違うのか?(THE BRIDGE)
そう言えばHTML5って何だ
第1回〜2回はすんなり進めたけれど、連載の第3回目から進行具合はスローになってしまうのでした。まず最初にHTML5って、改めてどういう事だったっけ?から始まってしまったのです。なので今更だけど、参考記事をいくつか読んでみたり。そして「これはHTML5だよ!」って宣言はどうするのかしら?とか基本的なところもググってみました。なるほど、特に宣言らしい宣言は無いのですね…。
HTML5とは何かを簡単にまとめてみた(yahoo!デベロッパーネットワーク)
Webの3つの問題を解決する「HTML5」とは何なのか(@IT)
HTML5・DOCTYPE宣言文(ウェブデザインラボ)
第41回で紹介した「CodaでつくるWebサイト制作入門」に、Coda 2を使ったHTML5書類の作成方法が載っていました。Emmetプラグインをインストールしている状態で、新規作成したファイルに「html:5」とタイプします。
次に「Cntlキー+E」を押すと…。ドン!と展開してこのように(↑)。感動した。なるほど、Emmetって言うなれば、速記のエンコード&デコードをやってくれるんですね。もうだいぶ以前から、コードを打つ作業環境はこうなってたのね。ほおー。
デフォルトだと英語仕様で宣言されるので、下の参考記事を読んで日本語仕様に変更しておきました。snippets.jsonファイルをCoda 2自身で開いて上書き保存。Coda 2の再起動で反映されました。つづく。
もっとコーディングが早くなる「Emmet」の環境設定(tamshow.com)
本日はここまで。引き続き連載第3回の記事を読みつつ、次回は簡易HTML&CSSを作ってみます。
2014-04-27 > VPS&WordPress引っ越しメモ