下層ページの解説
下層ページの構成
前回のトップページに対して、内部のページが下層ページです。
階層構造は上図のようになっています。例えばメニュー1をクリックすると「1」フォルダの「index.html」にジャンプします。ホームページを構成するファイルは、どこに置いても構わないのですが、更新や引っ越し、管理者が変わる場合などのメンテナンス性を考えると、最初からある程度フォルダを分けて整理しておいた方がベターです。
また、ホームページを置くサーバーは、ブラウザでディレクトリ(フォルダ)のURL(末尾が「/」で終わるURL)を入力すると、index.htmlやindex.htm、index.phpファイルを表示するように設定されています。そのため、index.htmlが無い場合はディレクトリ内のファイル一覧が表示され、セキュリティ上好ましくありません。ですから、ディレクトリ内の各トップページにはindex.htmlというファイル名を付けるよう心がけましょう。
コード解説
「1」フォルダ内index.htmlのcontent(トップページと異なる部分)のHTMLとCSSを解説します。
CSSファイルは前回同様、cssフォルダのstyle.cssです。
<div id="content">~</div>
テンプレートでは本文とサイドバーの2段組みにしていますが、トップページのように1段組みにしたい場合は、下記の<article>と<aside> を全て削除すればOKです。
<article>~</article>
本文のブロック。
<article>タグは、記事やコメントなど内容が単体で完結するセクションであることを示す際に使用します。
article{
float: right;
width: 680px;
}
PC版CSSの指定。右にフロートさせ、横幅680ピクセル。
float: right;
width: 680px;
}
<h2>~</h2>
中見出しの指定です。
h2 {
font-size: 16px;
font-weight: bold;
color: #336699;
margin-bottom: -10px;
}
中見出しのCSS(スマホ・PC共通)。文字は16ピクセルで太字。
色は#336699。
font-size: 16px;
font-weight: bold;
color: #336699;
margin-bottom: -10px;
}
<aside>~</aside>
サイドバーのブロック。<aside>タグは補足情報のセクションであることを示す際に使用します。
aside{font-size: 14px;}
スマホ・PC版CSSの指定。フォントサイズを14ピクセルに。
aside{
float: left;
width: 220px;
}
PC版CSSの指定。左にフロートさせ、横幅220ピクセル。float: left;
width: 220px;
}
サイドバーを右にしたい場合はfloat: rightにし、<article>をfloat: leftにします。
<ul class="submenu">
<li>サブメニュー</li>
<li class="submenu_item"><a href="index.html">はじめに</a></li>
<li class="submenu_item"><a href="01.html">サブメニュー1</a></li>
<li class="submenu_item"><a href="02.html">サブメニュー2</a></li>
<li class="submenu_item"><a href="03.html">サブメニュー3</a></li>
<li class="submenu_item"><a href="04.html">サブメニュー4</a></li>
<li class="submenu_item"><a href="05.html">サブメニュー5</a></li>
</ul>
サイドバーに配置するサブメニューです。<li>サブメニュー</li>
<li class="submenu_item"><a href="index.html">はじめに</a></li>
<li class="submenu_item"><a href="01.html">サブメニュー1</a></li>
<li class="submenu_item"><a href="02.html">サブメニュー2</a></li>
<li class="submenu_item"><a href="03.html">サブメニュー3</a></li>
<li class="submenu_item"><a href="04.html">サブメニュー4</a></li>
<li class="submenu_item"><a href="05.html">サブメニュー5</a></li>
</ul>
同じカテゴリに複数のページを置く場合に、そのカテゴリ内でだけ表示します。htmlのファイル名やリンク文字は適宜変更してください。不要な場合は削除して構いません。
.submenu {
margin: 0;
padding: 0;
list-style-type: none;
}
スマホ・PC版CSSの指定。余白は無し。リストマークを消す指定です。
margin: 0;
padding: 0;
list-style-type: none;
}
.submenu_item {
padding-top: 6px;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
スマホ・PC版CSSの指定。各リスト項目の余白と下線を指定しています。
padding-top: 6px;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}