テーブルセル内に斜線を引く方法

マトリクス図等で良く見られる、四角い要素の対角線上に線を引いた状態を実現したいと思い。調べてみた。

やっぱ、画像を使うしか無いらしい。ってな訳で、画像を作ってみた。今回はGIMPをインストールして使ってみる事に。Photpshopがあればベストなんだろうけど、多分GIMPでも充分事足りるでしょう。

GIMPをダウンロードし、インストール実施
[ファイル]→[新規]で新規画像を作成
任意の幅及び高さを指定、[OK]押下
- この際に透過GIFで作りたい場合は[高度なオプション]で塗りつぶす色で[透明部分]を選択
選択ツールのカラーパレットで色を指定、[絵筆]ツールオプションを選択
ブラシの種類を選択。今回は1px罫線のテーブルレイアウトに合う罫線を作りたかったので、Circle(01)を選択した
Shiftボタンを押しながら斜線を対角線上に引く(こちらを参照)
ファイルを別名保存し、任意の画像ファイル名(line.gif)でファイルを作成
- この際、画像のエクスポートに関して聞かれるので任意の方式で画像のエクスポートを行い、ファイルとして出力
- 作成したファイルをCSS指定等でセル内に表示

大まかな手順で行くとこんな感じ。

1枚の画像を用意しておいて(例：正方形画像を作成し、対角線上に罫線を引き45度の罫線を付加)、表示セルの内容(縦・横)に応じて画像幅(width)／高さ(height)を調節し、1枚でやりくりする方法も検討してみたけれど、表示はされるが見え方が汚なくなる(設定によって線が細くor太く見えてしまう、ギザギザした線になってしまう等)のでちょっと微妙な感じ。

パターン数が多く無いのであれば、セル個別に(綺麗に見える)罫線付き画像を作成し、当てはめて行くのが無難なような気がします。

幅高さ倍率を変えても綺麗に見える画像の作成方法、大量のセル数に対しての適用方法等は今後も要調査。