CSSリストを最大限に活用する方法は?



この記事では、CSSリストを紹介し、その過程でCSSリストのスタイル設定がデモンストレーションでどのように機能するかを理解するのに役立ちます。

CSSリストは、番号付きまたは箇条書きのセットに到達するのに非常に役立ちます。この記事では、のタイプ、位置、スタイルを制御する方法を紹介します CSSを使用します。以下のポインタについては、ここで説明します。

それでは始めましょう、





CSSリスト

CSSプロパティ

リストを制御するために使用できる5つの異なるCSSプロパティがあります。

  • リストスタイルタイプ:マーカーの形状や外観を制御できます。
  • List-style-position:2行目に折り返すために長いポイントが必要であるか、最初の行に揃えるか、マーカーで開始する必要があることを指定します。
  • List-style-image:箇条書きや番号付きのポイントではなく、マーカーの画像を追加するか、より魅力的にする必要があることを指定します。
  • リストスタイル:前述のプロパティの省略形を示します。
  • マーカーオフセット:マーカーとリストに入力されたテキストとの間の距離を指定します。

ここで一般的に使用されるリストは、list-style-typeとlist-style-positionです。以下に説明します



CSSリストに関するこの記事に進む

list-style-typeプロパティ

list-style-typeプロパティでは、順序付けされていないリストケースの箇条書きまたはマーカーの形状とスタイルを制御できます。順序付きリストの場合は、番号付け文字です。

順序付けられていないリストを表す以下の表:



説明
無し NA
ディスク 円で埋められます(デフォルトは1つ)
サークル 空の円です。
平方 四角に塗りつぶされています。

順序付きリストを表す以下の表:

説明
10進数 数字です1,4,3
10進数の先行ゼロ 実際の数の前に001、04、03
下位アルファ 小文字の英数字です。あいうえお
アッパーアルファ 大文字の英数字です。あいうえお
ローワーローマン 小文字のローマ数字です。i、ii、iii、iv、v
アッパーローマン 大文字のローマ数字です。I、II、III、IV、V
下ギリシャ語 マーカーはギリシャ語でアルファ、ガンマ
低ラテン語 マーカーは低ラテン語ですあいうえお
アッパーラテン マーカーは上ラテン語ですあいうえお

CSSリストに関するこの記事に進む

CSSリスト:サンプルプログラム

 
  • Java
  • Python
  • Angular
  • Java
  • Python
  • Angular
  1. Java
  2. Python
  3. Angular
  1. Java
  2. Python
  3. Angular
  1. Java
  2. Python
  3. Angular

出力

出力-CSSリスト-Edureka

CSSリストに関するこの記事に進む

list-style-positionプロパティ

Inlist-style-positionプロパティのマーカー値

list-style-positionプロパティでは、マーカーが箇条書きを含むボックスの内側または外側に表示される必要があることを示しています。これは、次の2つの値のいずれかになります。

説明
無し NA
内部 この場合、テキストが2行目に入ると、テキストはマーカーの下に折り返されます。また、リストの外側に値がある場合にテキストが開始された場所も表示されます。
外側 この場合、テキストが2行目に入ると、テキストは1行目の先頭に揃えられます。

例:

 
  • 数学
  • 社会科学
  • 物理
  • 数学
  • 社会科学
  • 物理
  1. 数学
  2. 社会科学
  3. 物理
  1. 数学
  2. 社会科学
  3. 物理

出力

これで、CSSリストに関するこの記事は終わりです。

フィボナッチ反復C ++

私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。

質問がありますか?記事のコメントセクションにその旨を記載してください。折り返しご連絡いたします。