mamohoのＨＰ作成講座

mamohoのＨＰ作成講座

リスト　応用編

●　リストを書いてみよう　その3

前回と　前々回のリストの作りかたの応用です
たとえば　リストの最初のお題目の行頭をを数字やアルファベットにして
リスト項目は　それぞれ　記号で記述する　みたいなやり方は
できないでしょうか　
実は　リストを入れ子にすることで出来るのです
実際にやってみましょう

<ol>
<li> 好きなくだものは </li>
<ul type="circle">
　<li> みかん </li>
<li> りんご </li>
　<li> いちご </li>
<li> バナナ </li>
<li> ぶどう </li>
</ul>
<li> 嫌いなお野菜は </li>
<ul type="square">
<li> ピーマン </li>
<li> 玉ねぎ </li>
<li> セロリ </li>
<li> にんじん </li>
<li> なす </li>
</ul>
</ol>

すると　このように表示されるわけです

  1. 好きなくだものは
    • みかん
    • りんご
    • いちご
    • バナナ
    • ぶどう
  2. 嫌いなお野菜は
    • ピーマン
    • 玉ねぎ
    • セロリ
    • にんじん
    • なす

いろいろと試してみましょう

行頭文字の数字やアルファベットは　開始番号を変更することもできます
使う用途はないかもしれませんが　こういうことも出来ます　ということだけ
把握しておいてください

●　ol　のあとに　start="任意の数字"　を入れることで　好きな数字から　 　リストを開始することができます

　　<ol start="5">　とすると　リストは5から始まります

●　リストの途中から数字を変えたいときは
　　 li　のあとに　value="任意の数字">を入れると　指定した数字からまた
　　 数がふえていきます

<ol start="18">
　　<li>いちご</li>
　　<li>りんご</li>
　　<li value="5">みかん</li>
　　<li>バナナ</li>
</ol>

すると　下記のように表示されます

  1. いちご 　　
  2. りんご 　　
  3. みかん 　　
  4. バナナ　　　

アルファベットでも　ローマ数字でも同じようにできますのでぜひ　挑戦してみてください

リストは他にもあって
用語の説明文を　リストのように表示することができますこれは　楽天広場では　表示されないようですが
こうゆうのもある　ということだけ覚えておいてください

<dl>
<dt> HTMLとは？ </dt>
<dd> Hyper Text Markup Languageの略です </dd>
<dt> ｗｗｗとは？ </dt>
<dd> World Wide Web の略です </dd>
</dl>

© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
    Share by: