【html/CSS】tableのマスに斜線を引く方法

	セル	セル
ヘッダー	セル
ヘッダー		セル

「tableのなにもないマスに斜線を引きたいけどどうやるの？」

「斜線引いてみたけどギザギザになっちゃう！」

tableのマスに斜線を引く方法を解説します。

【結論】background:linear-gradient

下記CSSをコピペして使いましょう。

	セル	セル
ヘッダー	セル	セル
ヘッダー	セル	セル

<style>
.example{
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #999 50%, #999 calc(50% + 0.5px), transparent calc(50% + 1px));
}
</style>
<table border="1">
    <tr>
        <th class="example"></th>
        <th>セル</th>
        <th>セル</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

background:linear-gradientは背景色をグラデーションにするCSSです。

これを使うと頂点から頂点へのグラデーションを指定できます。

左下から右上へ向かってグラデーションし、半分の地点だけに色をつけることで斜線を表現しています。

詳しくは下記をご覧ください。

斜線の色を変えたい場合は、2か所ある#999を任意のカラーコードに変えてください。

透明色と黒色の境目をまったく同じ地点にするとジャギーが発生してギザギザの斜線になってしまいます。

そこでほんの少しだけ境目の距離をあけてグラデーションさせることでジャギーを抑えることができます。

距離をあけるほどジャギーを抑えることはできますが線が太くなってしまいます。

必要に応じて数値を調整してみてください。

一マス目の指定方法

一マス目（左上）のマスに必ず斜線をいれたい場合、いちいちクラスを指定しなくても下記のように指定できます。

	セル	セル
ヘッダー	セル
ヘッダー		セル

<style>
tr:first-child>*:first-child{
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #999 50%, #999 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}
</style>
<table border="1">
    <tr>
        <th></th>
        <th>セル</th>
        <th>セル</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td></td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td></td>
        <td>セル</td>
    </tr>
</table>

「tr:first-child」は一番目のtr、つまり一行目を指しています。

「tr>*」はtrの子要素、つまりtdとthを指しています。

「tr>*:first-child」はtr内で最初の子要素、つまり一番左のマスを指しています。

よって「tr:first-child>*:first-child」で一行目の一番左のマスを指すことができます。

空白マスの指定方法

空白マスに必ず斜線をいれたい場合、いちいちクラスを指定しなくても下記のように指定できます。

	セル	セル
ヘッダー	セル
ヘッダー		セル

<style>
tr>*:empty{
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #999 50%, #999 calc(50% + 0.5px), transparent calc(50% + 1px)) !important;
}
</style>
<table border="1">
    <tr>
        <th></th>
        <th>セル</th>
        <th>セル</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td></td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td></td>
        <td>セル</td>
    </tr>
</table>

「:empty」は子要素がない空白の要素である場合に機能する疑似要素です。

ここでいう空白の要素とは「<td></td>」のように何も入っていない要素であり、空白スペースや「&nbsp;」が入っている場合は「:empty」は効きません。

【まとめ】tableのマスに斜線を引く方法

一マス目の指定方法

tr:first-child>*:first-child

空白マスの指定方法

tr>*:empty

以上、tableのマスに斜線を引く方法でした。