日文文書処理

ウェブページの作成

body要素の構造

〈body要素〉の内容は、紙の文章の『本文』に相当するものである。HTMLHyperText Markup Languageでは〈body要素〉の内容として、見出し、段落、箇条書き、ハイパーリンクなどの要素が定義されている。

ブロックレベル要素とインライン要素

〈body要素〉の中に含まれる要素は、「ブロックレベル要素Block-level elements」と「インライン要素Inline elements（またはテキストレベル要素Text-level elements）」に区別されている。

正しい入れ子［body要素［ブロックレベル要素［インライン要素］］］、正しくない入れ子［body要素［ブロックレベル要素］［インライン要素］］

ブロックレベル要素は、直接〈body要素〉の子要素になるもので、WWWブラウザで表示されるときにはひとつのブロック（かたまり）として扱われ、前後が改行される。一方、インライン要素は、直接〈body要素〉の子要素にはならず、必ずブロック要素の子要素になるものである。

ページの先頭へ↑
←ひとつ前に戻る

よく使われるブロックレベル要素

見出し要素

文書の見出しにあたる部分を定義するのが「見出し要素heading elements」である。見出し要素には、6段階のレベルがあり、それぞれ〈h1要素〉、〈h2要素〉、〈h3要素〉、〈h4要素〉、〈h5要素〉、〈h6要素〉という。

見出し要素は、以下のように記述する。

   <h1>ここに見出しとなる語句を書く</h1>

見出しを階層的に用いる場合は、次のようになる。

   <h1>見出しレベル1</h1>
        <h2>見出しレベル2</h2>
   <h1>見出しレベル1</h1>
        <h2>見出しレベル2</h2>
             <h3>見出しレベル3</h3>
        <h2>見出しレベル2</h2>
             <h3>見出しレベル3</h3>
                   <h4>見出しレベル4</h4>

見出しを階層的に用いる場合は、必ず『〈h1要素〉→〈h2要素〉→〈h3要素〉…』と数字の小さい順に使わなければならない。

段落要素

本文中の段落を定義するのが「段落要素paragraph elements」である。

段落要素は、以下のように記述する。

   <p>ここに本文を書く</p>
   <p>ここに本文を書く</p>
リスト要素

箇条書き（リストによる一覧）を定義するのが「リスト要素list elements」である。リスト要素には、

  1. 〈ul要素〉Unordered List
    順序なしの箇条書き（列挙型のリスト）
  2. 〈ol要素〉Ordered List
    順序ありの箇条書き（序列型のリスト）
  3. 〈dl要素〉Definition List
    説明つきの箇条書き（定義型のリスト）

の３種類がある。

項目の順序に意味のない場合は〈ul要素〉を用い、項目の順序に意味のある場合（または、項目に番号を付ける必要がある場合）は〈ol要素〉を用いる。また、項目とその説明のペアからなるリスト（辞書のような形のもの）を作る場合には〈dl要素〉を用いる。

ul要素について

〈ul要素〉は、以下のように記述する。

   <ul>
     <li>フォークボール</li>
     <li>シンカー</li>
     <li>ナックル</li>
     <li>パームボール</li>
   </ul>

全体が〈ul要素〉となり、項目のひとつひとつは〈li要素〉List Item elementsで示す。

これは、ブラウザでは以下のように表示される。

表示見本：
  • フォークボール
  • シンカー
  • ナックルボール
  • パームボール

〈ul要素〉の内容は〈li要素〉だけでなければならない。次のような書き方は正しくない。

※誤った記述の例：〈li要素〉以外が子要素になっている
   <ul>
     フォークボール
     シンカー
   </ul>

〈li要素〉の内容には、テキストやインライン要素を記述することができる。その他に、〈段落要素〉なども記述することができる。

   <ul>
     <li>
       <p>もしエジソンが電球を発明しなかったとしたら、私たちの生活はどうなっていただろうか。</p>
       <p>電球がなければ、ロウソクの灯りでパソコンを使わなければならなかっただろう。</p>
     </li>
     <li>
       <p>工場から大きな荷車を引いた男が出てきた。警備員は男が何かを盗んだのではないかと疑って
       荷車を調べたが、中身は空だった。</p>
       <p>翌日、男が逮捕され、警備員はクビになった。男が盗んだのは、大きな荷車だった。</p>
     </li>
   </ul>

これは、ブラウザでは以下のように表示される。

表示見本：

  • もしエジソンが電球を発明しなかったとしたら、私たちの生活はどうなっていただろうか。

    電球がなければ、ロウソクの灯りでパソコンを使わなければならなかっただろう。

  • 工場から大きな荷車を引いた男が出てきた。警備員は男が何かを盗んだのではないかと疑って荷車を調べたが、中身は空だった。

    翌日、男が逮捕され、警備員はクビになった。男が盗んだのは、大きな荷車だった。

また、〈li要素〉は必ず〈ul要素〉の直接の子要素にならなければならない。次のような書き方は正しくない。

※誤った記述の例：〈li要素〉が〈ul要素〉の子要素になっていない
   <p>
    <li>フォークボール</li>
    <li>シンカー</li>
   </p>
ol要素について

〈ol要素〉は、以下のように記述する。

   <ol>
     <li>鶏の卵を割る</li>
     <li>フライパンを温める</li>
     <li>鶏の卵を焼く</li>
   </ol>

全体が〈ol要素〉となり、項目のひとつひとつは〈li要素〉で示す。

これは、ブラウザでは以下のように表示される。

表示見本：
  1. 鶏の卵を割る
  2. フライパンを温める
  3. 鶏の卵を焼く

