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

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

CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    ul li {
        border: 1px solid rgb(0, 0, 0);
        background-color: #f6f6f6;
        padding: 12px;
        font-size: 18px;
    }
</style>
</head>
<body>
<h1>List Group Example</h1>
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Leopard</li>
<li>Cheetah</li>
<li>Jaguar</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、次のような出力が生成されます。

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


ポイント解説

list-style-type: none;
デフォルトで表示される箇条書きのマーカー（・）を非表示にします。これにより、リスト項目を独立したブロックとして扱えるようになります。

padding と margin のリセット
ul要素が初期状態で持つ余白を0にすることで、レイアウトのズレを防ぎ、項目同士をきれいに隣接させることができます。

border による区切り線
各li要素に1pxの黒い枠線を付けることで、項目ごとの境界が明確になり、リストグループらしい見た目になります。

background-color と padding で読みやすく
薄いグレーの背景色（#f6f6f6）と12pxの内側余白を組み合わせることで、テキストが窮屈にならず、洗練されたデザインに仕上がります。

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

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

  2. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード