CSSを使用して、箇条書きを含むボックスの内側と外側のどちらにマーカーを表示するかを指定するにはどうすればよいですか？
list-style-position プロパティは、マーカーが箇条書きを含むボックスの内側または外側のどちらに表示されるかを示します。 2つの値のうちの1つを持つことができます
| 値 | 説明 |
|---|---|
| なし | NA |
| 内部 | テキストが2行目に入ると、テキストはマーカーの下に折り返されます。また、リストの値がoutsideの場合、テキストが開始された場所にインデントされて表示されます。 |
| 外部 | テキストが2行目に入る場合、テキストは最初の行の先頭（箇条書きの右側）に揃えられます。 |
例
次のコードを実行して、list-style-positionプロパティを実装してみてください
<html> <head> </head> <body> <ul style = "list-style-type:circle; list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ul> <ul style = "list-style-type:square;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ul> <ol style = "list-style-type:decimal;list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ol> <ol style = "list-style-type:lower-alpha;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ol> </body> </html>
-
CSSを使用してテキストを含むコメントボックスを作成する方法
コメントボックスは、clip-pathプロパティを使用して作成できます 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector { clip-path: /*value*/ } 例 次の例は、CSSを使用してコメントボックスを作成する方法を示しています。 <!DOCTYPE html> <html> <head> <style> .cb {
-
::markerCSSSelectorを使用してリストの箇条書きの色を変更する
構文 CSS::マーカーセレクターの構文は次のとおりです- Selector::marker { attribute: /*value*/; } 例 次の例は、CSS::マーカーセレクターを示しています。 <!DOCTYPE html> <html> <head> <style> ul { list-