リストと生成内容　＋【inherit】（PDF 素材）

リストと生成内容　＋【inherit】

生成内容の指定（content）

【:before】や【:after】と組み合わせて、文書中に任意のテキストを生成させたり、引用符を生成する。

生成内容を指定するプロパティ。

＜テキスト＞（引用符で囲み、指定する。）

＜URI＞（埋め込みオブジェクトとして生成する外部リソースをurl()で指定。）

nomal（内容を生成しない。ボックスも生成しない。）

テキストに改行を入れる場合は、「\A」を入れる。


（使用例）p:before {
		content: "abc";
　　　　　}

注意　【:before】や【:after】は、【a:after】のように、セレクタ名の次に書かなければならない。

エスケープ

【""】・【''】は、入れ子にする場合、交互に使用しなければならない。【"""】になる場合は、入れ子の文字をエスケープする。

「"""」となる場合は、「\」でエスケープする。【"\""】、「'''」も同じ【'\''】




※エスケープ文字は、出力されない。「\」は「¥」と同じ。




「\」や「¥」を出力したい場合は、【"\\"】【"\¥"】とする。

リスト

li要素のマーカーボックス（・や1などの部分）とリストマーカーのコントロールのために使用する。

「・や1」の部分をマーカーボックス、その後に続く内容を既本ブロックボックスと呼ぶ。




リストマーカーの種類（list-style-type）

リストマーカーの種類を指定するプロパティ。

none（リストマーカーを表示しない。）

disc（黒丸。デフォルト。）

circle（白丸。）

square（四角。）

decimal（1からの数字。）

lower-roman（ローマ数字。小文字。）

upper-roman（ローマ数字。大文字。）

lower-alpha（アルファベット。小文字。）

upper-alpha（アルファベット。大文字。）

decimal-leading-zero（01から始まる数字。）

lower-greek（古代ギリシャ文字の小文字。）

lower-latin（ラテン語の小文字。）

upper-latin（ラテン語の大文字。）

nebrew（ヘブライ数字。）

armenian（アルメニア数字。）

georgian（グルジア数字。）

cjk-ideographic（日本語の漢数字。一〜）

hiragana（日本語の平仮名。あ〜）

katakana（日本語の片仮名。ア〜）

hiragana-iroha（日本語の平仮名いろは順。い〜）

katakana-iroha（日本語の片仮名イロハ順。イ〜）

※キャプションの行揃えは、text-alignで指定する。

リストマーカーの画像（list-style-image）

リストマーカーの画像を指定するプロパティ。

none（リストマーカーに画像を表示しない。）

＜URI＞（リストマーカーに使用する画像を、url()で指定する。）

※list-style-typeと競合した場合、list-style-imageが優先される。

リストマーカーの位置（list-style-position）

リストマーカーの位置を指定するプロパティ。

outside（マーカーボックスを基本ブロックボックスの外側に配置する。デフォルト。）

inside（マーカーボックスを基本ブロックボックスの内側に配置する。）

リスト関連の一括指定（list-style）

リスト関連の一括指定するプロパティ。

半角空白で区切り、順不同で設定できる。




list-style-type　list-style-image　list-style-position

マーカーボックスと基本ブロックボックスの距離

マージンで指定するように推奨されている。

値の親要素からの継承（inherit）全プロパティに有効

値に【inherit】を設定する事により、親要素からの指定プロパティの値が継承できる。




（例）display: inherit; （例）margin: inherit; （例）padding: inherit;




（例）border: inherit; （例）position: inherit; （例）top: inherit;




（例）bottom: inherit; （例）float: inherit; （例）clear: inherit;




（例）z-index: inherit; （例）width: inherit; （例）height: inherit;




（例）line-height: inherit; （例）vartical-align: inherit; （例）text-align: inherit;




（例）overflow: inherit; （例）clip: inherit; （例）visibility: inherit;




（例）color: inherit; （例）background: inherit; （例）font-family: inherit;




（例）font-size: inherit; （例）text-indent: inherit; （例）content: inherit;




（例）border-collapse: inherit; （例）word-spacing: inherit; （例）list-style: inherit;

Today's Tips