ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - リストをつくる

リストをつくる

リストって何かわかりますか?いまいちピンと来ないかも知れませんね。箇条書きにする時などに便利な文の頭につける印の事です。

マーク付きリスト(順不同リスト)

  1. 実際に見てもらった方が早い。
  2. 百聞は一見にしかず。
  3. 今、使っているこれがリストです。
今回はこれの作り方を紹介します。

上の様なマークのリストを作りたい場合は、
<ul>
<li>実際に見てもらった方が早い。</li>
<li>百聞は一見にしかず。</li>
<li>今、使っているこれがリストです。</li>
</ul>
の様に<ul></ul>で全体を囲ってリストにしたい文字を<li></li>で囲います。

番号付きリスト(序列リスト)
  1. いろはにほへと
  2. ちりぬるを
  3. わかよたれそ
リストをマークだけでなく数字にする事もできます。
<ol>
<li>いろはにほへと</li>
<li>ちりぬるを</li>
<li>わかよたれそ</li>
</ol>
数字にしたい場合は<ol></ol>で全体を囲ってリストにしたい文字を<li></li>で囲います。

リストの種類紹介

他にも色々とリストにする事ができるので表にして紹介したいと思います。

説明 見本
disc 黒丸(ul)
  1. いろはにほへと
  2. ちりぬるを
  3. わかよたれそ
circle 白丸(ul)
  1. つねならむ
  2. うゐのおくやま
  3. けふこえて
square 黒四角(ul)
  1. あさきゆめみし
  2. ゑひもせす
  3. (いろは歌)
decimal 数字(ol)
  1. 色は匂へど
  2. 散りぬるを
  3. 我が世誰ぞ
upper-alpha 大文字アルファベット(ol)
  1. 常ならむ
  2. 有為の奥山
  3. 今日越えて
lower-alpha 小文字アルファベット(ol)
  1. 浅き夢見じ
  2. 酔ひもせず
  3. (漢字いろは歌)
upper-roman 大文字ローマ数字(ol)
  1. とりなくこゑす
  2. ゆめさませ
  3. みよあけわたる
lower-roman 小文字ローマ数字(ol)
  1. ひんかしを
  2. そらいろはえて
  3. おきつへに
none マークなし(ol)
  1. ほふねむれゐぬ
  2. もやのうち
  3. (鳥啼歌)

使い方

実際にどうやって使うのかというと、黒丸のリストの時は<ul style="list-style-type:disc;"> ulの後ろにstyle="list-style-type:値;と記入します。
あとは上で紹介したとおりのままで大丈夫です。

黒四角を例に説明してみます。

  1. 並べて書きたい時は
  2. リストを作った方が
  3. 見やすいので使えます。

<ul style="list-style-type:square;">
<li>並べて書きたい時は</li>
<li>リストを作った方が</li>
<li>見やすいので使えます。</li>
</ul>
この様にします。


関連ページ)
・リストをつくる
画像のリストをつくる
定義型リストをつくる


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
リストについて
「マークリスト」「数字リスト」ではなく、それぞれ「順不同リスト」「序列リスト」ですよ。

「順不同リスト」:並び順に関係なくただ箇条書きとしたい場合。
「序列リスト」:並び順にも意味がある場合。

 また、「リストのタグ」ではないです(STYLE属性で指定するスタイルのプロパティ)。
「リストに使われるマークなどを変えるにはSTYLE属性を指定します」といったような記述の方がいいのでは。

STYLE="list-style-type:プロパティの値;

参考:プロパティ -> CSS 仕様書(邦訳)へのリンク)
http://www.lucky-bag.com/appendix/css-property/css-property-list_ja.html
Re;リストについて
名称を訂正させていただきました。
初心者の人はSTYLE属性が何の事かわからないと思うので、リストのタグの表現を削除しました。
なるほど
 そうですね、この方がかえって分かりやすいことに私も気が付きました。訂正お疲れ様です。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/114-a7493a83   

Template Designed by DW99