過去の記事>2009年1月

2009年1月30日 金曜日  著者:

リストで表記する

マーク付きでリスト形式で表記させたい時には、「<ul>」,「<li>」を使用します。

HTML:
  1. <li>Clammbon</li>
  2. <li>Polaris</li>
  3. </ul>

表示結果

  • Clammbon
  • Polaris

番号付きでリスト表記したい場合は、「<ul>」の代わりに「<ol>」を使用します。

HTML:
  1. <li>Mercury</li>
  2. <li>Venus</li>
  3. <li>Earth</li>
  4. </ol>

表示結果

  1. Mercury
  2. Venus
  3. Earth

リストのマーカーを指定する

リストのマーカーを指定する時は、「list-style-type」を使用します。
list-style-type
マークの種類は以下になります。ブラウザによって、対応していないマークもあります。

項目 表示 項目 表示
対応ブラウザ 対応ブラウザ
何もなし none none 小文字
ギリシャ文字
lower-greek lower-greek
IEFireFoxSafariOpera IE非対応FireFoxSafariOpera
黒丸 disc disc 大文字
ラテン文字
upper-latin upper-latin
IEFireFoxSafariOpera IE非対応FireFoxSafariOpera
白丸 circle circle 小文字
ラテン文字
lower-latin lower-latin
IEFireFoxSafariOpera IE非対応FireFoxSafariOpera
四角 square square ヘブライ数字 hebrew hebrew
IEFireFoxSafariOpera IE非対応FireFoxSafariOpera非対応
数字 decimal decimal アルメニア数字 armenian armenian
IEFireFoxSafariOpera IE非対応FireFoxSafari非対応Opera
大文字
アルファベット
upper-alpha upper-alpha グルジア数字 georgian georgian
IEFireFoxSafariOpera IE非対応FireFoxSafari非対応Opera
小文字
アルファベット
lower-alpha lower-alpha 漢数字 cjk-ideographic cjk-ideographic
IEFireFoxSafariOpera IE非対応FireFoxSafari非対応Opera非対応
大文字
ローマ数字
upper-roman upper-roman ひらがな hiragana hiragana
IEFireFoxSafariOpera IE非対応FireFoxSafari非対応Opera非対応
小文字
ローマ数字
lower-roman lower-roman カタカナ katakana katakana
IEFireFoxSafariOpera IE非対応FireFoxSafari非対応Opera非対応
2桁の数字 decimal-leading-zero decimal-leading-zero いろは hiragana-iroha hiragana-iroha
IE非対応FireFoxSafari非対応Opera IE非対応FireFoxSafari非対応Opera非対応
      イロハ katakana-iroha katakana-iroha
IE非対応FireFoxSafari非対応Opera非対応

HTML:
  1. <ul style="list-style-type:disc;">
  2. <li>Mars</li>
  3. <li>Jupiter</li>
  4. <li>Saturn</li>
  5. </ul>

表示結果

  • Mars
  • Jupiter
  • Saturn

リストのマーカーの位置を指定する

リストの先頭に表示するマーカーの表示位置を指定する時は、「list-style-position」を使用します。
list-style-position

マーカー以外の部分をインデントさせる場合 outside
マーカーとマーカー以外の部分の高さを同じにする場合 inside

HTML:
  1. <ul style="list-style-position:outside;">
  2. <li>ソリッドステイト<br>サヴァイヴァー</li>
  3. <li>テクノ<br>デリック</li>
  4. <li>浮気なぼくら<br>&インストゥルメンタル</li>
  5. </ul>
  6.  
  7. <ul style="list-style-position:inside;">
  8. <li>The City<br>of Light</li>
  9. <li>Tokyo<br> Town Pages</li>
  10. <li>東京<br>シャイネス</li>
  11. </ul>

表示結果

  • ソリッドステイト
    サヴァイヴァー
  • テクノ
    デリック
  • 浮気なぼくら
    &インストゥルメンタル
  • The City
    of Light
  • Tokyo
    Town Pages
  • 東京
    シャイネス

