ASAdesign

Memo

Memo

【HTML】共通部分を抜き出す（header footer）
質問

HTMLでホームページを制作すると下層ページなどの全てのページに<head>タグやヘッダー、フッターを挿入しなければいけないため、仮にヘッダーを修正したいとなると他のページ全て修正しなければならない。
工数が多く発生する、かつ修正も抜け漏れが発生する可能性があるため、<head>タグ、ヘッダー、フッターを別のファイルにし、トップページや下層ページでは、そのファイルを読み出す形にしたい。

回答

<head>タグ、ヘッダー、フッターをそれぞれPHPファイルにする。

/
index.html
 CSS style.css
 img 
 JS /script.js
/
index.php
head.php
header.php
footer.php
 CSS style.css
 img 
 JS /script.js

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Google アナリティクス -->

    <!-- 文字化け回避 -->
    <meta charset="UTF-8">

    <!-- タブレットの表示設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.4/dist/viewport-extra.min.js"></script> <!-- タブレット端末でのみ、PC向けデザインの最小幅をviewportの最小幅に設定 -->
    <script>
        (function(){ var ua = navigator.userAgent var sp = ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) var tab = !sp && ( ua.indexOf('iPad') > -1 || (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) || ua.indexOf('Android') > -1 ) if (tab) new ViewportExtra(1000) })()
    </script>
    <meta name="robots" content="index, follow">

    <!-- ページのタイトル -->
    <title></title>

    <!-- ページの説明分 -->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--IE対策-->

    <!-- スタイルシートをリンク -->
    <link rel="stylesheet" href="css/style.css">

    <!-- フォント設定 -->
    <link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@100&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">

    <!-- JQueryを使えるようにするためのコード -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

    <!-- スクリプトファイルをリンク -->
    <script src="js/script.js"></script>

    <!-- ▼OGPの設定 -->
    <meta property="og:type" content="article">
    <meta property="og:title" content=""><!-- ページのタイトル-->
    <meta property="og:description" content=""><!--ページの説明分-->
    <meta property="og:url" content=""><!--ページURL 絶対パス-->
    <meta property="og:image" content="img/ogp.jpg"><!--ページURL 相対パス-->
    <meta property="og:site_name" content=""><!--サイト名-->
    <meta property="og:locale" content="ja_JP"><!-- -->
    <meta property="fb:app_id" content=""><!--facebookのapp id-->

    <!-- ▼Twitter Cardsの設定-->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content=""><!--サイト名-->

    <!-- ▼ファビコンの設定-->
    <link rel="shortcut icon" href="img/favicon.ico"><!--ファビコン-->
    <link rel="apple-touch-icon" href="img/Fabcon.png"><!--スマホ用-->

</head>
<body>
    <!-- container -->
    <div class="container index">
        <!-- site header -->
        <header id="site-header">
            <div class="brand">
                <a href="/">
                    <div class="img">
                        <img src="img/logo.png" alt="logo">
                    </div>
                </a>
            </div>
            <nav>
                <ul class="">
                    <li>
                        <a href="about.html">About</a>
                    </li>
                    <li>
                        <a href="Bicycle.html">Bicycle</a>
                    </li>
                </ul>
            </nav>
        </header>

        <!-- content -->
        <div class="content">
            <div class="kv">
                <div class="img">
                    <img src="img/mainvisual.png" alt="メインビジュアル画像" class="">
                </div>
            </div>
            <main>
                <section id="section_1">
                    
                </section>
            </main>

            <footer id="footer">
                <p class="copyright">© 2020 Profile</p>
            </footer>
        </div>
    </div>
    <!-- /container -->
</body>
</html>

head.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Google アナリティクス -->

    <!-- 文字化け回避 -->
    <meta charset="UTF-8">

    <!-- タブレットの表示設定 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.4/dist/viewport-extra.min.js"></script> <!-- タブレット端末でのみ、PC向けデザインの最小幅をviewportの最小幅に設定 -->
    <script>
        (function(){ var ua = navigator.userAgent var sp = ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) var tab = !sp && ( ua.indexOf('iPad') > -1 || (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) || ua.indexOf('Android') > -1 ) if (tab) new ViewportExtra(1000) })()
    </script>
    <meta name="robots" content="index, follow">

    <!-- ページのタイトル -->
    <title><?php echo $title; ?></title>

    <!-- ページの説明分 -->
    <meta name="description" content="<?php echo $description; ?>">
    <meta name="keywords" content="">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--IE対策-->

    <!-- スタイルシートをリンク -->
    <link rel="stylesheet" href="css/style.css">

    <!-- フォント設定 -->
    <link href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@100&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">

    <!-- JQueryを使えるようにするためのコード -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

    <!-- スクリプトファイルをリンク -->
    <script src="js/script.js"></script>

    <!-- ▼OGPの設定 -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="<?php echo $title; ?>"><!-- ページのタイトル-->
    <meta property="og:description" content="<?php echo $description; ?>"><!--ページの説明分-->
    <meta property="og:url" content=""><!--ページURL 絶対パス-->
    <meta property="og:image" content="img/ogp.jpg"><!--ページURL 相対パス-->
    <meta property="og:site_name" content="<?php echo $title; ?>"><!--サイト名-->
    <meta property="og:locale" content="ja_JP"><!-- -->
    <meta property="fb:app_id" content=""><!--facebookのapp id-->

    <!-- ▼Twitter Cardsの設定-->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content=""><!--サイト名-->

    <!-- ▼ファビコンの設定-->
    <link rel="shortcut icon" href="img/favicon.ico"><!--ファビコン-->
    <link rel="apple-touch-icon" href="img/Fabcon.png"><!--スマホ用-->

header.php

        <!-- site header -->
        <header id="site-header">
            <div class="brand">
                <a href="/">
                    <div class="img">
                        <img src="img/logo.png" alt="logo">
                    </div>
                </a>
            </div>
            <nav>
                <ul class="">
                    <li>
                        <a href="about.html">About</a>
                    </li>
                    <li>
                        <a href="Bicycle.html">Bicycle</a>
                    </li>
                </ul>
            </nav>
        </header>

footer.php

            <footer id="footer">
                <p class="copyright">© 2020 Profile</p>
            </footer>

index.php

<?php
$title = '';
$description = '';
$is_home = true; //トップページの判定用の変数
include 'head.php'; // head.php の読み込み
?>

</head>

<!-- container -->
    <div class="container index fadeIn">
        <?php include 'header.php'; ?>
        <div class="content">
            <div class="kv">
                <div class="img">
                    <img src="img/mainvisual.png" alt="メインビジュアル画像" class="">
                </div>
            </div>
            <main>
                <section id="section_1">
                    
                </section>
            </main>
            
            <?php include("footer.php"); ?>
        </div>
    </div>
<!-- /container -->
</body>
</html>

タグ一覧

カテゴリ一覧