本文へスキップ

カリンボウ株式会社は、自由な発想で、新しいデザインの提案とインターネットショップ運営の会社です。

Mail: info@calimbo.jp

トップページ >技術コラム >HTML基礎

リスト

記号付きリスト

<ul>タグを使用します。
箇条書きをするときに使います。リストの先頭には「●」等の記号を付けます。
記号の変更はtype属性で指定します。指定後はすべて同じ記号が使われます。
特定の行だけ記号を変更する場合は<li>タグ内にtype属性で指定します。指定がない場合は<ul>タグの記号が使用されます。
disk 「●」で表示。なにも指定しないとこの記号が使われます。
circle 「○」で表示
square 「■」で表示
<ul>
     <li>円光院</li>
     <li type="circle">法泉寺</li>
     <li type="square">長禅寺</li>
     <li type="circle">能成寺</li>
     <li>東光寺</li>
</ul>
上記をブラウザで表示します。

番号付きリスト

<ol>タグを使用します。
番号付きの箇条書きで使用します。
<ol>
       <li>円光院</li>
       <li>法泉寺</li>
       <li>長禅寺</li>
       <li>能成寺</li>
       <li>東光寺</li>
</ol>i
ブラウザで表示すると以下のようになります。
  1. 円光院
  2. 法泉寺
  3. 長禅寺
  4. 能成寺
  5. 東光寺
番号付きリストの表示形式の変更はtype属性を使用します。
1 番号を数字「1,2,3,・・・・・・」で表示します。これがデフォルトです。
A 番号をアルファベット「A,B,C,・・・・・」で表示します。
I 番号をローマ数字(大文字)「T、U、V、・・・・」で表示します。
i 番号をローマ数字(小文字)「@、A、B、・・・・」で表示します。
例)
<ol type="i">
      <li>円光院</li>
      <li>法泉寺</li>
      <li>長禅寺</li>
      <li>能成寺</li>
      <li>東光寺</li>
</ol>
ブラウザで表示すると以下になります。
  1. 円光院
  2. 法泉寺
  3. 長禅寺
  4. 能成寺
  5. 東光寺

説明付きリスト

<dl>タグを使用します。
使用方法は以下のようにします。用語と説明が区別されて表示されます。
<dl>
     <dt>用語</dt>
     <dd>説明</dd>
</dl>

例)
<dl>
    <dt>縄文時代</dt>
   <dd>紀元前12,000年前から紀元前BC4世紀頃まで<br>
旧石器時代が終わり、日本列島に土器、竪穴式住居が出現してきます。集落の形や定住が始まってきます。</dd>
     <dt>弥生時代</dt>
     <dd>紀元前3世紀から3世紀頃まで<br>
稲作、金属器(青銅器、鉄器)が中国大陸や朝鮮半島から伝わります。大規模な食料生産が始まり、村落ができます。そして、身分差が生まれ争いが起こるようになります。
      </dd>
</dl>

ブラウザで表示すると以下になります。

バナースペース

カリンボウ株式会社

〒400-0862
山梨県甲府市朝気1-2-37
アルガハイツ101号室

E-MAIL info@calimbo.jp
TEL      055-244-5909
FAX      055-236-9850

[1]HTMLの基礎
1.1.HTMLとは
1.2.ソフトが作るHTML
1.3.HTMLの基本構造
1.4.<head>で使われるタグ
1.5.<body>で使われる基本なタグ
1.6.リスト
1.7.画像の表示
1.8.基本的な表を作る