コーディングの心がけ 00:43:57
先日、CSS HappyLife で募集していたコーディングコンテストが締め切られ、2007年5月12日（土）に発表を控えていますが、僕は残念ながら締め切りに間に合わなかったので、このサイト上で中途半端な内容を公開して溜飲を下げておきます。
HTMLは完成していて、あとは細部のCSSを調整して、IE対策をどうするかと言う内容が残っています。
このコンテストのテーマは、「コーダーの提案力」という事らしいので、そういった意味で僕もHTMLに力を注いでみました。
■携帯からの閲覧人口の増加
W-ZERO3 や EM・ONE や iPhone などの登場により携帯デバイスからサイトを閲覧する人口が増加していくのは誰でも予想がつくでしょう。
今までの非力な携帯ブラウザではなく、本格的な携帯ブラウザを利用する人が今後増えていくことになります。
これまでのように携帯は携帯サイトという時代から、携帯もPCも閲覧できるサイト作りが必要になっていくのは必然といえるでしょう。
そのためには、以下の事柄に注意してHTMLとCSSを書くことが肝要だと言えます。
■画像ではなく、文字情報
僕の中のコーディングの基本とも言えますが、画像ではなく文字情報が主体となるべき部分では、imgタグによる画像を使用せず、CSSで背景画像を使うのが好ましいと思っています。特にサイトメニューや、見出しなどに画像を使うのは、生理的にも嫌いです。
imgタグによる画像の多用はデータサイズも必然的に増え、通信速度が厳しい環境ではいらいらの種です。alt による代替テキストは基本ですが、その前に画像とテキストの利用を厳密に分けて考えることが先決と言えるでしょう。
画像置換といえば、昔からCSSのホットトピックなので、テクニックについては述べませんが、そういったテクニックが使えるというのはCSSでサイトを作る上で最低限のスキルに入ってくるのではないでしょうか。
もちろん、CSSの進歩によって今あるテクニックを使うことなく、簡単に画像置換が可能になる日もいつか訪れますが、それでもあと３年くらいは難しそうです。
■内容の流れを理解できる文書構造
多段コラムのサイトをデザインするときでも、一つの文書の流れを意識することが重要です。
CSSをオフにしたときに内容が理解できるようであれば、大筋問題ないでしょう。ナビゲーションやサイド的内容物をどう扱うかが判断の分かれ目となります。
■メディアタイプ別のCSSを用意
これらを踏まえてHTMLコーディングを行い、CSSによって見た目を料理します。
CSSにはメディアタイプというものがあり、閲覧デバイスによって読み込むCSSを変えることができます。
例えば、Opera mini や Opera Mobile であれば handheld、Opera for Wii であれば tv といった具合です。Opera について詳しい違いを知りたければ、CSS for MobileOperaが優秀です。
これから Oepera だけではなく、他のブラウザもメディアタイプに対応してくるでしょうから、今からそれら向けのCSSを書くということは決して無駄ではないでしょう。
■終わりに
結局、コーディングコンテストの内容とはあまり関係の無い文章を書いてしまいましたが、これらのことを意識してコーディングをしてたよということです。
ただ、まだhandheld向けのCSSを書いてないという事実は内緒です:p)