リストの先頭に表示するマーカーに画像を指定する

リストの先頭に表示するマーカーに画像を指定する時は、「list-style-image」を使用します。
list-style-image

例 「マーカー」(画像URL:/wp-content/uploads/2009/01/dididi.png)をマーカーとして使う場合

HTML:
  1. <ul style="list-style-image:url('/wp-content/uploads/2009/01/dididi.png');">
  2. <li>トロピカル・ダンディー</li>
  3. <li>泰安洋行</li>
  4. <li>はらいそ</li>
  5. </ul>

表示結果

  • トロピカル・ダンディー
  • 泰安洋行
  • はらいそ

まとめて設定する

「list-style」を使用すると、「list-style-type」「list-style-position」「list-style-image」をまとめて設定することができます。「list-style-type」と「list-style-image」を指定した場合は、「list-style-image」が優生的に表示されます。
list-style

HTML:
  1. <ul style="list-style:disc inside url('/wp-content/uploads/2009/01/dididi.png');">
  2. <li>はっぴいえんど</li>
  3. <li>風街ろまん</li>
  4. <li>HAPPY END</li>
  5. </ul>

表示結果

  • はっぴいえんど
  • 風街ろまん
  • HAPPY END

背景を指定する

背景に関する指定をまとめてするときは、「background」を使用します。
background

HTML:
  1. <p style="background:#f8dce0 url('/wp-content/uploads/2009/01/html0724.png');">ゆうていみやおうきむこうほりいゆうじとりやまあきらぺぺぺぺぺぺぺぺぺぺ…</p>

表示結果

ゆうていみやおうきむこうほりいゆうじとりやまあきらぺぺぺぺぺぺぺぺぺぺ…

余白を設定する

余白を設定する場合には、「padding」「margin」を使用します。それぞれの範囲は以下のようになっています。
それぞれの範囲
それぞれ上下左右の余白の幅をまとめて指定することができます。値は数値(px,em…)で指定し、それぞれの値を半角スペースで区切ります。

paddingとmargin
また、padding,margine共に、スタイルの中に値がいくつ入っているかによって、指定する幅の場所が変わってきます。
余白の幅が共通の値である場合、この記述の仕方を覚えておくと便利です。

  • 値が1つの場合 style="padding:値(上下左右共通の幅);"
  • 値が2つの場合 style="padding:値(上下共通の幅) (左右共通の幅);"
  • 値が3つの場合 style="padding:値(上の幅) (左右共通の幅) (下の幅);"
  • 値が4つの場合 style="padding:値(上の幅) (右の幅) (下の幅) (左の幅);"(上から時計回りの順番です)

HTML:
  1. <div style="background-color:#6699CC; padding:10px;">OK Computer</div>
  2. <div style="background-color:#6699CC; margin:20px;">Amnesiac</div>
  3. <div style="background-color:#6699CC; margin:10px 50px 0px 200px; padding:10px 15px;">In Rainbows</div>

分かりやすくするために、padding,margineを適用したdivタグの背景に色を付けています。

表示結果

OK Computer
Amnesiac
In Rainbows

まとめ

7日に渡ってお送りしてきた「7日で覚えるHTML」、ひとまずここで終了です。いかがでしたでしょうか。
ざざっと突っ走ってきた感もありますが、おおよその基本的なタグ、css(スタイルシート)の要素は例とともに挙げてまいりましたので、簡単なWebページでしたらここまでの項目だけで作る事が可能だと思います。

次回以降、実際にサイトを作りながら、もう少し突っ込んだところまでHTMLとCSSを見ていく新企画をスタートさせたいと考えていますので、その際はまたよろしくご愛顧たまわりますよう。

では、また会う日まで。ごきげんよう。
烏山菊千代

人気ブログランキング にほんブログ村 IT技術ブログへ
カテゴリー: 7日で覚えるHTML  | タグ: ,  | コメントを付ける