Home / Index / Prev / Next

15.リストを作る

リストというのは、箇条書きのことです。

書式ツールバーの行頭文字付きリストアイコンをクリッ クすると「行頭文字付きリスト」を作成することができます。
リストアイコン(●)が表示されたら文字を入力し、Enter キー(改行)を押すと、次のリストアイコンが表示されるので、リストを続けて入力していきます。
リストを終わらせる時は、リストの最終行を入力した後、下矢印(↓)キーを押すか、マウスカーソルを次に入力する部分に置きます。
「行頭文字付きリスト」は、<ul>要素(Unordered List)で、リストの内容は、<li>要素(List Item)です。
<ul>
 <li>Intro</li>
 <li>Hot Stuff</li>
 <li>Selfish</li>
</ul>
書式ツールバーの番号付きリストアイコンをクリックす ると「番号付きリスト」を作成することができます。
リスト番号が表示されたら文字を入力し、Enter キー(改行)を押すと、次の番号が表示されるので、リストを続けて入力していきます。
リストを終わらせる時は、リストの最終行を入力した後、下矢印(↓)キーを押すか、マウスカーソルを次に入力する部分に置きます。
  1. Hands
  2. Hearty...
  3. Shake It
「番号付きリスト」は、<ol>要素(Ordered List)で、リストの内容は、<li>要素です。
<ol>
 <li>Hands</li>
 <li>Hearty...</li>
 <li>Shake It</li>
</ol>
リストを作った後に、リストマークやリストの種類を変更したい時は、リストマーク(またはリスト番号)をダブルクリックして、[箇条書きのプロパティ] ダイアログボックスを開きます。
箇条書きのプロパティ
[箇条書きの種類]
・なし
 箇条書きを中止します。
・行頭文字付き(番号なし)
 行頭文字(●、○、■)付きの箇条書きです。
 行頭文字は [Bullet Style] から選択します。
・番号付き
 番号(123、TUV、@AB、ABC、abc)付きの箇条書きです。
 番号の種類は [数字のスタイル] から選択します 。
・説明文
 用語の説明や言葉の定義を書くときに使うリスト(定義リスト)です。

いくつか見本を見ていきます。

■ 行頭文字付き(番号なし)リスト

・箇条書きの種類="行頭文字付き"、Bullet style="○"
<ul style="list-style-type: circle;">
 <li>Trust You</li>
 <li>Chase</li>
 <li>Love Holic</li>
</ul>
・箇条書きの種類="行頭文字付き"、Bullet style="■"
<ul style="list-style-type: square;">
 <li>Let's Party</li>
 <li>Belive</li>
 <li>Through the Sky</li>
</ul>
行頭文字のデフォルトは "●" で、種類を変えるときは list-style-type プロパティで指定し、"○" はプロパティ値 circle 、"■" はプロパティ値 square です。

■ 番号付きリスト

・箇条書きの種類="番号付き"、数字のスタイル="T"
  1. Break it down
  2. Crazy 4 U
  3. Rock Your Body
<ol style="list-style-type: upper-roman;">
 <li>Break it down</li>
 <li>Crazy 4 U</li>
 <li>Rock Your Body</li>
</ol>
・箇条書きの種類="番号付き"、数字のスタイル="@"、開始番号="2"
  1. Rain
  2. Without Your Love
  3. Talk to you
<ol start="2" style="list-style-type: lower-roman;">
 <li>Rain</li>
 <li>Without Your Love</li>
 <li>Talk to you</li>
</ol>
・箇条書きの種類="番号付き"、数字のスタイル="A"、開始番号="5"
  1. Get Out The Way
  2. Sweet love...
  3. Gentle Words
<ol start="5" style="list-style-type: upper-alpha;">
 <li>Get Out The Way</li>
 <li>Sweet love...</li>
 <li>Gentle Words</li>
</ol>
・箇条書きの種類="番号付き"、数字のスタイル="a"、開始番号="10"
  1. magic
  2. COME WITH ME
  3. feel my mind
<ol start="10" style="list-style-type: lower-alpha;">
 <li>magic</li>
 <li>COME WITH ME</li>
 <li>feel my mind</li>
</ol>

■ 定義リスト

用語の説明や言葉の定義を書くときに、用語と説明文という形でリストにします。
こんな感じです。
サイト(Website)
ホームページを構成するファイルを置くスペースのことで、Web サーバーの中にある。
サーバ(Server)
接続されたコンピュータにサービスを提供するためのコンピュータ。
アップロード(Upload)
コンピュータからコンピュータにデータを送信すること。受信する場合はダウンロード。
<dl>
 <dt>サイト(Website)</dt>
 <dd>ホームページを構成するファイルを置くスペースのことで、Web サーバーの中にある。</dd>
 <dt>サーバ(Server)</dt>
 <dd>接続されたコンピュータにサービスを提供するためのコンピュータ。</dd>
 <dt>アップロード(Upload)</dt>
 <dd>コンピュータからコンピュータにデータを送信すること。受信する場合はダウンロード。</dd>
</dl>
「定義リスト」は、<dl>要素(Definition List)で、用語は<dt>要素(Definition Term)、説明文は<dd>要素(Definition Description)になります。

[箇条書きのプロパティ] ダイアログボックスの [箇条書きの種類] では、説明文しか選ぶことができないので、実際に定義リストを作るときには、最初に説明したい用語を書いて、メニューバーから、[書式(O)] → [リスト(L)] → [用語の定義(T)] を選択します。
書式メニューから用語の定義を選択
[用語の定義(T)] を選択すると、最初に書いた用語が<dt>要素になり、続いて改行キー(Enter)を押すと、その後のテキストが説明文(< dd>要素)になります。さらに改行キーを押すと、その後が<dt>要素になり、改行するたびに、用語と説明文が繰り返されます。


Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座