スタッフブログ

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

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

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

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

<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 ２桁数字
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クリエイター能力認定試験 認定インストラクター

最新記事 by スタッフ 「ほ」 (全て見る)

• [Photoshop]生成塗りつぶしを使ってみよう - 2023
• [Premiere Pro]使わなかったデータをプロジェクトから除外する - 2022
• [新講座]イラストレーター（オンライン講座）始めました - 2022