HTML5／CSS3で設計してみました
HTML2010年12月23日
近い将来、実際の案件でHTML5で作成する時に備え、今のうちにスキルを身につけておくために、試しにHTML5／CSS3でサイトを設計してみました。
※Firefox3.6以上もしくはSafari 5以上でご覧ください
HTML（マークアップ）について
HTML5で新しく追加された要素を積極的に使いました。
header、footer、section、article、nav、hgroup等、HTML5ならではのマークアップをしているため、従来のマークアップとはかなり異なるものとなっています。
divは一箇所しか使っていません。以前までdivでsection的にマークアップしていた箇所はほとんどsectionを使っています。
CSS3について
「gradient」「radius」「box-shadow」「text-shadow」等、CSS3で新しく実装されたプロパティもたくさん使用しています。
思った以上にグラデーションもphotoshop並に細かく指定できるので、かなりこりゃ便利だ！と感じました。何より角丸が画像不要なのがこんなにも楽だとは！
ただ、現在まともにサポートされているブラウザがFirefoxとSafariぐらいのため、CSSの書き方が下記のようにかなり特殊なものになっています。
header{
width:900px;
margin-bottom:20px;
border:1px solid #ccc;
border-top:none;
-moz-border-radius-topleft:0;/*FireFox*/
-moz-border-radius-topright:0;/*FireFox*/
-moz-border-radius-bottomright:6px;/*FireFox*/
-moz-border-radius-bottomleft:6px;/*FireFox*/
-webkit-border-top-left-radius:0;/*Safari,Google Chrome*/
-webkit-border-top-right-radius:0;/*Safari,Google Chrome*/
-webkit-border-bottom-right-radius:6px;/*Safari,Google Chrome*/
-webkit-border-bottom-left-radius:6px;/*Safari,Google Chrome*/
background:-moz-linear-gradient(top, #f4f4f4,#fff 25%);/*FireFox*/
background:-webkit-gradient(linear, left top, left bottom, from(#f4f4f4),color-stop(0.25, #fff));/*Safari,Google Chrome*/
-moz-box-shadow:#ededed 1px 1px 4px;/*FireFox*/
-webkit-box-shadow:#ededed 1px 1px 4px;/*Safari*/
}
悩んだ点
sectionを入れ子にすべきなのか、はたまたarticleを使うべきなのか。結局セクションの中のコンテンツはarticleでマークアップする、というところに落ち着きました。様々なサイトで調べてみましたが、おそらく使い方としてはこちらが正しいと思います。
総括
マークアップ自体は慣れればさほど難しくありません。やはり問題はCSS3のほうです。
とにかくIEがアホな進化を続けていく限り、これを実際の案件で使えるのはいつのことやら...
しかも現時点でコレで設計しようとするとかなりのブラウザハックが必要になり、煩雑になってしまうのはどうやっても避けられません。
かといってグラデーションや角丸だけでも新しく覚えなければいけない書式も多く、またグラデーションだけとってもmozilla系とSafariでまったく書き方が異なるため、かなり大変です。
とりあえず近い将来対応できるよう、今のうちに少しずつ習得しておくのが賢明かなと思います。
この記事を読んでいる方にオススメの記事
- HTML正規表現／Regular Expressionの基礎
- HTMLコーディングが3～4倍速くなるプラグイン「Zen-coading」
- HTML国内のレスポンシブWebデザイン10選
- HTMLDreamweaverでの正規表現
- HTMLHTML5の特徴をまとめてみました
- HTMLXML宣言について
- ※承認制のため、即時には反映されません。
この記事にコメントする