長文を書く時に使えるHTML構造化文章用サンプルコード一覧

更新
2013年04月09日(火)

長文を構造化した文章にする際に使えるサンプル一覧です。一覧にあるタグをコピペするだけです。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 長い文章を構造化するための下地ができます(HTMLで)。

    130408html-structure-4.jpg
  2. 自動で各パラグラフがナンバリングされます(CSSで)。

  3. ナンバリングされたパラグラフをマウスオーバーすると、ライトアップされます(CSSで)。これにより閲覧者が読んでいる場所を見失いにくくなります。

  4. 投稿記事内最初の<h2>タグ直前とサイドバーの空き部分に目次が表示されます(jQueryで)。

言葉の定義

このページ内で用いる言葉を次のとおり定義します。

  1. 構造化された文章
    見出しやパラグラフなどをHTMLのタグを適切に用いて書かれた文章です(参考:HTMLの構造化と厳格化正しい構造化文章)。ちなみに、階層化された文章とは<div>タグなどできっちりと階層を分けた文章のことを指します。
  2. 構造化されていない文章
    いわゆる普通の書き方で書かれた文章です。HTMLを意識しなければ、主に<br />タグのみで文章がレイアウトされます。
  3. 大見出し
    そのページのタイトルです。当テンプレートでは、<h1>タグを用いています。たとえば、このページでしたら「長文を書く時に使えるHTML構造化文章用サンプルコード一覧」です。
  4. 中見出し
    そのページのタイトルの次に大きな見出しです。当テンプレートでは、<h2>タグを用いています。
  5. 小見出し
    中見出しの次に大きな見出しです。当テンプレートでは、<h3>タグを用いています。
  6. プチ見出し
    今のところ、当テンプレートでは最小の見出しです。<h4>タグを用いています。「プチ」ってフランス語で「小さい」という意味だから、「小見出し」と同じじゃねーか!とかいう親切極まりない助言は勘弁してください。他に適切な言葉が思い浮かびませんでした(><)。

記事投稿時の設定

  1. 「記事の編集」画面の下の方にある「記事の設定」内の「改行の扱い」で「HTMLタグのみ」の方を選択します。

    「記事の設定」内の「改行の扱い」を「HTMLタグのみ」
  2. こちらを選択しないと、文章が間延びしてしまいます。この設定を怠っても後から修正できますので、それほどシビアに考えなくてもいいかもしれません。

コピペ用タグ一覧

中見出しまで使用(h2タグ)

  1. 中見出し(<h2>タグ)まで使う文章用の一例です。文章自体が長くない、または、内容をそんなに細かく分類していない場合などに向いています。必要に応じてコピペしてください。なお、「ページ内リンク用のID」は不要なら省略できます。便宜上、「ページ内リンク用のID」と書きましたが、IDを設定する意義はその用途だけに留まりません。CSSやJavaScriptで定義する際に、タグにIDがあればピンポイントで指定でき、管理上の利便性が向上します。

    
    <h2 id="■→ページ内リンク用のID←■">■→中見出し←■</h2>
    <ol class="h3">
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    </ol>
    
  2. 上のコピペ用タグの中の説明部分を削除したものです。コピペの際は、こちらの方が説明部分を削除する手間が省けて楽かと思います。

    
    <h2></h2>
    <ol class="h3">
    <li><p></p>
    </li>
    <li><p></p>
    </li>
    <li><p></p>
    </li>
    </ol>
    

小見出しまで使用(h2タグとh3タグ)

  1. 小見出し(<h3>タグ)まで使う場合の文章用の一例です。

    
    <h2 id="■→ページ内リンク用のID←■">■→中見出し←■</h2>
    <h3 id="■→ページ内リンク用のID←■">■→小見出し←■</h3>
    <ol class="h4">
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    </ol>
    <h3 id="■→ページ内リンク用のID←■">■→小見出し←■</h3>
    <ol class="h4">
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    </ol>
    
  2. 上のコピペ用タグの中の説明部分を削除したものです。

    
    <h2></h2>
    <h3></h3>
    <ol class="h4">
    <li><p></p>
    </li>
    <li><p></p>
    </li>
    </ol>
    <h3></h3>
    <ol class="h4">
    <li><p></p>
    </li>
    <li><p></p>
    </li>
    </ol>
    

プチ見出しまで使用(h2タグ~h4タグ)

  1. プチ見出し(<h4>タグ)まで使う文章用の一例です。必要な部分をコピペで組み合わせて、望み通りの構造化を実現できます。

    
    <h2 id="■→ページ内リンク用のID←■">■→中見出し←■</h2>
    <h3 id="■→ページ内リンク用のID←■">■→小見出し←■</h3>
    <h4 id="■→ページ内リンク用のID←■">■→プチ見出し←■</h4>
    <ol class="h5">
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    </ol>
    <h4 id="■→ページ内リンク用のID←■">■→プチ見出し←■</h4>
    <ol class="h5">
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    <li><p>■→ここに文章を入れる←■</p>
    </li>
    </ol>
    
  2. 上のコピペ用タグの中の説明部分を削除したものです。

    
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <ol class="h5">
    <li><p></p>
    </li>
    <li><p></p>
    </li>
    </ol>
    <h4></h4>
    <ol class="h5">
    <li><p></p>
    </li>
    <li><p></p>
    </li>
    </ol>
    

作動メカニズムの簡易解説

HTMLやCSSについてある程度扱える方向けの解説です。カスタマイズ時の参考になりましたら幸いです。

  1. liタグ内にpタグを入れることで、そのpタグに関連するimgタグなども一緒にライトアップされるようにしています(こんな感じです)。つまり、pタグではなくその上のliタグにマウスオーバー時のCSSを設定しています。

  2. 当テンプレートから他のテンプレートに変えた場合でも、olタグによりナンバリングは維持されます。ただし、その階層での序列のみの表示となります。たとえば、このパラグラフは「5.2」とナンバリングされていますが、それが単純に「2.」になるということです。残念ながら、IE6などのブラウザではナンバリングされません。

  3. 具体的な使用例は、当サイトのソースを見ていただくのが手っ取り早いかと思います。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)