プログラミング

CSSでリストと影をデザイン

最終更新： 22/03/2025
1 分の読み

CSS（Cascading Style Sheets）は、ウェブページのデザインをカスタマイズするための非常に強力なツールです。ここでは、CSSを使用して「リストのスタイルの変更」「影の追加」「図形の描画」などの基本的な技術を網羅的に説明します。

1. CSSでのリストのスタイリング

リストはウェブページに情報を整理して表示するために非常に重要です。リストには、順序付きリスト（

関連記事
    ）や順序なしリスト（

      ）、定義リスト（

      ）などがあります。これらのリストをCSSでスタイリングする方法を説明します。

      1.1 順序なしリスト（

        ）のスタイル変更

      順序なしリストは、アイテムに番号がないリストです。デフォルトでは、リストアイテムの前に丸い点が表示されますが、CSSを使ってこれを変更できます。

      css
      ul {
  list-style-type: square; /* アイテムの前に四角いマーカーを表示 */
  padding-left: 20px; /* 左側のインデントを追加 */
}

ul li {
  color: #4A90E2; /* リストアイテムの文字色を青に */
}

      1.2 順序付きリスト（

        ）のスタイル変更

      順序付きリストは、番号付きのリストです。番号のスタイルやリストの間隔をCSSで変更できます。

      css
      ol {
  list-style-type: decimal; /* 番号付きリスト */
  margin-left: 20px; /* 左側のマージンを調整 */
}

ol li {
  font-weight: bold; /* 各アイテムを太字に */
}

      1.3 リストアイテムのカスタムマーカー

      デフォルトのマーカーをカスタム画像に変更することも可能です。

      css
      ul {
  list-style-image: url('custom_marker.png'); /* カスタム画像をマーカーとして使用 */
}

      2. CSSでの影の追加

      CSSでは、テキストやボックスに影を追加することができます。これにより、デザインに立体感を加え、視覚的に引き立たせることができます。

      2.1 テキストの影（text-shadow）

      text-shadowプロパティを使うことで、テキストに影をつけることができます。影の色、距離、ぼかし具合を調整することができます。

      css
      h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 2px右、2px下に影をつけ、ぼかしを4pxに */
  color: #333; /* テキストの色 */
}

      • 2px 2px は影のオフセット（右方向、下方向）。

      • 4px は影のぼかしの強さ。

      • rgba(0, 0, 0, 0.5) は影の色（黒色、透明度50%）。

      2.2 ボックスの影（box-shadow）

      box-shadowプロパティを使うことで、ボックス（例えば、divやbuttonなど）に影をつけることができます。

      css
      div {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* 10px右、10px下に影をつけ、ぼかしを15pxに */
  padding: 20px; /* 内側の余白 */
  background-color: #fff; /* 背景色 */
}

      • 10px 10px は影のオフセット。

      • 15px はぼかしの強さ。

      • rgba(0, 0, 0, 0.3) は影の色。

      2.3 影の内側（inset）

      box-shadowにinsetキーワードを使用すると、影がボックスの内側に表示されます。

      css
      div {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5); /* 内側に影を追加 */
  background-color: #f5f5f5;
}

      3. CSSでの図形の描画

      CSSでは、特定のプロパティを使用して、図形を描くことができます。基本的な図形には、四角形、円、三角形があります。

      3.1 四角形

      四角形は、divタグを使って描画できます。幅、高さ、背景色を設定することで、四角形を作成できます。

      css
      div {
  width: 100px;
  height: 100px;
  background-color: #3498db;
}

      3.2 円

      円を描くためには、border-radiusプロパティを使って、四角形の角を丸くします。完全な円にするためには、幅と高さを同じに設定します。

      css
      div {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%; /* 円形にする */
}

      3.3 三角形

      CSSで三角形を作るには、borderを使って透明なボーダーを設定し、特定の方向に色をつけることで実現します。

      css
      div {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2ecc71;
}

      • border-left と border-right を透明に設定し、border-bottom を指定することで、三角形を作成します。

      結論

      CSSは、リストのスタイリング、影の追加、図形の描画など、ウェブデザインを豊かにするための強力なツールです。これらのテクニックを駆使することで、視覚的に魅力的なページを作成でき、ユーザーに対してより良い体験を提供することができます。

最終更新： 22/03/2025
1 分の読み
Back to top button