HTML 順序なしリスト実験

はじめに

HTML の ul タグは、項目が通常箇条書きリストとしてレンダリングされる順序なしリストを作成するために使用されます。この実験では、HTML を使用して順序なしリストを作成する方法を案内し、ul タグの構文と使用例を示します。

注：「index.html」でコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70875{{"HTML の順序なしリスト"}} html/head_elems -.-> lab-70875{{"HTML の順序なしリスト"}} html/lists_desc -.-> lab-70875{{"HTML の順序なしリスト"}} html/layout -.-> lab-70875{{"HTML の順序なしリスト"}} html/doc_flow -.-> lab-70875{{"HTML の順序なしリスト"}} html/inter_elems -.-> lab-70875{{"HTML の順序なしリスト"}} html/custom_attr -.-> lab-70875{{"HTML の順序なしリスト"}} end

HTML ドキュメント構造を設定する

新しいプロジェクトフォルダに index.html ファイルを作成し、コードエディタでそのファイルを開きます。

html、head、および body タグを追加することで、HTML ドキュメントの基本構造を作成します。head タグの中に、title タグを追加して、ドキュメントのタイトルを「HTML 順序なしリスト実験」に設定します。

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- Add content here -->
  </body>
</html>

`ul` タグを使って順序なしリストを作成する

body タグの中で、ul タグを使って順序なしリストを作成します。リスト項目を追加するには、ul タグの中で li タグを使います。

<ul>
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

`ul` タグに属性を追加する

ul タグには特定の属性はありませんが、グローバル属性とイベント属性をサポートしています。ここでは、ul タグに class 属性を追加する例を示します。

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

`ul` タグに CSS スタイルを適用する

ul タグにスタイルを付けるには、CSS を使用できます。次の例では、リストスタイルタイプを「正方形」に設定し、マージンを追加しています。

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

順序なしリストのネスト

<li> タグの中に別の <ul> タグを配置することで、順序なしリストの中に別の順序なしリストをネストすることができます。以下は、ネストされた順序なしリストの例です。

<ul>
  <li>This is the first item in the parent list</li>
  <li>
    This is the second item in the parent list
    <ul>
      <li>This is a nested item</li>
      <li>This is another nested item</li>
    </ul>
  </li>
  <li>This is the third item in the parent list</li>
</ul>

まとめ

この実験では、HTML の ul タグを使って順序なしリストを作成する方法を学びました。また、ul タグに属性と CSS スタイルを追加する方法も学びました。ul タグは項目の箇条書きリストを作成するために使用されることを忘れないでください。ul タグには開始タグと終了タグが必要であり、リスト項目は ul タグの中で li タグを使って追加する必要があります。<li> タグの中に別の <ul> タグを配置することで、順序なしリストの中に別の順序なしリストをネストすることができます。

HTML の順序なしリスト