複数ページの作り方

HTML CSS

複数ページでサイトを作る際のフォルダー構成

  • ページ毎にフォルダーを作り、各フォルダの中のHTMLファイルは必ず index.html という名前にする。

  • CSSフォルダにはすべてのCSSファイルをまとめる。

  • imgフォルダにはすべての画像をまとめる。

 

f:id:develog:20160821145712g:plain

 

上記のフォルダ構成は、トップページと春夏秋冬の各ページの5ページ構成になっている。

トップページ以外はすべて同じスタイルを使用する場合、bodyにidを付けて区別すればよい。トップページのbodyにトップページ用のid、サブページのbodyにサブページ用のidを付けることで、一つのCSSファイルで可能になる。

 

トップページのindex.html

        <body  id="top-page">

サブページのindex.html

        <body  id="sub-page">

CSSファイル

        #top-page  h1{ ・・・ }

        #sub-page  h1{ ・・・ }

 

ブラウザの戻るボタンを使わなくてもページ遷移できなければならない。