LabEx
ログイン登録

CSS 属性を使ったリストのスタイリング

CSSBeginner
オンラインで実践に進む

はじめに

この実験では、学生たちは CSS を使ったリストのスタイリングの技術を探求し、順序付きリスト、無順序付きリスト、および説明リストの既定の外観を変えることに焦点を当てます。参加者は、list-style-type、list-style-image、およびlist-style-positionなどのさまざまな CSS プロパティを通じてリストマーカーをカスタマイズする方法を学び、視覚的に魅力的で独特なリストデザインを作成することができます。

この実験では、学習者を、さまざまなリストタイプを持つ HTML プロジェクトを作成し、その後 CSS 技術を適用してリストスタイルを変更する手順を追って案内します。この実験が終了するまでに、学生たちはリストマーカーのタイプを変更し、既定のマーカーをカスタム画像に置き換え、マーカーの配置を調整し、ショートハンドのlist-styleプロパティを使って効率的にリストをスタイリングする実践的な経験を得ることになります。

HTML プロジェクトをセットアップして基本的なリストを作成する

このステップでは、CSS リストのスタイリングを探求するための基本的な HTML プロジェクトをセットアップし、最初のリストを作成します。まず、簡単なプロジェクト構造とさまざまなタイプのリストを持つ HTML ファイルを作成します。

まず、プロジェクト ディレクトリに移動します。

cd ~/project

CSS リスト スタイリング プロジェクト用の新しいディレクトリを作成します。

mkdir css-list-styling
cd css-list-styling

次に、WebIDE を使って index.html という名前の HTML ファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>My Favorite Programming Languages</h1>

    <h2>Ordered List (Numbered)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Unordered List (Bulleted)</h2>
    <ul>
      <li>Web Development</li>
      <li>Data Science</li>
      <li>Machine Learning</li>
      <li>Mobile Apps</li>
    </ul>

    <h2>Description List</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language for web structure</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets for web design</dd>
    </dl>
  </body>
</html>

この HTML ファイルでは、3 種類のリストが示されています。

  1. 順序付きリスト (<ol>): 自動的に番号付けされます
  2. 無順序付きリスト (<ul>): 既定のバレット ポイントが使用されます
  3. 説明リスト (<dl>): 用語と説明のペアに使用されます

ブラウザで表示した場合の例の出力：

  • 順序付きリストは番号 (1、2、3、4) が表示されます
  • 無順序付きリストはバレット ポイントが表示されます
  • 説明リストは用語と説明が表示されます

list-style-type を適用してリスト マーカーを変更する

このステップでは、CSS の list-style-type プロパティを使ってリストマーカーの外観をカスタマイズする方法を学びます。list-style-type を使うと、既定のバレット ポイントや番号をさまざまな事前定義済みのスタイルに変更できます。

WebIDE で index.html ファイルを開き、<head> 内に <style> セクションを追加して CSS ルールを定義します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Unordered List Styles */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Ordered List Styles */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>List Style Type Examples</h1>

    <h2>Unordered List Styles</h2>
    <ul class="square-list">
      <li>Square Markers</li>
      <li>Web Development</li>
      <li>Design Techniques</li>
    </ul>

    <ul class="circle-list">
      <li>Circle Markers</li>
      <li>Programming</li>
      <li>Software Engineering</li>
    </ul>

    <h2>Ordered List Styles</h2>
    <ol class="decimal-list">
      <li>Decimal Numbers</li>
      <li>Standard Numbering</li>
      <li>Default Style</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Lowercase Letters</li>
      <li>Alphabetical Ordering</li>
      <li>a, b, c Style</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Uppercase Roman Numerals</li>
      <li>Classic Numbering</li>
      <li>I, II, III Style</li>
    </ol>
  </body>
</html>

重要な list-style-type の値：

  • 無順序付きリスト：disc (既定), circle, square
  • 順序付きリスト：decimal, lower-alpha, upper-roman など

ブラウザでの例の出力：

  • 最初の無順序付きリストには四角形のマーカー
  • 2 番目の無順序付きリストには円形のマーカー
  • 最初の順序付きリストには数字
  • 2 番目の順序付きリストには小文字の文字
  • 3 番目の順序付きリストには大文字のローマ数字

list-style-image を使って既定のマーカーを置き換える

このステップでは、list-style-image を使って既定のリストマーカーをカスタム画像に置き換える方法を学びます。まず、リストマーカーとして使用するサンプル アイコンをダウンロードする必要があります。

プロジェクト内に images ディレクトリを作成します。

cd ~/project/css-list-styling
mkdir images

curl を使ってサンプル アイコンをダウンロードします。

curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png

次に、index.html ファイルを更新してカスタム リストマーカー画像を含めます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Adjust icon size if needed */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Custom List Markers with Images</h1>

    <h2>Checklist</h2>
    <ul class="check-list">
      <li>Complete CSS Tutorial</li>
      <li>Practice List Styling</li>
      <li>Create Web Project</li>
    </ul>

    <h2>Favorite Topics</h2>
    <ul class="star-list">
      <li>Web Development</li>
      <li>Design Principles</li>
      <li>User Experience</li>
    </ul>
  </body>
