HTMLとCSSで斜線を描画する方法 ～テーブルのセルにカスタムデザインを適用～

Posted on by

HTMLとCSSを使用して、テーブルのセルに斜線を描画する方法をご紹介します。
本記事では、具体例として、テーブルのセルに右上から左下、
または左下から右上へ伸びる斜線を描画する方法を解説します。

目的と実現したいデザイン

以下のようなテーブルを作成することを目指します。

◯／（右上から左下の斜線）

または

◯＼（左下から右上の斜線）

ここで、セルの中のテキストは通常のもの（例：◯）とし、
特定のセルにカスタマイズした斜線を描画します。

必要なHTMLとCSSの基本構造

テーブルを構築する基本的なHTMLとCSS構造は次の通りです。

HTML構造

<table>
    <tr>
        <td class="circle">◯</td>
        <td class="slash"></td>
    </tr>
</table>

CSS基本構造

table {
    border-collapse: collapse; /* セル間の隙間をなくす */
}

td {
    width: 50px; /* セルの幅 */
    height: 50px; /* セルの高さ */
    border: 1px solid #000; /* セルの枠線 */
    position: relative; /* 擬似要素を使用するために必要 */
    text-align: center;
    vertical-align: middle;
}

td.circle {
    font-size: 20px; /* ◯の大きさを指定 */
}

ここまでで、基本的なテーブル構造が完成します。

右上から左下への斜線を描画する方法

右上から左下への斜線を描画するには、CSSのlinear-gradientプロパティを使用します。

CSS例

td.slash::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, transparent 49%, black 50%, black 51%, transparent 52%);
}

::before: セルに擬似要素を使用して斜線を描画。

linear-gradient(to bottom left, ...): 背景を斜線として描画し、右上から左下へ向かう。

色の指定: 黒い線の幅をblack 50%で指定。

実行結果

◯／（右上から左下の斜線）

左下から右上への斜線を描画する方法

左下から右上への斜線を描画する場合、linear-gradientの方向を変更します。

CSS例

td.slash::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, transparent 49%, black 50%, black 51%, transparent 52%);
}

to top right: グラデーションの方向を指定し、左下から右上へ向かう。

他の設定は右上から左下の場合と同様です。

実行結果

◯＼（左下から右上の斜線）

5. コード全体のまとめ

以下が全体のHTMLとCSSコードです：

HTMLコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斜線の描画</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            position: relative;
            text-align: center;
            vertical-align: middle;
        }

        td.slash::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top right, transparent 49%, black 50%, black 51%, transparent 52%);
        }

        td.circle {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="circle">◯</td>
            <td class="slash"></td>
        </tr>
    </table>
</body>
</html>

応用例とカスタマイズ

応用例1: 線の色を変える

線の色を変更するには、blackを別の色に変更します。

background: linear-gradient(to top right, transparent 49%, red 50%, red 51%, transparent 52%);

応用例2: セルのサイズを変更

tdのwidthとheightプロパティを変更することで、セルのサイズを調整できます。

応用例3: テキストと斜線を重ねる

擬似要素をz-indexで調整することで、テキストと斜線を重ねて表示可能です。

まとめ

本記事では、テーブルセルに斜線を描画する方法を解説しました。
linear-gradientを活用することで、CSSのみで簡単にカスタムデザインを実現できます。
この手法は、独自のテーブルデザインや背景装飾に役立ちます。ぜひ試してみてください！