Yamamoto's Laboratory
ページの先頭
プログラムソース

WEB ページ作成基準ページの先頭

WEB ページの先頭部分 (パス, タイトル, 簡単な説明, 目次) の記述方法を示します.

目次


ページの先頭部分

私の WEBページの場合,ページのトップは,<div class="page_top">と</div>で囲みます.その中に,(1)パス,(2)タイトル,(3)簡単な説明,(4)目次を書きます.そして,最後に区切り線<hr>を入れます.

目次が一列

目次が一列の場合は,以下のようにします.セクションが付録の場合には,「<li class="appendix">」とします.

記述内容は,(1) パンくずリスト,(2) タイトル,(3) 概要,(4) 目次を記述します.

ページトップの書き方

<div class="page_top">

  <div class="path">
    <span class="parent"><a href="親々カテゴリーへの相対パス">親々カテゴリー名</a></span>
    <span class="parent"><a href="親カテゴリーへの相対パス">親カテゴリー名</a></span>
    <span class="self">ページ名</span>
  </div>

  <h1 class="title"><span class="category">カテゴリー名(省略可能)</span>ページタイトル<span class="subtitle">サブタイトル(省略可能)</span></h1>
  <p class="about">このページの概要を書きます(省略可能).</p>

  <h2 class="table_of_contents">目次</h2>

  <ul class="table_of_contents">
      <li><a href="#セクション 1 の ID">セクション 1 のタイトル</a></li>
      <li><a href="#セクション 2 の ID">セクション 2 のタイトル</a>
      <ul>
          <li><a href="#サブセクション 1 の ID">サブセクション 1 のタイトル</a></li>
          <li><a href="#サブセクション 2 の ID">サブセクション 2 のタイトル</a></li>
          <li><a href="#サブセクション 3 の ID">サブセクション 3 のタイトル</a></li>
      </ul></li>
      <li><a href="#PAGE_INFO">ページ作成情報</a>
      <ul>
          <li><a href="#REFERENCE">参考資料</a></li>
          <li><a href="#UPDATE_HISTORY">更新履歴</a></li>
      </ul></li>
  </ul>

</div>

<hr>

目次の左側に大きなスペースができ,間抜けに見える場合があります.絵などを上手に配置し,ページのバランスを取ると良いでしょう.

目次が複数列

目次を二列あるいは三列にすると,目次の無駄なスペースが無くなり,分かりやすくなります.

ヘッダー

目次を列に分割するために,jQuery の easyListSplitter を使います.そのために,ヘッダーにいろいろと記述が必要です.

まずは,jQuery と easyListSplitter を読み込むために,ヘッダーに以下を記述します.

easyListSplitter を使い目次を分割する場合の追加する jQuery.

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="../../../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../jQuery/easyListSplitter/jquery.easyListSplitter.js"></script>

そして,JavaScript を記述します.

目次を分割する場合のJavaScript.

<script type="text/javascript">
$(document).ready(init);
function init(){

    $('#contents_list').easyListSplitter({
        colNumber: 2
    });
};
</script>

html

html の本文は,目次を列に分解しない場合(1列)とほぼ同じです.クラス名を「class="table_of_contents2"」とし,JavaScript を実行するために「id="contents_list"」とします.また,CSS で指定した「float:lerf」を解除するためのタグ「<div style="clear: both"></div>」を追加します.セクションが付録の場合には,「<li class="appendix">」とします.

ページトップの書き方

<div class="page_top">

  <div class="path">
    <span class="parent"><a href="親々カテゴリーへの相対パス">親々カテゴリー名</a></span>
    <span class="parent"><a href="親カテゴリーへの相対パス">親カテゴリー名</a></span>
    <span class="self">ページ名</span>
  </div>

  <h1 class="title"><span class="category">カテゴリー名(省略可能)</span>ページタイトル<span class="subtitle">サブタイトル(省略可能)</span></h1>
  <p class="about">このページの概要を書きます(省略可能).</p>

  <h2 class="table_of_contents">目次</h2>

  <ul class="table_of_contents2" id="contents_list">
      <li><a href="#セクション 1 の ID">セクション 1 のタイトル</a></li>
      <li><a href="#セクション 2 の ID">セクション 2 のタイトル</a>
      <ul>
          <li><a href="#サブセクション 1 の ID">サブセクション 1 のタイトル</a></li>
          <li><a href="#サブセクション 2 の ID">サブセクション 2 のタイトル</a></li>
          <li><a href="#サブセクション 3 の ID">サブセクション 3 のタイトル</a></li>
      </ul></li>
      <li><a href="#PAGE_INFO">ページ作成情報</a>
      <ul>
          <li><a href="#REFERENCE">参考資料</a></li>
          <li><a href="#UPDATE_HISTORY">更新履歴</a></li>
      </ul></li>
  </ul>

      <div style="clear: both"></div>

</div>

<hr>

目次の横に図を

目次の横のスペースは結構空いています.そこに関連する図や写真を乗せると少し格好がよくなります().

ページトップの書き方

<div class="page_top">

<div class="path">
    <span class="parent"><a href="親々カテゴリーへの相対パス">親々カテゴリー名</a></span>
    <span class="parent"><a href="親カテゴリーへの相対パス">親カテゴリー名</a></span>
    <span class="self">ページ名</span>
</div>

<h1 class="title"><span class="category">カテゴリー名(省略可能)</span>ページタイトル<span class="subtitle">サブタイトル(省略可能)</span></h1>
<p class="about">このページの概要を書きます(省略可能).</p>

<img src="図へのパス" style="float:right;margin:px px px px" width="" alt="代わりの文字列">

	<h2 class="table_of_contents">目次</h2>

	<ul class="table_of_contents2" id="contents_list">
	<li><a href="#セクション 1 の ID">セクション 1 のタイトル</a></li>
	<li><a href="#セクション 2 の ID">セクション 2 のタイトル</a>
	<ul>
        <li><a href="#サブセクション 1 の ID">サブセクション 1 のタイトル</a></li>
        <li><a href="#サブセクション 2 の ID">サブセクション 2 のタイトル</a></li>
        <li><a href="#サブセクション 3 の ID">サブセクション 3 のタイトル</a></li>
	</ul></li>
	<li><a href="#PAGE_INFO">ページ作成情報</a>
	<ul>
        <li><a href="#REFERENCE">参考資料</a></li>
        <li><a href="#UPDATE_HISTORY">更新履歴</a></li>
	</ul></li>
	</ul>

<div style="clear: both"></div>
</div>

<hr>

ページ作成情報

参考資料

  1. 複数の目次には,easyListSplitter を使います.その場合,目次の左側に関連する図を入れると良いでしょう().

更新履歴

2020年08月08日 ページを分割し,新規ページに変更.


no counter