CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでリストに青い左ボーダーを追加する方法

CSSを使えば、リスト（ul要素）の左側に青いボーダーを簡単に追加できます。鍵となるのは border-left プロパティです。このプロパティを使うと、ボーダーの「幅」「スタイル」「色」を一行でまとめて指定できます。

border-leftプロパティの基本

border-left プロパティは、次の3つの値をスペース区切りで組み合わせて指定します。

  • 幅：ボーダーの太さ（例：3px）
  • スタイル：solid（実線）、dashed（破線）、dotted（点線）など
  • 色：blue のようなキーワード、または #0000ff のようなカラーコード

サンプルコード

以下のコードを実行すると、リストの左側に青いボーダーが表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  border-left: 3px solid blue;
  background-color: #f1f1f1;
  padding-left: 20px;
}
</style>
</head>
<body>
<p>国名一覧</p>
<ul>
  <li>インド</li>
  <li>アメリカ</li>
  <li>オーストラリア</li>
</ul>
</body>
</html>

コードの解説

  • border-left: 3px solid blue; … リスト全体の左側に3pxの青い実線を表示します。
  • background-color: #f1f1f1; … 背景を薄いグレーにして、青いボーダーを視覚的に際立たせます。
  • padding-left: 20px; … ボーダーとリスト項目の間に余白を設け、読みやすさを向上させます。

表示結果

上記のコードをブラウザで開くと、リストの左端に青い縦線が引かれ、通常の箇条書きよりも強調されたデザインになります。色や太さの値を変更すれば、サイトのテーマに合わせたカスタマイズも自由自在です。

  1. CSSで基本のリストをリストグループに変換する方法

    CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>     

  2. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu