空のセルに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」なら右上がりの斜線になります。
 
	
	
	
		解説記事本文に戻る