制作者の活動(PR)。

堀北真希ちゃんをうさぎ化した擬獣化キャラクタ
主な堀北真希うさぎ収録作品

堀北真希うさぎ：昔のボシュロム『オプティマ』を真似たソフトレンズ装着場面と仮想コマーシャル動画

リストのマークアップ。

HTMLでの基本的な要素を一通りマスターしたら、是非リストについてもマスターして欲しいものです。

ここでは、リストのマークアップについて解説します。

リストのマークアップ・目次。

リストとは何か。

リストとは、一個以上の項目を列挙したものです。

具体的には

の三種が定義されております。

これらについての詳細はHTMLでのリストにて解説しておきましたので、そちらをご覧下さい。

ここでは、実際にリストのマークアップを行なってみましょう。

実際にマークアップしてみるテキスト。

ここでは、文書マークアップの基本及びマークアップされた文書をHTML文書にするにはでマークアップした文書の一部をリストにしたテキストをマークアップしてみましょう。

◎HTMLについて。
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。
HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。

●HTMLの特徴。
HTMLの特徴は
・画像を埋め込める
・文字の色など表示方法を指定出来る
ではありません。
確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は
・ハイパーリンクが使える
・どんな環境でも読めるようになっている
この二点に尽きます。

この文書では二箇所に箇条書きがありますので、これらを順不同リストとしてマークアップする事になります。

リストのマークアップの際の注意事項。

HTMLでは段落は<p>要素としてマークアップします。

紙のテキストに於いては、通常の段落の中にリストが含まれるケースもあります。

しかし、HTMLでの<p>要素にはリストなど他のブロックレヴェル要素を入れる事が出来ません。

従って、

  1. 段落の途中でリストが現れた場合、その直前で<p>要素を閉じ、
  2. リストが終わったら再度<p>要素を開始する

必要があります。

実際のマークアップ。

途中までは文書マークアップの基本で説明したとおりにマークアップ出来る筈です。

リストの直前までマークアップすると、以下のようになっている事でしょう。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は</p>
・画像を埋め込める
・文字の色など表示方法を指定出来る
ではありません。
確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は
・ハイパーリンクが使える
・どんな環境でも読めるようになっている
この二点に尽きます。

実際のリストのマークアップ手順。

さて、このあとのリストをマークアップしてみましょう。

  1. リスト項目のマークアップ … まず、リストの項目を一つずつ<li>要素としてマークアップします。

    <title>HTMLとは何か</title>
(中略)
<p>HTMLの特徴は</p>
    <li>画像を埋め込める</li>
    <li>文字の色など表示方法を指定出来る</li>
ではありません。
(以下略)

  2. リスト全体のマークアップ … リストの各項目がマークアップされたら、今度はリスト全体を<ul>要素としてマークアップします。

    <title>HTMLとは何か</title>
(中略)
<p>HTMLの特徴は</p>
<ul>
    <li>画像を埋め込める</li>
    <li>文字の色など表示方法を指定出来る</li>
    </ul>
ではありません。
(以下略)

勿論、二つ目のリストも同様にマークアップします。

最終的なマークアップ。

その後、必要なマークアップを一通り終えると、以下のようになるでしょう。

<title>HTMLとは何か</title>
<h1>HTMLについて。</h1>
<h2>HTMLとは。</h2>
<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は</p>
<ul>
    <li>画像を埋め込める</li>
    <li>文字の色など表示方法を指定出来る</li>
    </ul>
<p>ではありません。</p>
<p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
<p>HTMLの最大の特徴は</p>
<ul>
    <li>ハイパーリンクが使える</li>
    <li>どんな環境でも読めるようになっている</li>
    </ul>
<p>この二点に尽きます。</p>

このマークアップされたテキストをHTML文書にすると、以下のようになる筈です。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
        <title>HTMLとは何か</title>
        </head>

    <body>
        <h1>HTMLについて。</h1>
        <h2>HTMLとは。</h2>
        <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
        <p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

        <h2>HTMLの特徴。</h2>
        <p>HTMLの特徴は</p>
        <ul>
            <li>画像を埋め込める</li>
            <li>文字の色など表示方法を指定出来る</li>
            </ul>
        <p>ではありません。</p>
        <p>確かに画像を埋め込んだりする事も可能ですが、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
        <p>HTMLの最大の特徴は</p>
        <ul>
            <li>ハイパーリンクが使える</li>
            <li>どんな環境でも読めるようになっている</li>
            </ul>
        <p>この二点に尽きます。</p>
        </body>
    </html>

今回は順不同リストのみですが、他のリストも同様にマークアップする事が出来ます。

前後のページ。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com