HTML5でマークアップに挑戦
最近、色々なセミナーでHTML5の話を聞いていたものの、行動できていなかったので、実際にサイトを組んでみよう!と思い、HTML5で組んでみました。
「こいけやクリエイト」のサイトをマークアップしてみました。
これまで<div id="header">としてた部分を<header>にしたり。
<section>と<article>のマークアップに迷ったり。
<ul id="nav">ってしてた部分を<nav>にしたものの、やっぱり<li>使いたいから<ul id="nav">ってもう一回書いてみたりなど。
まだ疑問は多々あります。(^_^;)
ソースはスッキリした様な…
しない様な…?
宣言文が短くなってスッキリしたかなあ?という感じでしょうか?
CSS3も少しだけ取り入れました。
「border-radius」(角丸)
「box-shadow」(シャドウ)
だけですが。
段組みでカラムレイアウトを使おうか迷ったんですが、結局はフロートで組んでしまいました。IEで崩れたらどうしよう…っていう気持ちが…
角丸がカクカク四角になるくらいならOKかな?
↑Safariで見た場合
↑IE8で見た場合
HTML5でマークアップする為に
参考にさせていただいたサイト
■HTML5.JP
http://www.html5.jp/
■今からハジメるHTML5マークアップ(羽田野さんのスライド)
http://www.slideshare.net/swapskills/futomi
■HTML5でサイトを作ろう
http://www.html5-memo.com/
マークアップのお手本にさせていただいたサイト
(どの情報をarticleに?sectionに?と迷った時に、お手本にさせていただきました。)
■無印良品
http://www.muji.net/
次はスマートフォン用のサイトを作ることが目標です。