Webサイトだけに限りませんが、メンテナンスがしやすいような構成にしておく方が良いです。
自分だけが使うならまだよいかもしれませんが、他の人もメンテナンスする場合は考慮しておいた方が良いです。
でないといつまで経っても自分がメンテナンスする羽目になり、自分がメンテナンスできなくなるとせっかく作ったもの自体使われなくなることになります。。それでは悲しい。

ページの共通する部分を決める

前回、ページをどう分割するかは決めました。そのうち、今回は次のふたつを共通部分にすることにしました。
- 「header」　　→　サイトのタイトル、メインメニューのボタン
- 「contents1」 →　サブメニュー（メインメニューを押した後にサブメニューを表示する）

f:id:yiris1127:20171111164442p:plain:w300

共通部分を作る

共通する部分のページを作ります。常に表示されるサイトのタイトルだけ作ってみます。
ファイル名は「header.html」にしました。

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>header</title>
 </head>
 <body>
  <h1>クローゼの色々備忘録</h1>
 </body>
</html>

ブラウザで開くとこんな感じです。

f:id:yiris1127:20171112223523p:plain:w300

共通する部分を読み込むためのスクリプトを記述する

共通する部分を読み込みたいhtmlファイルの<head></head>内に以下のようななスクリプトを記述します。
読み込みにはJavaScriptを使うのですが、コードを容易に書ける「jQuery」を使います。
jQueryの準備方法は別の機会に詳しく書きます。今回は、<head></head>内にjQueryをダウンロードしたものを使用するように記述しています。（パスは注意してください。）
前回作成したファイル（index.htmlとして保存）を次のように編集してみます。

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>ページ分割</title>

  <!-- jQueryの指定 -->
  <script src="jquery-3.2.1.min.js"></script>

  <!-- 共通部分の読み込み -->
  <script type="text/javascript">
    $(function() {
      // header.htmlをid属性「header」という名前で読み込むように指定する
      $("#header").load("header.html");      
    });
  </script>

 </head>
 <body>
    
    <div id="header">                 <!-- 前回分割したところ -->
      <div id="header"></div>         <!-- header.htmlをここに表示する -->
    </div>

 </body>
</html>

「load()」を使ってhtmlファイルをid属性で付けた名前で読み込めるようにします。
前回ページ分割をした<div id="header"> ～</div>の中に、<div id="header"></div>を記述してheader.htmlファイルを表示するようにしています。
同じ名前にしたせいで分かりにくくなってしまいましたが・・・
ブラウザで「index.html」を開くとこんな感じです。

f:id:yiris1127:20171112231053p:plain:w450

うまく読み込めたようです。ちなみにローカルで開発している場合、私が確認した限りではブラウザはFireFoxかEdgeでないと正常に確認ができませんのでした。
基本的にサーバー上で確認するほうが良いです。

余談

背景に色を付けていたので気づきましたが、上下にmargin（約21px）が付いてました。
いったいどこに付いているのか・・・(・_・)そういうときはブラウザから「F12」キーを押して、左下にある「ページから要素を選択します」というボタンをクリックし、確認したい場所にマウスを持っていきクリックします。

f:id:yiris1127:20171112232701p:plain:w600

なんと、<h1></h1>に marginがついてました。デフォルトで付くんですね。（この辺のことも勉強しないと..）
場所が分かればあとはCSSで調整すればOKですね。

まとめ

共通部分はなるべく使いまわせるようにするのがやはり良かったです。修正箇所が少なくて済みます。
ブラウザ上で要素のチェックするのは便利です。しかもブラウザ上で直接編集してその場で表示確認もできます。ちょっとどうなるか試したいときは、ブラウザ上で編集する方が効率的です。
共通部分を読み込ませる他のやり方はいずれ勉強しようかと思います。

2017-11-11

ページをどう分割するか決める

Website-html Website

ページをどう分割するか決める

ページを分割したときのイメージを考える

まずは、自分がオシャレだな、いいなと思ったサイトを参考にしてページをどう分割するかデザインしました。
こんな感じ。（実際はノートで手描きしてます。）

f:id:yiris1127:20171111164442p:plain:w300

分割するときは何を載せるのか考えながら分けていきます。
- header　→　サイトのタイトル、メインメニューのボタン
- contents1　→　サブメニュー
- contents2　→　メインコンテンツ
- footer　→　リンク、コピーライト

基本のページを作る

HTMLで、基本となるページをひとつ作ってみます。
CSSを使いたいのでCSSファイルを読み込むようにしておきます。

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>ページ分割</title>
 </head>
 <body>
  <!-- コンテンツ -->
 </body>
</html>

CSSで分割したページをデザインする枠を作る

分割した部分それぞれのデザインを設定できるようにするために、CSSにid属性で枠を作ります。
分割されていることが分かりやすいように、背景色をあえて指定しています。

#header {
 //headerのデザイン
  background: #e95388;
}

#contents1 {
 //contents1のデザイン
  background: #79c06e;
}

#contents2 {
 //contents2のデザイン
  background: #409ecc;
}

#footer {
 //footerのデザイン
  background: #864eb9;

}

ページにスタイルを指定する

基本のページにスタイルを適用します。
<body>～</body>の部分が、上記で決めたように分割されるように適用していきます。
<div id="****"></div>を使って分割していきます。今回は左右に並ばないのでそのまま次々書いてます。
中身が空だと何も表示されないので、何か適当に書いておきます。

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>ページ分割</title>
 </head>
 <body>
    
    <div id="header">      <!-- header -->
      header
    </div>         
    <div id="contents1">   <!-- contents1-->
      contents1
    </div>      
    <div id="contents2">   <!-- contents2 -->
      contents2
    </div>      
    <div id="footer">      <!-- footer -->
      footer
    </div>         

 </body>
</html>

これで、htmlファイルを開くと次のようになります。
あれ、最初のイメージと違ってそれぞれもっと高さが違うはずなんだけど。。と思いましたが、中身が増えれば高さもそれに応じて変わるので問題ありませんでした。
問題は、上と左右にある余白。これを消したい。どうするか？ CSSで、bodyにmargin「0」を指定します。以下を追記します。

body {
  margin: 0;
}

次のように余白がなくなったと思います。
bodyで直接書きたくない場合は、「id」か「class」で書いておいてもいいですね。

まとめ

まずは、何をどのように見せるかイメージを決めておくとコードを何度も書き直さなくて済みました。（前は良くコピーしてきて、見た目気に入らなくなったら書き直して、時間を無駄にしてました。。）
使うかどうかは別としてイメージをつかみやすくするために、CSSでページを分割した範囲の枠を用意しておくと作業が楽でした。（背景色とかはあとで消せばいいですしね。）
基礎は大切でした。