HTML リストのスタイル-htmlチュートリアル-php.cn

HTML リストのスタイル

PHPz

リリース： 2024-09-04 16:16:13

オリジナル

786 人が閲覧しました

リストは、データをフォーマットされた方法で配置するための一般的な要件です。たとえば、ホテルのピザメニューのコンテンツを表示する必要がある Web ページを作成した場合、おそらく HTML リストスタイルになります。明確かつ個別に表示されます。
他のケースとしては、クラスの成績優秀者に含まれる生徒の一連のランクを設定することが考えられます。このコンテキストでは、要件は、ランク 1 の学生を最上位に配置し、その他の学生をランキングの昇順でその下に配置することです。そのためには、これを並べ替えられたリストにフォーマットする必要があります。
もう 1 つのタイプは、JavaScript と HTML を一緒に使用して作成できるカスタムリストです。このリストでは、オブジェクト内のダイナミクスも設定でき、リストの外観をカスタマイズすることもできます。

HTML のさまざまなリストスタイル

以下では、さまざまな HTML リストスタイルについて説明します。

1) 順序なしリスト

ここでは、コンテンツの表示順序は気にする必要はありません。必要なのは、HTML ページで適切にフォーマットされた明確な方法でユーザーの目の前に配置されるように、項目を適切に配置することだけです。

HTML 言語にはこれらのリストを処理する 2 つのタグがあり、これらのタグだけを使用してナビゲーションバーと垂直サイドバーを作成できる可能性があります。

: これはリスト項目、つまり順序なしリスト、つまり
- の中に表示されます。タグ。これらのマークアップでマークされた項目には、先頭にいくつかの黒丸または丸が自動的に表示されます。これらは基本的な HTML 機能です。

次に、

スニペットの例 –

コード:

<html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>
</p>
<p><strong>出力:</strong></p>
<p><img  src="https://img.php.cn/upload/article/000/000/000/172543777526631.png" alt="HTML リストのスタイル" ></p>
<h4>2) 順序付きリスト</h4>
<p>次に、クラス内でのランクに基づいて生徒を順序付けする場合を見ていきます。これは、<ol> を使用して並べ替えて表示されます。 HTML のタグには複数の <li> が含まれます。タグにはリスト項目が含まれます。</p>
<p><ol>: このタグは順序付きリストを設定するために使用され、すべての要素がその内側の <li> 内に配置されます。タグ。 </p>
<li>;タグについては上で説明しました。
<p>この場合、例も見てみましょう。これも上記と同じように保存する必要があります。</p>
<p><strong>コード:</strong></p>
<pre class="brush:php;toolbar:false"><html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

ログイン後にコピー

出力/HTML ページ

HTML リストのスタイル

ここで、いくつかの CSS プロパティを HTML ページに追加するだけでこれらのリストをカスタマイズしたり適切にフォーマットしたりできる、これらのバリエーションをいくつか見てみましょう。これにより、ページの見栄えが良くなります。

順序なしリストでは、次のプロパティを指定できます –
List-style-type – ディスク、円、正方形、またはなしのいずれかになります。したがって、ここで何も選択しないと、順序なしリスト項目に表示された円は表示されなくなります。そうしましょう。

例 –

コード:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>

ログイン後にコピー

出力/HTML ページ –

HTML リストのスタイル

つまり、丸の箇条書きはもう存在しません。上記のオプションを使用してカスタマイズできます。

同様に、順序リストの値を数字で表示するか、ローマ字またはアルファベットで表示するかを選択する規定があります。

タイプ: 「1」、「A」、「a」、「I」、「i.」

同じコードの例を見てみましょう –

コード:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "i">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

ログイン後にコピー

出力/HTML ページ –

HTML リストのスタイル

同様に、説明を配置する必要がある項目を定義できる説明リストもあります。いくつかのキーワードに対していくつかの定義を配置する必要があるページを作成しているとします。その後、説明リストを選択できます。

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<dl>
<dt style="color:red"> Docker </dt>
<dd> -: this is used to make environment portable application containers </dd>
<br>
<dt style="color:green"> Kubernetes </dt>
<dd> -: this is an orchestrator for those containers make by docker </dd>
</dl>
</body>
</html>

ログイン後にコピー

Output/HTML page –

HTML リストのスタイル

You can also define the start property in the ordered lists in

Code:

<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "1" start="10">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</>
</body>
</html>

ログイン後にコピー

Output:

HTML リストのスタイル

Conclusion

So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

以上がHTML リストのスタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。