2009年08月11日

リスト・箇条書き HTMLタグ

スポンサード リンク


サンプル

番号なしリスト (列挙型リスト)

HTML タグ 表示例
<ul style="list-style-type : disc;">
  <li>
ジャバスクリプト</li>
  <li>
スタイルシートCSS</li>
  <li>
HTML タグ</li>
</ul>

  • ジャバスクリプト
  • スタイルシートCSS
  • HTML タグ
   
<ul>〜</ul>で番号なしリストを作成します。
 <li>〜</li>に列挙する項目を入れます。
list-style-type:type; プロパティは、表示するリストマークのタイプを選択する際に使用します。

  none      //   リストマークなし
  disc      //  黒丸
  circle     //   白丸
  square   //    四角

  <ul>に style を指定しない場合は disc 黒丸 が既定値として表示されます。

番号付きリスト(順序型リスト)

HTML タグ 表示例
<ol style="list-style-type : upper-roman;">
  <li>
Seesaaブログ カスタマイズ</li>
  <li>
動く文字 ティッカー 電光掲示板</li>
  <li>
メニュー作成</li>
</ol>

  1. Seesaaブログ カスタマイズ
  2. 動く文字 ティッカー 電光掲示板
  3. メニュー作成

<ol>〜</ol>で番号付きリストを作成します。
 <li>〜</li>に列挙する項目を入れます。

 decimal           //   数字  1 2 3
 lower-roman    //   ローマ数字 小文字 @AB
 upper-roman   //    ローマ数字 大文字 TUV
 lower-alpha    //    アルファベット 小文字 a b c
 upper-alpha   //    アルファベット 大文字 A B C

    <ol>に style を指定しない場合は decimal   数字  1 2 3 が既定値として表示されます。

説明付きリスト(定義型リスト)

HTML タグ 表示例
<dl>
    <dt><a href="#">
レンタルサーバ</a></dt>
  <dd>
お得なサーバーの紹介です。</dd>
  <dt><a href="#">
heteml(ヘテムル) </a>
  <dd>
5GB の大容量。音楽、ムービー</dd>
  <dd>
ファイル等をふんだんに使えます。</dd>
    <dt><a href="#">
ロリポップ</a></dt>
  <dd>
なんと月額250円から!</dd>
</dl>

レンタルサーバー
お得なサーバーの紹介です。
heteml(ヘテムル)
5GB の大容量。音楽、ムービー
ファイル等をふんだんに使えます。
ロリポップ
なんと月額250円から!

<dl></dl>で説明付きのリストを作成します。
<dt>レンタルサーバ</dt>に 見出し(定義語)を入れます。
<dd>お得なサーバーの紹介です。</dd>に見出し(定義語)とその内容(説明文)を書きます。
          <dd>はインデント表示されます。

画像でリストマーク

HTML タグ 表示例
<ul style="list-style-image : url( /image/lis.gif);">
  <li><a href="#">
ローテーションバナー</a></li>
  <li><a href="#">
アコーディオンメニュー </a></li>
  <li><a href="#">
格安高速バス キラキラ号</a></li>
</ul>

<ul>タグに style="list-style-image : url(***);" を設定し
  *** に 表示するリストマークのURLを書きます。


posted by javaScript at 16:49 | 大阪 ☁ | HTML タグ 要素 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。