当サイトは旧サイトです。新サイト・新ページは semlaboratory.jp/column/ にアクセスいただきますようよろしくお願いいたします。

HOME > コラム > SEMラボラトリー関連 > 簡単WEBサイトテンプレート(PHP)のアップデート ver.180606

簡単WEBサイトテンプレート(PHP)のアップデート ver.180606

コラム

簡単WEBサイトテンプレート(PHP)のバージョンアップを行いました。
今回、HTMLをxhtml1.0 strictからHTML5に変更し、諸々、若干の修正を行いました。
見た目何も変化はありません。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

SEMラボラトリー関連に投稿したコラム記事

簡単WEBサイトテンプレート(PHP)のアップデート ver.180606

はじめに・・・

簡単WEBサイトテンプレート(PHP)のアップデートを行いました。
主なアップデートとして、html1.0 strictからHTML5に変更いたしました。

見た目に大きな変化はありません。
HTMLのバージョンを変えたので、その分、htmlソースとcss装飾を変更いたしました。

組み込んだページ

上記はサンプルのページです。

ポイント
各種default.cssに追記した記述

以下の記述を追加いたしました。
コンテンツを拡張しようとすると、他にも利用するタグが出て来ると思いますので、その場合は都度追記していただければと思います。

header, nav, footer, aside, section	{
	margin: 0;
	padding: 0;
	display: block;
}
修正したHTMLソース

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/">コンテンツ1</a></li>
<li><a href="/cate_02/">コンテンツ2</a></li>
<li><a href="/cate_03/">コンテンツ3</a></li>
<li><a href="/cate_04/">コンテンツ4</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/">コンテンツ1</a></li>
<li><a href="/cate_02/">コンテンツ2</a></li>
<li><a href="/cate_03/">コンテンツ3</a></li>
<li><a href="/cate_04/">コンテンツ4</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の通常ページ