バンフートレーニングスクールのサイトへ

[HTML/CSS] 意外と忘れやすいリストの設定

すみません、かなり長い間、ブログサボっておりました。
スタッフ「ほ」です。
いや、ほんとすみません。

といいつつ、今回もブログにがっつり時間がとれず、ちょいネタです。
すみません。

HTMLでマークアップするリストには「箇条書きリスト」「番号リスト」そして「定義リスト」の3つがあります。
今回、定義リストはちょっと置いておいて、箇条書きリストと番号リストにスポットを当てます。

まず、それぞれの違いですが、「箇条書きリスト」は以下のようなマークアップを行います。


<ul>
  <li>箇条書きリスト</li>
  <li>箇条書きリスト</li>
  <li>箇条書きリスト</li>
</ul>

すると、こんな感じのリストができます。

項目に順序がないリストを作成できます。

それに対して「番号リスト」は以下のマークアップです。


<ol>
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
</ol>

結果、こんな感じのリストができあがります。

内容に順序がある場合に使用します。

このリスト項目の頭についているマーク、実はCSSで変更ができます。

list-style-typeというプロパティを利用するのですが、利用できる値は以下の通りです。
disc 黒丸
circle 白丸
square 四角
decimal 数字

upper-alpha アルファベット(大文字)
lower-alpha アルファベット(小文字)
upper-roman ローマ数字(大文字)
lower-roman ローマ数字(小文字)

また、ブラウザやバージョンを選びますが、以下のような指定もあります。

desimal-leading-zero 2桁数字
cjk-ideographic 漢数字
hiragana ひらがな
katakana カタカナ
hiragana-iroha いろは
katakana-iroha イロハ

こちらにサンプルファイルを用意しました。
いろいろなブラウザで見てみてください。

また、番号リストの開始番号を変更することが可能です。
こちらはCSSではなく、HTMLの属性で行います。


<ol start="6">
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
</ol>

こんな感じで指定した数字からスタートするリストになります。

また、使うシーンが思い浮かびませんが、途中から番号を変更することも可能です。


<ol>
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li value="10">番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
</ol>

こんな感じで、value属性で数値を指定した部分から番号が変化します。

「シランカッター!」という方は、ぜひお試しあれ!

「そもそもHTMLとかCSS自体がよくわかんない」という方は、バンフートレーニングスクールのWEB基礎講座にてお待ちしております。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

The following two tabs change content below.
スタッフ 「ほ」

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