空のセルにCSSで斜線を引く
表サンプル1(斜線は45度固定)
|
月 |
火 |
水 |
木 |
金 |
土 |
日 |
今週 |
○ |
|
○ |
|
○ |
○ |
○ |
来週 |
○ |
○ |
○ |
○ |
○ |
|
|
表サンプル2(斜線の角度は自動調整)
| A | B | C | D | E | 勝 | 負 |
A | | ○ | ○ | ○ | ○ | 4 | 0 |
B | × | | ○ | × | × | 1 | 3 |
C | × | × | | ○ | × | 1 | 3 |
D | × | ○ | × | | ○ | 2 | 2 |
E | × | ○ | ○ | × | | 2 | 2 |
※注意
- Internet Explorerの場合は、IE10以上でのみ表示可能。対応ブラウザに関する詳細やCSSソース記述方法の詳細は、解説記事の本文(特に3ページ目)をご参照下さい。古いブラウザでも、単に「斜線が描かれないだけ」なので特に表示が崩れるようなトラブルはありません。空欄が空欄のままになるだけです。
- 表サンプル1のCSSでは、角度の値に「45deg」・「-45deg」を指定しているため、うまく斜線が引けるのはセルが正方形の場合のみです。(正方形でなくても全セルのサイズが同じであれば、linear-gradientに指定した角度の値を調節すればうまく見せられます。)
- 表サンプル2のCSSでは、角度にキーワードを使って「to top right」と指定しているため、セルが正方形ではなくても角度は適切に自動調整されます。こちらの書き方の方がお勧めです。「to top left」なら右上がりの斜線になります。
解説記事本文に戻る