質問の背景

下記の様な静的ウェブサイトを作成する場合にはサイドメニュー内コンテンツA「その１」〜コンテンツC「その３」の9ページ分を作成する必要があると思っているのですが、
後からページを追加する時に疑問に思った点がありますので、質問させてください。

質問

例えばサイドメニュー内コンテンツAの「その３」の後ろに「その４」を追加したい場合に
9ページ全てに「その４」のaタグを追加、「次のページへ」のリンク先を訂正する必要があると思いますが、これはスタンダードな方法なのでしょうか。

複雑なサイトの場合、追加忘れやリンク先の訂正間違いが起こる気がして、
皆様がどの様に対処しているのか知りたく思っております。

予想される事

1 この方法がスタンダードで追加作業が大変なのは仕方がない。
2 他に追加が簡易になる技術やコードの書き方がある。(ワードプレス?)

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="css/styles.css">
6    <title>sample</title>
7  </head>
8  <body>
9    <header>
10      <h1>ヘッダー</h1>
11    </header>
12    <section>
13      <main>
14        <h1>メインコンテンツ</h1>
15        <p>コンテンツA その1</p>
16        <p>内容</p>
17        <nav>
18          <ul>
19            <li><a href="">次のページへ</a></li>
20          </ul>
21        </nav>
22      </main>
23      <nav class="side_menu">
24        <h1>サイドメニュー</h1>
25        <ul>
26          <li>コンテンツA
27            <ul>
28              <li><a href="">その1</a></li>
29              <li><a href="">その2</a></li>
30              <li><a href="">その3</a></li>
31            </ul>
32          </li>
33          <li>コンテンツB
34            <ul>
35              <li><a href="">その１</a></li>
36              <li><a href="">その２</a></li>
37              <li><a href="">その３</a></li>
38            </ul>
39          </li>
40          <li>コンテンツC
41            <ul>
42              <li><a href="">その１</a></li>
43              <li><a href="">その２</a></li>
44              <li><a href="">その３</a></li>
45            </ul>
46          </li>
47        </ul>
48      </nav>
49    </section>
50    <footer>
51      <h1>フッター</h1>
52    </footer>
53  </body>
54</html>

css
1html {
2  height: 100%;
3}
4body {
5  margin: 0;
6  padding: 0;
7  height: 100%;
8  display: flex;
9  flex-direction: column;
10}
11header {
12  background-color: orangered;
13}
14section {
15  width: 100%;
16  display: flex;
17  flex: 1;
18}
19main {
20  width: 80%;
21  background: pink;
22}
23main ul {
24  display: flex;
25  list-style: none;
26}
27
28.side_menu {
29  width: 20%;
30  background: orange;
31}
32footer {
33  background: green;
34}

m.ts10806

2020/03/10 00:52

静的でないといけない理由はあるのでしょうか

stsyco

2020/03/10 10:30

コメント頂き有難うございます。静的でないといけない特別な理由はございません。サイト作成を勉強中でまずは静的をと思った次第です。動的処理も今後勉強していきたいと考えております。

行動規範の内容に同意します

回答4件

複雑なサイトの場合、追加忘れやリンク先の訂正間違いが起こる気がして、

「静的サイトジェネレーター(SSG)」を使えばその辺の解決は容易です。

まず、HTMLの型紙を用意します。サイト内の全頁で共通の部分（ヘッダとかフッタとか）についてはHTMLコードを直接そこに記述し、ページごとに異なる部分は変数として置いておきます。

変数に当たる部分は別のファイルに書き込みます。この変数ファイルを作りたいページの数だけ用意します。それぞれの変数ファイルに書かれた内容を型紙HTML内の変数に代入していくことで、公開用のHTMLを構築します。

SSGは、この過程をコマンド一発で片付けるためのプログラムです。

投稿2020/03/09 18:43

KojiDoi

総合スコア13692

stsyco

2020/03/10 10:45

早々の回答頂き誠に有難うございます。静的ならではのメリットがあるのですね。改めて試してみたいと思います。

行動規範の内容に同意します

2です。
WordPressを使わなくても「PHP」や「EJS」などを用いて、共通パーツを1つのファイルに記述し、各ページから読み込むことは可能です。

以下、PHPの例です。
各ページのヘッダー、ナビゲーション、フッターを共通化しています。

↓/index.php など、各ページのファイル

PHP
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="css/styles.css">
6    <title>sample</title>
7  </head>
8  <body>
9    <!-- ヘッダーを読み込み -->
10    <?php include($_SERVER['DOCUMENT_ROOT'] . '/include/header.php'); ?>
11
12    <section>
13      <main>
14        <h1>メインコンテンツ</h1>
15        <p>コンテンツA その1</p>
16        <p>内容</p>
17        <nav>
18          <ul>
19            <li><a href="">次のページへ</a></li>
20          </ul>
21        </nav>
22      </main>
23      
24      <!-- サイドメニューを読み込み -->
25      <?php include($_SERVER['DOCUMENT_ROOT'] . '/include/side.php'); ?>
26    </section>
27    
28    <!-- フッターを読み込み -->
29    <?php include($_SERVER['DOCUMENT_ROOT'] . '/include/footer.php'); ?>
30  </body>
31</html>

↓/include/header.php

PHP
1    <header>
2      <h1>ヘッダー</h1>
3    </header>

↓/include/side.php

