リストで表記する
マーク付きでリスト形式で表記させたい時には、「<ul>」,「<li>」を使用します。
例
表示結果
- Clammbon
- Polaris
番号付きでリスト表記したい場合は、「<ul>」の代わりに「<ol>」を使用します。
例
表示結果
- Mercury
- Venus
- Earth
リストのマーカーを指定する
リストのマーカーを指定する時は、「list-style-type」を使用します。
マークの種類は以下になります。ブラウザによって、対応していないマークもあります。
| 項目 | 値 | 表示 | 項目 | 値 | 表示 |
|---|---|---|---|---|---|
| 対応ブラウザ | 対応ブラウザ | ||||
| 何もなし | none |  |
小文字 ギリシャ文字 |
lower-greek |  |
    |
 |
||||
| 黒丸 | disc |  |
大文字 ラテン文字 |
upper-latin |  |
|
|
||||
| 白丸 | circle |  |
小文字 ラテン文字 |
lower-latin |  |
|
|
||||
| 四角 | square |  |
ヘブライ数字 | hebrew |  |
|
 |
||||
| 数字 | decimal |  |
アルメニア数字 | armenian |  |
|
 |
||||
| 大文字 アルファベット |
upper-alpha |  |
グルジア数字 | georgian |  |
|
|
||||
| 小文字 アルファベット |
lower-alpha |  |
漢数字 | cjk-ideographic |  |
|
|
||||
| 大文字 ローマ数字 |
upper-roman |  |
ひらがな | hiragana |  |
|
|
||||
| 小文字 ローマ数字 |
lower-roman |  |
カタカナ | katakana |  |
|
|
||||
| 2桁の数字 | decimal-leading-zero |  |
いろは | hiragana-iroha |  |
|
|
||||
| イロハ | katakana-iroha |  |
|||
|
例
表示結果
- Mars
- Jupiter
- Saturn
リストのマーカーの位置を指定する
リストの先頭に表示するマーカーの表示位置を指定する時は、「list-style-position」を使用します。
| 値 | |
|---|---|
| マーカー以外の部分をインデントさせる場合 | outside |
| マーカーとマーカー以外の部分の高さを同じにする場合 | inside |
例
表示結果
- ソリッドステイト
サヴァイヴァー - テクノ
デリック - 浮気なぼくら
＆インストゥルメンタル
- The City
of Light - Tokyo
Town Pages - 東京
シャイネス
リストの先頭に表示するマーカーに画像を指定する
リストの先頭に表示するマーカーに画像を指定する時は、「list-style-image」を使用します。
例 「
」(画像URL:/wp-content/uploads/2009/01/dididi.png)をマーカーとして使う場合
表示結果
- トロピカル・ダンディー
- 泰安洋行
- はらいそ
まとめて設定する
「list-style」を使用すると、「list-style-type」「list-style-position」「list-style-image」をまとめて設定することができます。「list-style-type」と「list-style-image」を指定した場合は、「list-style-image」が優生的に表示されます。
例
表示結果
- はっぴいえんど
- 風街ろまん
- HAPPY END
背景を指定する
背景に関する指定をまとめてするときは、「background」を使用します。
例
-
<p style="background:#f8dce0 url('/wp-content/uploads/2009/01/html0724.png');">ゆうていみやおうきむこうほりいゆうじとりやまあきらぺぺぺぺぺぺぺぺぺぺ…</p>
表示結果
ゆうていみやおうきむこうほりいゆうじとりやまあきらぺぺぺぺぺぺぺぺぺぺ…
余白を設定する
余白を設定する場合には、「padding」「margin」を使用します。それぞれの範囲は以下のようになっています。
それぞれ上下左右の余白の幅をまとめて指定することができます。値は数値（px,em…）で指定し、それぞれの値を半角スペースで区切ります。
また、padding,margine共に、スタイルの中に値がいくつ入っているかによって、指定する幅の場所が変わってきます。
余白の幅が共通の値である場合、この記述の仕方を覚えておくと便利です。
- 値が1つの場合 style="padding:値（上下左右共通の幅）;"
- 値が2つの場合 style="padding:値（上下共通の幅） 値（左右共通の幅）;"
- 値が3つの場合 style="padding:値（上の幅） 値（左右共通の幅） 値（下の幅）;"
- 値が4つの場合 style="padding:値（上の幅） 値（右の幅） 値（下の幅） 値（左の幅）;"（上から時計回りの順番です）
例
分かりやすくするために、padding,margineを適用したdivタグの背景に色を付けています。
表示結果
まとめ
7日に渡ってお送りしてきた「7日で覚えるHTML」、ひとまずここで終了です。いかがでしたでしょうか。
ざざっと突っ走ってきた感もありますが、おおよその基本的なタグ、css（スタイルシート）の要素は例とともに挙げてまいりましたので、簡単なWebページでしたらここまでの項目だけで作る事が可能だと思います。
次回以降、実際にサイトを作りながら、もう少し突っ込んだところまでHTMLとCSSを見ていく新企画をスタートさせたいと考えていますので、その際はまたよろしくご愛顧たまわりますよう。
では、また会う日まで。ごきげんよう。
烏山菊千代
最近のコメント