</html>

list-style-image に関するポイント：

  • 画像パスを指定するために url() を使用
  • 既定のリストマーカーをカスタム画像に置き換える
  • 順序付きリストと無順序付きリストの両方で機能
  • CSS のパディングで画像サイズを制御できる

ブラウザでの例の出力：

  • チェック アイコン マーカー付きのチェックリスト
  • 星アイコン マーカー付きのお気に入りのトピックのリスト

マーカーの配置を調整するために list-style-position を調整する

このステップでは、CSS の list-style-position プロパティを調べます。このプロパティは、リストマーカーがリストのコンテンツに対してどのように配置されるかを制御します。このプロパティには 2 つの主な値があります。outside（既定値）と inside です。

異なるリストマーカーの位置を示すように、index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Add some visual separation */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>List Style Position Demonstration</h1>

    <h2>Outside List Markers (Default)</h2>
    <ul class="outside-list">
      <li>Markers positioned outside the content area</li>
      <li>Default CSS behavior</li>
      <li>Markers align to the left of the text</li>
    </ul>

    <h2>Inside List Markers</h2>
    <ul class="inside-list">
      <li>Markers positioned inside the content area</li>
      <li>Markers are part of the list item text</li>
      <li>Content starts immediately after the marker</li>
    </ul>
  </body>
</html>

list-style-position に関するポイント：

  • outside：マーカーはコンテンツ ボックスの外側に配置されます（既定値）
  • inside：マーカーはコンテンツ ボックスの内側に配置されます
  • リスト項目のレイアウトと整列に影響します
  • コンパクトなリストや視覚的に際立ったリストを作成するのに役立ちます

ブラウザでの例の出力：

  • 外側のリスト：マーカーはテキストの左側にあります
  • 内側のリスト：マーカーはテキスト領域内にあります
  • 背景色が違いを視覚的に表しています

省略記法の list-style プロパティを使ってリスト スタイルを組み合わせる

このステップでは、短縮形の list-style プロパティを使って、1 つの宣言で複数のリスト スタイリング属性を組み合わせる方法を学びます。このプロパティを使うと、1 行で list-style-type、list-style-image、list-style-position を設定できます。

短縮形の list-style プロパティを示すように、index.html ファイルを更新します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* タイプと位置を指定した短縮形 */
      .todo-list {
        list-style: square inside;
      }

      /* 画像と位置を指定した短縮形 */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* タイプ、画像、位置を指定した完全な短縮形 */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* 既定値にリセット */
      .default-list {
        list-style: initial;
      }

      /* リスト スタイリングを削除 */
      .no-style-list {
        list-style: none;
      }

      /* 読みやすさのために余白を追加 */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Shorthand List Style Demonstration</h1>

    <h2>Todo List (四角形のマーカー)</h2>
    <ul class="todo-list">
      <li>CSS のリスト スタイリングを学ぶ</li>
      <li>短縮形のプロパティを練習する</li>
      <li>スタイリッシュなリストを作成する</li>
    </ul>

    <h2>Project List (星アイコン)</h2>
    <ul class="project-list">
      <li>Web 開発プロジェクト</li>
      <li>デザイン システム</li>
      <li>インタラクティブ チュートリアル</li>
    </ul>

    <h2>完了したプロジェクト (チェック アイコン)</h2>
    <ol class="complete-list">
      <li>CSS の基本</li>
      <li>応答型デザイン</li>
      <li>高度なスタイリング技術</li>
    </ol>

    <h2>スタイルなしのリスト</h2>
    <ul class="no-style-list">
      <li>リスト マーカーを削除</li>
      <li>スタイルがないクリーンなリスト</li>
      <li>視覚的な指示がない</li>
    </ul>
  </body>
</html>

list-style の短縮形に関するポイント：

  • list-style-type、list-style-image、list-style-position を組み合わせる
  • ほとんどの値については順序は重要ではない
  • none はすべてのリスト スタイリングを削除する
  • initial は既定のブラウザ スタイルにリセットする

短縮形の組み合わせの例：

  • list-style: square inside;
  • list-style: inside url('image.png');
  • list-style: lower-roman inside url('icon.png');

まとめ

この実験では、参加者は、順序付きリスト、無順序付きリスト、説明リストなど、さまざまなリスト型を持つ HTML プロジェクトを作成することで、CSS のリスト スタイリング技術を探求します。この実験では、list-style-type、list-style-image、list-style-position などの CSS プロパティを使ってリストの外観をカスタマイズする方法を学習者に案内します。

この実践演習では、既定のリストマーカーをどのように変更するか、標準的なバレットをカスタム画像に置き換える方法、およびマーカーの配置を調整する方法を示し、CSS 属性を使ってウェブページのデザインを向上させ、リストの視覚的な表示を改善するための実用的なスキルを提供します。

関連 CSS コース
初心者向け CSS

初心者向け CSS

cssweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development