Yamamoto's Laboratory
トップ
 
ファイルの先頭
ヘッド・サイド
ページの先頭
見出し
パラグラフ
文字・文字列
レイアウト
リスト (箇条書き)
表の作成
図の挿入
ファイル内容表示
コマンド表示
プログラムソース
インライン
独自CSS/PHP
GCP
JavaScript
インラインフレーム
ページ作成情報
フッター
 
 
 
 
 
 
インターネット WEB 作成 作成基準 ファイルの先頭

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

last update:2020/12/20 16:58:02