PHP
1      <nav class="side_menu">
2        <h1>サイドメニュー</h1>
3        <ul>
4          <li>コンテンツA
5            <ul>
6              <li><a href="">その1</a></li>
7              <li><a href="">その2</a></li>
8              <li><a href="">その3</a></li>
9            </ul>
10          </li>
11          <li>コンテンツB
12            <ul>
13              <li><a href="">その１</a></li>
14              <li><a href="">その２</a></li>
15              <li><a href="">その３</a></li>
16            </ul>
17          </li>
18          <li>コンテンツC
19            <ul>
20              <li><a href="">その１</a></li>
21              <li><a href="">その２</a></li>
22              <li><a href="">その３</a></li>
23            </ul>
24          </li>
25        </ul>
26      </nav>

↓/include/footer.php

PHP
1    <footer>
2      <h1>フッター</h1>
3    </footer>

上記例だと、「/include/side.php」の内容を編集するだけで、各ページのサイドメニューの内容が書き変わります。
「次のページへ」のリンクも、自動化しようと思えば可能ですがここでは省略します。

PHPが動作する環境がないときちんと表示できない (ソースコードがそのまま表示される) ので、
XAMPPやMAMP、docker、また開発サーバなどの環境構築はお願いします

投稿2020/03/09 17:38

new1ro

総合スコア4528

stsyco

2020/03/10 10:54

早々の回答頂き誠に有難うございます。分かりやすく説明頂き、感謝致します。

行動規範の内容に同意します

ベストアンサー

質問修正依頼のコメントにもありますが、
静的にする必要性を掲示した方がいいかと思いますが・・・。
ちなみに、静的といいつつ、WordPressは、完全に動的です。

では、

2 他に追加が簡易になる技術やコードの書き方がある。(ワードプレス?)

に関して、サイドバーなどのページ間共通パーツを一元管理する事に関して、いくつかジャンルで分けて紹介します。
難易度は下記とします。
0. ★★★★★：プロ並のかなりのテクニックを必要とする。HTML、CSSをとりあえず書けるってレベルなら到底無理
0. ★★★★☆：上級テクニックが必要となる。その技術を使った事ないと言えど、知識は間違いなく必要。調べながら頑張ってなんとかなるかどうか。
0. ★★★☆☆：少し導入などが難しいが、入れてしまえば、使い方は調べながらなんとかなる。
0. ★★☆☆☆：そこまで難しくない。HTMLとCSSの基礎があれば大丈夫
0. ★☆☆☆☆：誰でもできる。

完全動的

サーバーサイドテクノロジー

PHPや、Rubyなどのサーバーサイドテクノロジーを使い、パーツを、HTML（正確には、各言語）内に読み込む方法です。
new1roさんの回答がまさにそれです。
そうすれば、パーツの修正は、一箇所で済みますので、楽ですし、管理の上でも優秀です。
難易度：★★★★☆

サーバーサイドテクノロジーフレームワーク

上記の発展型です。
上記の管理面や機能面を、より作り手が作りやすくするものにフレームワークというものが存在します。
有名なのは、CakePHPや、Ruby On Railsなどですね。
難易度：★★★★★

フロントエンドフレームワーク

上記に対して、フロントエンド（主にJavaScript）において、フレームワーキングするというものです。
代表的なものは、Vue.js、React.js、Angularなどです。
ライブラリ感覚で、JSを入れるだけで可能なものもあれば、
CLIでコンパイルが必須なものもあります。
かなり上級です。
難易度：★★★★★

CMS

コンテンツマネジメントシステムの略で、
ブラウザ上で管理するものが多い、簡単にいうとブログシステムっぽいものです。
これを使うと、複数ページの一元管理が容易にでき、ブラウザ上で行えるため、上記のフレームワークより、遥かに導入が楽なものが多いです。
ただし、セキュリティ面は非常に注意が必要になります。
難易度：★★★☆☆

半動的

Movable Type（CMS）

なぜ、CMSなのに、こちらで紹介したというと、
確かに、管理の上では、動的なのですが、
吐き出すHTMLが、静的なものが大体なので、こちらで紹介です。
デザインテンプレート機能をふんだんに使えば、
各パーツを一元管理した上で、それを読み込んで、HTMLファイルを吐き出すようにすれば、
半動的となります。
もちろん、動的なものを吐き出せば、完全動的に動くようにもできますし、
DynamicMTMLという機能も使うことができます。
（サーバーサイド上でMTの動的構文を動かす手法、技法のこと）
詳しくはお調べください。
難易度：★★★☆☆

Gulpなどでファイルを生成

CLIを使うツール系で、管理上は動的でも、
実際に吐き出すのは、静的HTMLを、とすれば、半動的となります。
もちろん、PHPなどのバックエンドファイルも扱う事ができます。
難易度：★★★★★

Dreamweaverのテンプレート機能を使う

古くからある、Dreamweaverのテンプレート機能を使う方法です。
Dreamweaver自体で、動的にパーツ別に管理し、
最終のHTMLには、そのパーツが反映されるようにできます。
簡単です。
使い古されている機能ですが、私個人としては、今でも、使ってもいいのではないかと思っています。
ただし、難点が二つほど。
・Dreamweaver以外では役に立たない、使えない
・Dreamweaverはめちゃコストかかる（Adobe製品なので）
ですね。
でも、とにかく簡単だと思います。
難易度：★★☆☆☆