〈ol要素〉の内容は〈li要素〉だけでなければならない。次のような書き方は正しくない。

※誤った記述の例
   <ol>
     鶏の卵を割る
     フライパンを温める
   </ol>

〈ul要素〉の場合と同じく、〈li要素〉の内容には、テキストやインライン要素を記述することができる。その他に、段落なども記述することができる。

また、〈li要素〉は必ず〈ol要素〉の直接の子要素にならなければならない。次のような書き方は正しくない。

※誤った記述の例：〈li要素〉が〈ol要素〉の子要素になっていない
   <p>
    <li>鶏の卵を割る</li>
    <li>フライパンを温める</li>
   </p>
dl要素について

〈dl要素〉は、以下のように記述する。

   <dl>
     <dt>山口アキラ</dt>
     <dd>宮崎県出身・男性</dd>
     <dt>戸川ミエコ</dt>
     <dd>香川県出身・女性</dd>
   </dl>

全体が〈dl要素〉となり、用語（見出しの項目）を〈dt要素〉definition termで示し、用語の定義（項目の説明）を〈dd要素〉definition descriptionで示す。

これは、ブラウザでは以下のように表示される。

表示見本：
山口アキラ
宮崎県出身・男性
戸川ミエコ
香川県出身・女性

それぞれのリスト要素は入れ子にすることができるが、ここでは詳しい説明は省略する。

ページの先頭へ↑
←ひとつ前に戻る

よく使われるインライン要素

アンカー要素

ハイパーリンクHyperLinkを記述するのが「アンカー要素anchor elements」である。

〈アンカー要素〉は、以下のように記述する。

<a href="リンク先のURLを書く">リンク先にジャンプする</a>

これは、ブラウザでは以下のように表示される（注意：例ではリンク先はこのページの先頭になっている）。

表示見本：
リンク先にジャンプする

〈アンカー要素〉の中の『href="〜〜"』の部分を「属性attribute」という。さらに、属性の種類を示す〈href〉を「属性名attribute name」、『" "』の間に書かれるもの（ここではURL）を「属性値attribute value」という。要素は、その性質に応じて様々な属性を持つことができる。アンカー要素では〈href属性〉が必須であり、省略することはできない。

　　開始タグ　　　　　　　　　　終了タグ
　　　↓　　　　　　　　　　　　　↓
　<要素名 属性名="属性値"> 内容 </要素名>  ⇒⇒  全体が要素
br要素

HTMLでは、テキストに改行を入れなくても、ブラウザでは自動的に改行されて表示される。また、テキストに改行を入れても、改行はスペース（半角スペース）と同じものとして処理される。

例えば、

   <p>若い時は誰でも記憶力が良いものです。忘れたいことも忘れられません。</p>
   <p>しかし、年をとると大事なことから順番に忘れていくようになります。</p>
   <p>そして、もっと年をとると、
   何が大事なことなのかが判断できなくなってしまいます。</p>

と書いた場合、ブラウザでは以下のように表示される。

表示見本：

若い時は誰でも記憶力が良いものです。忘れたいことも忘れられません。

しかし、年をとると大事なことから順番に忘れていくようになります。

そして、もっと年をとると、 何が大事なことなのかが判断できなくなってしまいます。

テキストを強制的に改行brakeさせたいときに使うのが「br要素」である。

〈br要素〉は、以下のように記述する。なお、〈br要素〉には対になる（終了）タグがない。このように内容を持たない要素は「空要素empty element」と呼ばれる。

<br />

このとき『/』の前にスペース（半角スペース）をひとつ入れておく方が良い（スペースがない場合、正常に表示されない可能性がある）。

〈br要素〉を強制的に改行させたい場所に記述する。

   <p>若い時は誰でも記憶力が良いものです。忘れたいことも忘れられません。</p>
   <p>しかし、年をとると大事なことから順番に忘れていくようになります。</p>
   <p>そして、もっと年をとると、<br />
   何が大事なことなのかが判断できなくなってしまいます。</p>

これは、ブラウザでは以下のように表示される。

表示見本：

若い時は誰でも記憶力が良いものです。忘れたいことも忘れられません。

しかし、年をとると大事なことから順番に忘れていくようになります。

そして、もっと年をとると、
何が大事なことなのかが判断できなくなってしまいます。

em要素

テキストの特定の部分を強調emphasisするのが「em要素」である。

〈em要素〉は以下のように記述する（強調したい部分をタグで挟む）。

汚れたときは、<em>柔らかい布で軽く</em>こすってください。
strong要素

テキストの特定の部分を強調するときには〈em要素〉を用いるが、より強いstrong強調を示すのが「strong要素」である。

〈strong要素〉は以下のように記述する（強調したい部分をタグで挟む）。

究極的には、生きることに<strong>意味などない</strong>のである。
sup要素

テキストを上付き文字superscriptにする場合には〈sup要素〉を用いる。〈sup要素〉は、以下のように記述する。

テキストを<sup>上付き文字</sup>にします

これは、ブラウザでは以下のように表示される。

表示見本：
テキストを上付き文字にします。
sub要素

テキストを下付き文字subscriptにする場合には〈sub要素〉を用いる。〈sub要素〉は、以下のように記述する。

テキストを<sub>下付き文字</sub>にします

これは、ブラウザでは以下のように表示される。

表示見本：
テキストを下付き文字にします。
→ head要素の構造 〔prev〕
→ ウェブページ作成に必要なもの 〔next〕
→ ファイルの作成
ページの先頭へ↑
←ひとつ前に戻る
目次へ
トップページへ