icon
icon

HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方を現役デザイナーが解説【初心者向け】

初心者向けにHTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方について解説しています。箇条書きにはliタグとulタグ(順番なし)、olタグ(順番あり)を使用します。それぞれの箇条書きの種類と書き方、活用例について見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

HTML+CSSでul、ol、liタグを使った箇条書きの装飾の仕方について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ul、ol、liタグを使った箇条書きの装飾の仕方について詳しく説明していくね!

大石ゆかり

お願いします!

 

ul、ol、liタグを使った箇条書き

HTMLで箇条書きを行うには ul、ol、liタグを使用します。

 

ulタグ

ulタグは順番を定めない箇条書きの場合に使用します。ulは「unordered list」の略です。箇条書きの要素にはliタグを使用します。

<ul>
  <li>まぐろ</li>
  <li>はまち</li>
  <li>あなご</li>
</ul>

実行結果は以下のようになります。

 

olタグ

olタグは順番がある箇条書きの場合に使用します。olは「ordered list」の略です。こちらも箇条書きの要素にはliタグを使用します。

<ol>
  <li>たまご</li>
  <li>いくら</li>
  <li>サラダ</li>
</ol>

実行結果は以下のようになります。

ul 、 ol について、詳しくは以下も参考にしてください。

<ul>:順序なしリスト

<ol>:順序付きリスト

 

ul、ol、liタグが必要な理由

ulやolは箇条書き(・)や番号振りでもいいのではと考える人もいるでしょう。ではなぜul、ol、liタグを利用しているのでしょうか。それはサイト構造をGoogleのクローラーに正しく伝え、サイト評価を上げSEO効果をあげるためです。

ul、ol、liタグを使うことで、それらを1つのまとまりとして評価することができますので、メニューやサービス作成時に使うと、クローラーが正しく理解することができます。

 

[PR] Webデザインで副業する方法とは

ul、olを好みの画像に置き換える方法

ul、olのマーカーを好みの画像に置き換えるには line-style プロパティを使用します。

ul {
  list-style: url(icon.png);
}

urlには画像ファイル名を指定します。line-style について、詳しくは以下も参考にしてください。

MDN line-style

 

CSSで装飾を変えてみよう

今回のサンプルプログラムでは、 line-style とCSSを組合せて箇条書きの見た目を設定しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    ul {
      margin-left: 32px;
      padding: 16px 16px 16px 64px;
      list-style-image: url(icon.png);
      background-color: #669933;
      border-style: solid;
      border-width: 2px;
      border-color: #336600;
    }

    li {
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <ul>
    <li>まぐろ</li>
    <li>はまち</li>
    <li>あなご</li>
  </ul>
</body>
</html>

実行結果は以下のようになります。背景画像や枠線などを組み合わせることで多彩な表現が可能です。いろいろと試してみましょう。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。