箇条書きを覚えよう

文章を書くときには、つらつらと文章を書き並べるだけではなく、項目立て て説明を書くと分かりやすいことがある。たとえば、

などのときに効果的である。などというこの書き方自身も「箇条書き」を利 用している。箇条書きには

がある。これらのHTML言語での表現をこれから紹介する。注意が必要なのは、 以下で説明するいくつかの要素は、必ずBODY要素の中に書かなければならないと いう点である。HTML言語の基本的な構成を復習す ること。

番号なし箇条書き

のような形式が番号なしの箇条書きである。番号なしの箇条書きは、UL要素 で指定する。開始タグは <ul>、終了タグは </ul> である。そして各項目は、<li> で始める。具体的には以下のようにする。

<ul>
 <li>項目1</li>
 <li>項目2</li>
 <li>項目3</li>
</ul>

番号つき箇条書き

  1. 項目1
  2. 項目2
  3. 項目3

のような形式の、番号のついた箇条書きはOL要素で指定する。上述のUL用と 全く使い方が同じで、ULをDLに置き換えただけと考 えれば良い。具体的な記述例は以下のとおりである。

<ol>
 <li>項目1</li>
 <li>項目2</li>
 <li>項目3</li>
</ol>

定義用箇条書き

いくつかの単語を並べて、それらの意味を逐一説明するような書き方をする ときに利用するのが定義用箇条書きである。たとえば、

HTML要素

HTML文書の一番外側に来るべき要素。必ず中には「HEAD要素」、 「BODY要素」をこの順番で含んでいなければならない。

HEAD要素

文書のヘッダ情報をもつ要素。文書のタイトルをもつTITLE要素などを 中に含める。

BODY要素

HTML文書の本体をもつ要素。

のような説明的な書き方をする場合に利用する。このような構造は DL要素を利用する。具体的な記述例は以下のとおりである。

<dl>
 <dt>項目1</dt>
 <dd><p>項目1の説明文…</p></dd>
 <dt>項目2</dt>
 <dd><p>項目2の説明文…</p></dd>
 <dt>項目3</dt>
 <dd><p>項目3の説明文…</p></dd>
</dl>

使用例

実際に箇条書きを含む文書を作成してみよう。ここでは、 list.htmlというファイルを作り、そこに箇条書きを作成しよう。

  1. list.htmlを開く

    Emacsを起動し ~/public_html/list.html を開く (C-x C-f)。

    Find file: ~/public_html/list.html
  2. まずHTMLの骨格を入力する

    以下のように骨格部分を作成する。

    list.htmlの骨格

    <html>
<head>
<title>Listing Sample</title>
</head>

<body>
<h1>三名園</h1>
  
</body>
</html>

    全て手入力しても良い(練習になる)が、既に作成してある index.html を list.html 編集バッファに挿 入してしまうと効率的である。Emacsで編集バッファに他のファイルの内 容を取り込むには C-x i (insert-file) を利用すると良い。

    C-x i
    Insert file: ~/public_html/index.html

    index.html の内容が取り込まれるので、上記の骨格部 分と違う部分のみ書き変えると良い。

  3. 箇条書き部分を記入する

    上記リストlist.htmlの  の部分に箇条書きを記入しよう。 追加する部分は以下の下線つきの部 分である。 

    <html>
<head>
<title>Listing Sample</title>
</head>

<body>
<h1>三名園</h1>
<ul>
 <li>偕楽園</li>
 <li>兼六園</li>
 <li>後楽園</li>
</ul>
</body>
</html>

http://roy.e.koeki-u.ac.jp/~自分の番号/list.html を実際 に参照して確認してみよう。

練習問題

上で作成したlist.htmlを修正して、

  1. 上で作成したlist.htmlの箇条書きをulエレ メントからolエレメントの番号つきに書き換えてみよ。必 ずhttp://roy.e.koeki-u.ac.jp/~c102xxx/list.html (xxxは自分の番号)のページをブラウザで表示して結果を確認すること。
  2. 新しいファイルbig3.htmlを作り、好きなテーマで「3大○ ○」を箇条書き要素で記述すること。ul, ol, dlのどれを 使っても良い。ただし、HTML文書を全て最初から書くと非効率的なので、 C-x iを使ってこ れまで作ったファイルの内容を挿入して、それを修正すると良い。
情報リテラシー