Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSSスタイルリスト(UL)

次のようにCSS一覧プロパティの役割は次のとおりです。

  • 設定別のリスト項目は、順序付けられたリストとしてマークされています
  • 設定別のリスト項目は順不同リストとしてマークされています
  • 設定リスト項目のマーカー画像


リスト

HTMLでは、リストの2つの種類があります。

  • 順不同リスト - リスト項目は、特殊なグラフィックが付いている(など黒点、小箱、など)
  • リストを命じた - リスト項目は、数字や文字が付いています

CSSを使用すると、さらにスタイルを一覧表示することができ、画像リストアイテムマーカーを作ることができます。


別のリストアイテムマーカー

リストスタイル-type属性は、マーカーであるリスト項目のタイプを指定します::

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

»をお試しください

一部の値は、順不同リストで、一部は順序付きリストです。


画像リスト項目マーカーとして

画像リストアイテムマーカーを指定するには、list-style-imageプロパティを使用します。

ul
{
list-style-image: url('sqpurple.gif');
}

»をお試しください

上記の例では、すべてのブラウザで同じではない示し、IEとOperaは、Firefox、Chromeと少し高いのSafariよりもイメージタグを表示します。

あなたはすべてのブラウザでロゴの同じ画像を配置したい場合は、次のように、ブラウザの互換性ソリューションを使用する必要があります

ブラウザの互換性ソリューション

また、すべてのブラウザで、次の例では、イメージタグが表示されます:

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

»をお試しください

例を説明しました:

  • UL:
    • 設定のlist-style-typeは、リストアイテムマーカーを削除することはありません
    • 設定パディングとマージン0PX(ブラウザの互換性)
  • すべてのUL李:
    • 画像のURLを設定し、それは一度だけ表示されます設定(なしリピート)
    • あなたは、画像の位置(左0PXと垂直5pxの)を見つける必要があり
    • リスト内のテキストへのパディング左属性を持ちます

リスト - 速記プロパティ

あなたは、単一のプロパティ内のすべてのプロパティのリストを指定することができます。 これは簡略記述特性と呼ばれています。

リストに略語プロパティを使用し、次のように、スタイル属性のリストが設定されます。

ul
{
list-style: square url("sqpurple.gif");
}

»をお試しください

ご注文の速記プロパティ値を使用している場合です。

  • リストスタイル型
  • リストスタイルの位置(手順については、次のCSS属性テーブルを参照してください)
  • リストスタイルイメージ

これらの値がまだ指定されている残りのための1含まれていない場合、それは問題ではありません。


例

より多くの例

すべての異なったリストアイテムマーカー
この例では、すべての異なるCSSリストアイテムマーカーを示しています。


すべてのCSS一覧プロパティ

プロパティ 説明
リストスタイル 速記プロパティ。 すべてのプロパティのリストについては声明の中で提供されています
リストスタイルイメージ 画像は、アイテムのリストに署名するように設定されています。
リストスタイルの位置 リストリストアイテムマーカーで位置を設定します。
リストスタイル型 リストアイテムフラグのタイプを設定します。