簡単WEBサイトテンプレート（PHP）のアップデートを行いました。
主なアップデートとして、html1.0 strictからHTML5に変更いたしました。
見た目に大きな変化はありません。
HTMLのバージョンを変えたので、その分、htmlソースとcss装飾を変更いたしました。
上記はサンプルのページです。
以下の記述を追加いたしました。
コンテンツを拡張しようとすると、他にも利用するタグが出て来ると思いますので、その場合は都度追記していただければと思います。
header, nav, footer, aside, section {
margin: 0;
padding: 0;
display: block;
}
headerとnavとfooterのみ、とりあえず書き加えました。
まず、ヘッダーの記述です。
<header id="top"> <div id="head-l"> <div id="logo"><a href="/">コーヒー通販のコーヒーラボラトリー</a></div> <div id="logodisc"><h1>そのページで最も重要なキャッチ</h1></div> </div> <div id="head-r"> <ul> <li><a href="/sitemap.php">サイトマップ</a></li> <li><a href="/privacy.php">プライバシーポリシー</a></li> </ul> </div> </header>
次にグローバルナビ部分の記述です。
<nav> <div id="global"> <ul> <li id="now"><a href="/">TOP</a></li> <li><a href="/cate_01/">コンテンツ１</a></li> <li><a href="/cate_02/">コンテンツ２</a></li> <li><a href="/cate_03/">コンテンツ３</a></li> <li><a href="/cate_04/">コンテンツ４</a></li> </ul> </div> </nav>
フッター部分は以下のように書き換えました。
<footer> <div id="foot"> <div id="flink"> <div class="flinkw"> <ul> <li><a href="/">TOP</a></li> <li><a href="/cate_01/">コンテンツ１</a></li> <li><a href="/cate_02/">コンテンツ２</a></li> <li><a href="/cate_03/">コンテンツ３</a></li> <li><a href="/cate_04/">コンテンツ４</a></li> </ul> </div> <div class="flinkw"> <ul> <li><a href="/sitemap.php">サイトマップ</a></li> <li><a href="/privacy.php">プライバシーポリシー</a></li> </ul> </div> <div class="flinkbnr"><a href="/cate_01/"><img src="/img/fbnr.gif" alt=""></a></div> <div class="flinkbnr"><a href="/cate_02/"><img src="/img/fbnr.gif" alt=""></a></div> </div> </div> <div id="footdisc"><h4>フッターにページのサブキャッチ的な・・・。<br>全ページ共通していません。</h4></div> <div id="footad"> <address>Copyright © コーヒー通販のコーヒーラボラトリー All Right Reserved.</address> </div> </footer>
IE対策のため、googleで配布されているjavascriptを読み込んでいます。
IE8以前のためのブラウザ対策でして、今はもうだいぶIE8以前は少なくなったので、なくてもいいとは思いますが念のため。
いかがでしたでしょうか？
豆知識的なお話になりますが、HTML5でもxhtml1.0でも、ブラウザはタグを優先して挙動するため、バージョン記述が変わってても何も大きな変化にはなりません。
ですので、見た目に影響は出てないんですよね。
そんなこんなでまた進化させていこうと思っていますので、ご意見がありましたら、お気軽にご連絡くださいね。
執筆 : 清水 隼斗
「簡単WEBサイトテンプレート（PHP）のアップデート ver.180606」のシェアをお願い致します！