HTML応用

HTML5

CSS3

jQuery

PHP

デザインのコツ

SEO対策

共通部分をテンプレ化

ヘッダーやナビゲーションはトップページ以外のページでも共通している場合がほとんどです。

そのような場合、ヘッダーの内容を修正する際に全ページのヘッダー部分を修正しなければなりません。

そのため、ページ数の多いサイトは、ヘッダー部分を別ファイルにして各ページで呼び出すようにするといいでしょう。

サイトの構成

以下のようなサイトがあり、「index.html」以外のページを増やす際もheader部分は共通しているとします。

    www

  • index.html
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ホームページのタイトル</title>
</head>

<body>


<div id="header">
   
</div>


<div id="container">
   
</div>


</body>
</html>

このサイトのheader部分を共通化してみましょう。

ファイルを分割してPHPコードで呼び出す

「index.html」のheader内を切り出して「index.php」と「parts-header.php」に分割しましょう。

「index.php」のheaderの内容があった部分にはPHPのコードが入ります。

    www

  • index.php
  • parts-header.php
index.php
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ホームページのタイトル</title>
</head>

<body>


<?php include("parts-header.php"); ?>


<div id="container">
   
</div>


</body>
</html>
parts-header.php
<div id="header">
   
</div>

header部分の修正が簡単に

先ほどのPHPコードを「index.php」以外のページにも組み込むことで複数のページから共通の「parts-header.php」を呼び出すことができます。

このように組むことで、header部分を修正する際に「parts-header.php」を修正するだけで全ページのheader部分へ反映することが可能です。

PAGE TOP