HTML手打ち、ul/ol/liタグでリスト作成
こんばんは！IT業界で働くアライグマです！
Webページを作成する際に、リストを適切に活用すると情報の整理がしやすくなり、可読性が向上します。リストには、順序なしリスト（ulタグ）と順序付きリスト（olタグ）があり、それぞれ適切な場面で使用することで、ページの構造を明確にできます。
本記事では、HTMLを手打ちで記述しながら、ul・ol・liタグを用いたリストの作成方法について詳しく解説します。SEOの観点からのメリットや、リストを使うべき場面についても紹介していきます。
HTMLを手打ちで記述するメリット
コードの理解が深まる
HTMLを手動で書くことで、タグの役割や正しい使い方を身につけることができます。特にリスト構造は、ナビゲーションメニューやコンテンツの整理に頻繁に利用されるため、理解しておくことが重要です。
SEOに有利
検索エンジンは、リストタグを使って構造化された情報を解析しやすくなります。適切なマークアップを行うことで、検索エンジンの評価が向上し、ユーザーにも分かりやすいコンテンツになります。リストを活用することで、検索結果のスニペットに反映されやすくなり、クリック率向上にもつながります。
コードがクリーンになる
リストを適切に使うことで、不要なdivタグや改行タグを減らし、簡潔なHTMLを記述できます。可読性が向上することで、後のメンテナンスもしやすくなります。特に、大規模なWebサイトでは、構造化されたリストを用いることで、編集作業の負担を軽減できます。
ul・ol・liタグの基本
順序なしリスト（ulタグ）
順序なしリスト（ulタグ）は、箇条書きのように順番が関係ない項目をリスト化するときに使用します。
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
このように記述すると、ブラウザでは各項目の前に黒い点（●）が表示されます。
順序付きリスト（olタグ）
順序付きリスト（olタグ）は、手順やランキングなど、順番に意味がある情報を整理する際に使用します。
<ol>
<li>小麦粉を用意する</li>
<li>水と混ぜる</li>
<li>こねて形を作る</li>
<li>オーブンで焼く</li>
</ol>
この場合、各項目の前には1, 2, 3…という番号が自動的に振られます。
ネスト（入れ子）リスト
リストの中にリストを作成することも可能です。これは、サブカテゴリや詳細な分類を示すのに便利です。
<ul>
<li>フルーツ
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜
<ul>
<li>にんじん</li>
<li>ほうれん草</li>
<li>じゃがいも</li>
</ul>
</li>
</ul>
このように書くことで、リストの階層構造を視覚的に整理できます。
リストを使用すべき場面
ナビゲーションメニュー
Webサイトのナビゲーションメニューは、多くの場合、ulタグを使ってリスト化されます。
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
CSSを適用することで、横並びのメニューなどにカスタマイズできます。
手順の説明
手順を分かりやすく説明する際には、olタグを使って順番を示すことが有効です。
<ol>
<li>HTMLファイルを作成する</li>
<li>リストタグを記述する</li>
<li>ブラウザで確認する</li>
<li>CSSでデザインを整える</li>
</ol>
このように手順を整理すると、読み手が理解しやすくなります。
特徴の列挙
商品やサービスの特徴をリスト化することで、ユーザーが情報を素早く把握しやすくなります。
<ul>
<li>軽量で高速</li>
<li>カスタマイズが簡単</li>
<li>SEOに適している</li>
</ul>
リストの応用テクニック
カスタムスタイルを適用する
CSSを使うことで、リストのデザインを自由にカスタマイズできます。
ul {
list-style-type: square;
}
この設定を適用すると、リストの黒い点が四角（■）に変わります。
アイコンを活用する
フォントアイコンや画像をリストの先頭に配置すると、視覚的に魅力的なデザインになります。
<ul>
<li><img src="check.png" alt="チェック"> 簡単な操作</li>
<li><img src="check.png" alt="チェック"> 直感的なUI</li>
</ul>
まとめ
リストタグ（ul・ol・li）を適切に使うことで、Webページの可読性が向上し、SEO対策としても有効です。順序の有無や情報の整理方法を意識しながら、適切なタグを選択することが大切です。
HTMLを手打ちで記述することで、タグの役割を深く理解し、不要なコードを減らすことができます。適切なマークアップを意識しながら、ぜひ実践してみてください。