超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Mozilla Color AccessUp Links SiteMap
ページ
テキスト
スクロール
ライン
イメージ
リンク
リスト
テーブル
フレーム
ボックス
フィルタ
a〜h
i〜z

 箇条書きリストを作る
<ul>
<li>Teaser feat.Clench & Blistah</li>
<li>real Emotion</li>
</ul>
  • Teaser feat.Clench & Blistah
  • real Emotion
 箇条書きリストのマークを変更する
<ul type="disc">
<li>BOY FRIEND?</li>
<li>Your only one</li>
</ul>
  • BOY FRIEND?
  • Your only one
<ul type="circle">
<li>one</li>
<li>One night romance</li>
</ul>
  • one
  • One night romance
<ul type="square">
<li>1000の言葉</li>
<li>S.O.S -sound of silence-</li>
</ul>
  • 1000の言葉
  • S.O.S -sound of silence-
 箇条書きリストのリスト内容のマークを部分的に変更する
<ul>
<li type="disc">m・a・z・e</li>
<li type="circle">乱反射</li>
<li type="square">Pearl Moon</li>
</ul>
  • m・a・z・e
  • 乱反射
  • Pearl Moon
 順番付きリストを作る
<ol>
<li>Nasty girl</li>
<li>To be one</li>
<li>love across the ocean</li>
</ol>
  1. Nasty girl
  2. To be one
  3. love across the ocean
 順番付きリストのマークを変更する
<ol type="1">
<li>grow into one</li>
<li>KODA KUMI...</li>
</ol>
  1. grow into one
  2. KODA KUMI...
<ol type="A">
<li>POWER OF LOVE</li>
<li>BLUE TEARS</li>
</ol>
  1. POWER OF LOVE
  2. BLUE TEARS
<ol type="a">
<li>DAYDREAM</li>
<li>Hello! Orange Sunshine</li>
</ol>
  1. DAYDREAM
  2. Hello! Orange Sunshine
<ol type="i">
<li>RADIO</li>
<li>小さな頃から</li>
</ol>
  1. RADIO
  2. 小さな頃から
<ol type="I">
<li>自転車</li>
<li>Over Drive</li>
</ol>
  1. 自転車
  2. Over Drive
 順番付きリストのリスト内容のマークを部分的に変更する
<ol>
<li type="1">KYOTO</li>
<li type="A">ドキドキ</li>
<li type="a">そばかす</li>
<li type="i">クラシック</li>
<li type="I">くじら12号</li>
</ol>
  1. KYOTO
  2. ドキドキ
  3. そばかす
  4. クラシック
  5. くじら12号
 順番付きリストの最初の番号を変更する
<ol start="5">
<li>散歩道</li>
<li>ミュージック ファイター</li>
</ol>
  1. 散歩道
  2. ミュージック ファイター
<ol type="A" start="3">
<li>LOVE SOUL</li>
<li>Brand New Wave Upper Ground</li>
</ol>
  1. LOVE SOUL
  2. Brand New Wave Upper Ground
 順番付きリストの番号を途中から変更する
<ol type="i">
<li>FRESH</li>
<li>JUDY AND MARY</li>
<li>YUKI</li>
<li value="7">TAKUYA</li>
<li>YOSHIHITO ONDA</li>
<li>KOTA IGARASHI</li>
</ol>
  1. FRESH
  2. JUDY AND MARY
  3. YUKI
  4. TAKUYA
  5. YOSHIHITO ONDA
  6. KOTA IGARASHI
 リストマークを指定する [スタイルシート]
<ul style="list-style-type:disc;">
<li>Introduction</li>
<li>Fly high</li>
</ul>
  • Introduction
  • Fly high
<ul style="list-style-type:circle;">
<li>Trauma</li>
<li>And Then</li>
</ul>
  • Trauma
  • And Then
<ul style="list-style-type:square;">
<li>immature</li>
<li>Boys & Girls</li>
</ul>
  • immature
  • Boys & Girls
<ul style="list-style-type:decimal;">
<li>TO BE</li>
<li>End roll</li>
</ul>
  • TO BE
  • End roll
<ul style="list-style-type:lower-roman;">
<li>P.SU</li>
<li>WHATEVER</li>
</ul>
  • P.SU
  • WHATEVER
<ul style="list-style-type:upper-roman;">
<li>too late</li>
<li>appears</li>
</ul>
  • too late
  • appears
<ul style="list-style-type:lower-alpha;">
<li>monochrome</li>
<li>Interlude</li>
</ul>
  • monochrome
  • Interlude
<ul style-"list-style-type:upper-alpha;">
<li>LOVE〜refrain〜</li>
<li>WHO...</li>
</ul>
  • LOVE〜refrain〜
  • WHO...
<ul style="list-style-type:none;">
<li>LOVEppears</li>
<li>ayumi hamasaki</li>
</ul>
  • LOVEppears
  • ayumi hamasaki
 リストマークを画像にする [スタイルシート]
<ul style="list-style-image:url('sample/list_yasinoki.gif');">
<li>Far away</li>
<li>SURREAL</li>
<li>AUDIENCE</li>
</ul>
  • Far away
  • SURREAL
  • AUDIENCE
<ul>
<li style="list-style-image:url('sample/list_image1.gif');">Far away</li>
<li style="list-style-image:url('sample/list_image2.gif');">SURREAL</li>
<li style="list-style-image:url('sample/list_image3.gif');">AUDIENCE</li>
</ul>
  • Far away
  • SURREAL
  • AUDIENCE
 リストマークの位置を指定する [スタイルシート]
<ul style="list-style-position:outside;">
<li>
通常はリストマークは文章の外側(outside)に表示されますが、list-style-position プロパティを使うと、文章の内側に設定することができます。ただし、通常、リストは1行の箇条書きで書くので、あまりこれを使うことはないと思われます。
</li>
</ul>
  • 通常はリストマークは文章の外側(outside)に表示されますが、list-style-position プロパティを使うと、文章の内側に設定することができます。ただし、通常、リストは1行の箇条書きで書くので、あまりこれを使うことはないと思われます。
<ul style="list-style-position:inside;">
<li>
実際に使ってみても、リストマークが内側にあると、ちょっと格好悪い。覚えても使うことはないでしょう。ちなみに、画像をリストマークに使うことと、このリストマークの位置指定はまだ Netscape では対応していないらしい。
</li>
</ul>
  • 実際に使ってみても、リストマークが内側にあると、ちょっと格好悪い。覚えても使うことはないでしょう。ちなみに、画像をリストマークに使うことと、このリストマークの位置指定はまだ Netscape では対応していないらしい。