新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CSS2.1まとめ書き-list-style編(HTML・CSSリファレンス)

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

CSS2.1まとめ書きは今回のlist-styleで一応最終回にしたいと思います。
margin、padding等もありますがこの辺りはまあ、紹介するまでもないだろうということで。。

ってか、CSS2.1の地点で今さら何をという話なんですけどね。

▼もうそろそろこちらを勉強した方がいいかもしれません。

スポンサーリンク
 

こちらもまずは各プロパティを解説。よく使う書き方で説明します。

list-style-type:disc;

リストの先頭に付けるマークの種類を設定するプロパティです。
「none」を指定してリストマークを消すのに使うことが一番多いと思います。

他にdisc(黒丸)、circle(白丸)、square(黒四角)等の指定ができます。
また、順リスト用にupper-roman(ローマ数字)、decimal(算用数字)等の指定もあります。

list-style-image:url(images/list.gif);

リストの先頭に付ける画像を設定するプロパティです。
「url(イメージのパス)」という値になります。
パス表記は絶対パス、相対パスどちらでも可です。

list-style-position:inside;

リストマークの位置を「inside」内側か「outside」外側かを指定します。
初期値は「outside」です。

で、これらをまとめて書く場合は以下のようになるわけです。

list-style:disc url(images/list.gif) inside;

これも順序は問いません。
したがって以下のようにも書けるわけです。

list-style:inside url(images/list.gif) disc;

ちなみに、「list-style-type」と「list-style-image」両方を設定している場合は「list-style-image」が優先されます。

「list-style」に関してはあまりまとめ書きをする利点、感じられません。
ぶっちゃけ、 「list-style-type」と「list-style-position」は初期値でいいですし。
ただ、

list-style-type:none;

list-style-image:url(images/list.gif);

などを書くときに

list-style:none;

list-style:url(images/list.gif);

などと省略して書けるのは便利だと思います。

 - Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

今、時代は猫。なのか?

1年以上前の記事です。内容が古い可能性があります。最近、巷で猫々騒がしい。

no image
こなせる?

1年以上前の記事です。内容が古い可能性があります。ここのところのホームページの連 …

no image
Googleのプラスワン(+1)ボタンをつけてみた(7/1追記)

1年以上前の記事です。内容が古い可能性があります。日本ではまだサービスを開始して …

ネットで印刷、印刷通販の「グラフィック」を使ってみた【納品編】

1年以上前の記事です。内容が古い可能性があります。発注、入稿と進んできたグラフィ …

no image
Web屋騒動に意見してみる

1年以上前の記事です。内容が古い可能性があります。ここ数日。Web屋に関する議論 …

不況の原因はインターネットに同意

1年以上前の記事です。内容が古い可能性があります。誰もが思いながらも口に出せない …

WordPress(ワードプレス)のURL表記をHTML表記にする方法 #wp

1年以上前の記事です。内容が古い可能性があります。牛歩戦術でゆっくりと進んでいる …

no image
画像共有サイト(写真共有サイト・フォトシェアリング)ってたくさんあるんだね

1年以上前の記事です。内容が古い可能性があります。前記事からの流れで画像共有サイ …

アイキャッチ画像のない記事にまとめてアイキャッチ画像が入れられる「Auto Post Thumbnail」【WordPressプラグイン】

1年以上前の記事です。内容が古い可能性があります。今回もブログ移転に関する記事で …

WordPress+Welcartでショッピングサイト構築【インストール編】

1年以上前の記事です。内容が古い可能性があります。ショッピングサイト構築にWor …

血液型オヤジ