Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8686

HTML テーブルの空セルに斜線を引く方法

$
0
0

テーブルの空セルに斜線を引く方法を紹介します。

まずはテーブルを作成します。

index.html
<table><tr><th></th><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>2</td><td></td><td></td><td></td></tr><tr><td>3</td><td></td><td></td><td></td></tr></table>
style.css
/* table */table{border-collapse:collapse;margin:20px;}tableth,tabletd{width:50px;height:50px;text-align:center;border:1pxsolidblack;}

スクリーンショット 2019-12-23 16.03.22.png
このようなテーブルが作成されます。
それでは、この空のセルに斜線を書いてみましょう。

右上がりの斜線

右上がりの斜線の書き方です。
斜線を入れたいセルにクラスを追加してください

index.html
<tr><thclass="right_up_border"></th><!-- 斜線を入れたいセルにクラスを追加する --><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr>

そしたらCSSを書いていきます。

style.css
/* 右上がりの斜線 */.right_up_border{background-image:linear-gradient(-45deg,/*角度*/transparent49%,black49%,/*斜線の色*/black51%,/*斜線の色*/transparent51%,transparent);}

スクリーンショット 2019-12-23 16.05.29.png
これで斜線を引くことができました!!
簡単です!

右下がりの斜線

次は右下がりの斜線です。これもやり方は同じです

index.html
<tr><thclass="right_up_border"></th><!-- 斜線を入れたいセルにクラスを追加する --><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr>
style.css
/* 右上がりの斜線 */.right_up_border{background-image:linear-gradient(45deg,/*角度*/transparent49%,black49%,/*斜線の色*/black51%,/*斜線の色*/transparent51%,transparent);}

スクリーンショット 2019-12-23 16.15.45.png
できました!!
簡単ですね!

角度の求め方はこちらを参照してください。

底辺と高さから角度と斜辺を計算

まとめ

こんな感じでテーブルの空セルに斜線を引くことができました。
でも多分他にもやり方はあると思うので、アドバイス有りましたらよろしくお願いします。

参考リンク

CSSで斜線を引く方法
底辺と高さから角度と斜辺を計算


Viewing all articles
Browse latest Browse all 8686

Latest Images

Trending Articles