HTML の中央の箇条書き
箇条書きリストは、HTML で関連項目のリストを作成するために使用され、関連項目のアウトラインとメニューまたはリストを作成するために使用できます。 各リスト項目は <li> タグで始まります。
リスト項目は、<ul> (順序なし/箇条書きリスト) または <ol> (順序付き/番号付きリスト) タグで保持されます。 この記事では、さまざまな箇条書きのスタイルと、HTML で箇条書きを中央揃えにする方法について説明します。
箇条書きの HTML スタイル
HTML では、<ul> (順序なしリスト) タグを使用して箇条書きを作成し、スタイルを設定するために、list-style-type 属性を使用します。 list-style-type 属性は、リストのマーカーのタイプを指定し、次の値を持つことができます。
ディスク- ソリッドディスク (デフォルト)circle- 中空の円square- 塗りつぶされた四角none- マーカーなし (ネストされたリストの作成に便利)
ディスク – ソリッド ディスク (デフォルト)
箇条書きリストを作成するには、<ul> 要素を作成し、list-style-type 属性を目的の値に設定します。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Circle – 中空の円
次のコードで、中空の円の箇条書きを作成できます。
コード：
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
正方形 – 塗りつぶされた正方形
次のコードで四角い箇条書きを作成できます。
<p>The list of developed countries :</p>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
なし – マーカーなし
なしの箇条書きリストには次のコードがあります。
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
HTML の中央の箇条書き
コード例:
<!DOCTYPE html>
<head>
<style>
.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
</style>
</head>
<body>
<h1>Center Bullet Points in HTML</h1>
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<br>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</div>
</body>
まとめ
箇条書きは、CSS と JavaScript を使用して HTML の中央に配置されます。 箇条書きのリストは、タグを使用して HTML で作成できます。
HTML では、箇条書きを作成する方法がいくつかありますが、最も一般的な方法は、順序付けられていないリスト要素を使用することです。 この要素は、各リスト アイテムの箇条書きを作成します。順序付きリスト要素を使用して、番号付きの箇条書きを作成することもできます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn