スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Home ＞ HTML&CSS講座 ＞ CSS リスト

CSS リスト

投稿日：2006年9月8日　　　レベル：初級　　　　ソフトウェア：：DreamWeaver

CSS リストリストによる文章表記は場面によって非常に重要で、必要に応じて編集できる幾通りものリスト表記の仕方が存在します。 ここではその中からいくつかを紹介します。

整理記号が付随するリストの例


  1. Object 1

  2. Object 2

  3. Object 3

  4. Object 4

  5. Object 5


単純羅列型リストの例
単純羅列型リスト


単純羅列型の場合は整理記号つきの場合の例にある数字添付の変わりに丸や矢印で文頭が修飾されていることが見て取れます。 ここからこれをどのようにして作成するかを見てみましょう。

整理記号の付随するリスト用コード


<ol> <!-- Ordered List --->
<li>Object 1</li>
<li>Object 2</li>
<li>Object 3</li>
<li>Object 4</li>
<li>Object 5</li>
</ol>

単純羅列型リスト用コード


<ul> <!-- Unordered List --->
<li>Object 1</li>
<li>Object 2</li>
<li>Object 3</li>
<li>Object 4</li>
<li>Object 5</li>
</ul>


CSSを編集してリスト表示をカスタマイズしましょう。 単純羅列型で丸や矢印以外を用いたいとき、 例えば四角を用いたいとき、このようにします。

<ul id="squares"> <!-- Unordered List With Squares---> <li>Object 1</li> <li>Object 2</li> <li>Object 3</li> <li>Object 4</li> <li>Object 5</li> </ul>

CSSファイル内で下記のように宣言してください.

#squares li { list-style-type: square; }

これらをまとめて実行した結果が下記になります。

実行結果

他に宣言可能なリストスタイル用の変数は下記のようなものが挙げられます。

  • disc(丸)
  • circle(円)
  • square(四角)
  • decimal(10進数)
  • lower-roman(小文字ローマ数字　Ex. i,ii )
  • upper-roman(大文字ローマ数字　Ex. I, II)
  • lower-alpha(小文字ローマ字　Ex. a,b)
  • upper-alpha(大文字ローマ字　Ex. A,B)
  • none(なし)

これらをいろいろと変更してみて一番あうものを探してください。 もちろんここで記載した以外にもCSSを使ってカスタマイズすることができます。 私の他のCSSのセクションを参照にしてください。


引用:Web Design Library著者:Joseph Skidmore翻訳:atuk




スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング