【CSS】2列リストの最後の要素を全幅に表示する方法

CSSを使って、2列に並べたリストの要素数が奇数の場合に、最後の要素を全幅で表示する方法をご紹介します。フレックスボックス（flexbox）を使用して、簡単に実現する方法を見ていきましょう。

HTMLの基本構造
CSSでスタイルを定義
サンプル
コードの解説
まとめ

HTMLの基本構造

まずは、基本的なHTMLの構造を作成します。この例では、ulタグを使ってリストを作成し、その中に複数のliタグを配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2列リスト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="two-column-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>
</body>
</html>

CSSでスタイルを定義

次に、CSSを使ってリストのスタイルを定義します。フレックスボックスを使用してリストを2列に並べ、要素数が奇数の場合に最後の要素を全幅で表示します。

body {
    font-family: Arial, sans-serif;
}

.two-column-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.two-column-list li {
    width: calc(50% - 5px); /* 2列にするための幅計算 */
    margin-bottom: 10px; /* 下のマージン */
    box-sizing: border-box;
}

.two-column-list li:nth-child(odd) {
    margin-right: 10px; /* 奇数要素の右のマージン */
}

/* 奇数要素数の場合に最後の要素を全幅に */
.two-column-list li:nth-child(odd):last-child {
    width: 100%;
    margin-right: 0;
}

サンプル

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

コードの解説

基本設定

ulタグに対してdisplay: flexとflex-wrap: wrapを指定し、子要素が2列に並ぶようにします。また、li要素に対して幅をcalc(50% – 10px)に設定し、マージンを調整します。

奇数要素のマージン

nth-child(odd)セレクタを使って奇数番目の要素に右マージンを追加し、2列目の要素との間にスペースを作ります。

最後の要素の全幅表示

nth-child(odd):last-childセレクタを使って、リストの要素数が奇数の場合に最後の要素の幅を100%に設定します。

まとめ

この方法を使うことで、CSSのみで2列のリストを簡単に作成し、要素数が奇数の場合に最後の要素を全幅で表示することができます。フレックスボックスを使用することで、柔軟かつ効率的にレイアウトを調整できるのが大きな利点です。