Template:Diagonal split header
テンプレートの解説表のセルを擬似的に対角線で分割し、左上と右上にそれぞれテキスト等を表示できるテンプレートです。英語版や中国語版などの{{Diagonal split header}}はそのまま日本語版で表示できます。
使い方[編集]
引数を指定しない場合[編集]
{| class="wikitable"
! {{Diagonal split header}}
| {{Diagonal split header}}
|}
|
|
|---|
見出しセル、通常セルともに見出しセルの背景色に対角線が引かれます。
基本の変数 (英語版、中国語版との互換性について)[編集]
{| class="wikitable"
! {{Diagonal split header|行|列|style=text-decoration:underline;}}
| {{Diagonal split header|左下|右上|transparent}}
|}
列 行
|
右上 左下
|
|---|
英語版や中国語版の同名テンプレートでは1 2 3 styleの4つの変数のみが使用可能 (中国語版はstyle非対応) で、最初の2つは必須に指定されています。本テンプレートの番号変数はこの他言語版からの翻訳時に対応するための変数です。本テンプレートは1にrow、2にcolumn、3にbackcolor、とそれぞれ別名を与えており、最初の2つの変数は既定値をゼロ幅スペース (​) とし省略可能にしてあり、さらに他にも多くの変数があることから、原則としてこれら別名を変数として用いてください。数字変数での引数と別名での引数が両方指定された場合は、順序に関係なく別名で指定したものが優先されます。また、背景色にtransparentを指定すると通常のセルの色になります。
テキストが対角線に重なるときの対処法[編集]
- 横幅の調節
{| class="wikitable"
| {{Diagonal split header|row=長めの文字列|column=重なりが発生|backcolor=transparent}}
| {{Diagonal split header|row=余白を広げる|column=重なりが解消|margin=6em|backcolor=transparent}}
|}
重なりが発生 長めの文字列
|
重なりが解消 余白を広げる
|
marginを用いて調節します。この変数は右上のテキストの左と左下のテキストの右 (つまり行、列の内容からそれぞれ対角線のある方向の) それぞれの余白について、幅の下限を指定します。既定値は2emですが、十分に大きい幅を指定することで対角線への重なりを解消できます。
- 縦幅の調節
{| class="wikitable"
| {{Diagonal split header|row=長い文字列|column=線に重なる|backcolor=transparent}}
|-
| {{Diagonal split header|row=改行入れる|column=重ならない<br />​|backcolor=transparent}}
|}
線に重なる 長い文字列
|
重ならない 改行入れる
|
column の末尾に<br />​を加える (またはrow の先頭に​<br />を加える) ことで縦方向に余白を広げるのも解決法の一つです。
他のセルや表全体を考慮しながら適切な方法を選んで (あるいは組み合わせて) 調節してください。
背景色の細かい変更[編集]
{| class="wikitable"
| {{Diagonal split header|row={{color|white|行背景色の<br />青が優先}}|column=両背景色も<br />指定したが<br />​|margin=3em|backcolor=yellow|rowbackcolor=blue}}
|}
両背景色も 指定したが 行背景色の
青が優先 |
対角線の左下と右上で色を分けたい場合はrowbackcolor colbackcolorで個別に指定することができます。この2つの変数はbackcolorよりも優先されます。
対角線のスタイル[編集]
{| class="wikitable"
| {{Diagonal split header|row=対角|column=太線|backcolor=transparent|linewidth=5}}
| {{Diagonal split header|column=赤線|backcolor=transparent|linecolor=red}}
|}
太線 対角
|
赤線
|
linewidthによって対角線の幅を変更できます。0から100までの数値を指定してください (既定値は1)。0を指定すると対角線は表示されず、100でセル全体がちょうど対角線に覆われます。
また、linecolorによって対角線の色を変更することができます。既定値は通常の枠の色と同じ#aaaです。
変数[編集]
全て省略可能です。
| 変数 | 指定内容 | 既定値 | 説明 |
|---|---|---|---|
row(1)
|
行の内容 | ​ |
テキスト等をセルの左下に表示します。原則としてrowを使用してください。先頭に ​<br />を加えることで縦方向の余白を広げることもできます。
|
column(2)
|
列の内容 | ​ |
テキスト等をセルの右上に表示します。原則としてcolumnを使用してください。末尾に <br />​を加えることで縦方向の余白を広げることもできます。
|
margin
|
余白調節 | 2em |
列テキストの左側と行テキストの右側に最低限確保する余白の長さを指定できます。 対角線と重なってしまう場合は余白を大きくしてください。 |
backcolor(3)
|
両背景色 | #eaecf0 |
背景色を変更します。原則としてbackcolorを使用してください。rowbackcolor/colbackcolorを指定した場合はそちらが優先されます。標準的な表では見出しセルは無指定、普通のセルは transparentを指定します。
|
rowbackcolor
|
行背景色 | #eaecf0 |
行側(左下)の背景色を変更します。backcolorを指定した場合もこちらが優先されます。標準的な表では見出しセルは無指定、普通のセルは transparent を指定します。 |
colbackcolor
|
列背景色 | #eaecf0 |
列側(右上)の背景色を変更します。backcolorを指定した場合もこちらが優先されます。標準的な表では見出しセルは無指定、普通のセルは transparent を指定します。 |
linewidth
|
対角線幅 | 1 |
セル全体をちょうど覆える幅に対して、百分率で対角線の幅を指定できます。 |
linecolor
|
対角線色 | #aaa |
対角線の色を変更します。 |
style
|
他の様式 | (なし) | セル本体に関するその他のスタイルをCSSで指定できます。 例えば、 line-height:1.3; (既定値は1.1) など。
|
カテゴリ[編集]
このテンプレートが貼り付けられたページに適用するカテゴリはありません。
テンプレートデータ[編集]
擬似的に表の見出しセル、または普通のセルを対角線で分割します。
| 引数 | 説明 | 型 | 状態 | |
|---|---|---|---|---|
| 行 | row | テキスト等をセルの左下に表示します。
| 内容 | 省略可能 |
| 列 | column | テキスト等をセルの右上に表示します。
| 内容 | 省略可能 |
| 余白調節 | margin | 列テキストの左側と行テキストの右側に最低限確保する余白の長さを指定できます。テキストが対角線と重なってしまう場合に余白を大きくしてください。
| 内容 | 省略可能 |
| 両背景色 | backcolor | 背景色を変更します。行背景色や列背景色を指定した場合はそちらが優先されます。標準的な表では見出しセルは無指定、普通のセルは transparent を指定します。
| 内容 | 省略可能 |
| 行背景色 | rowbackcolor | 行側(左下)の背景色を変更します。両背景色を指定してもこちらが優先されます。標準的な表では見出しセルは無指定、普通のセルは transparent を指定します。
| 内容 | 省略可能 |
| 列背景色 | colbackcolor | 列側(右上)の背景色を変更します。両背景色を指定してもこちらが優先されます。標準的な表では見出しセルは無指定、普通のセルは transparent を指定します。
| 内容 | 省略可能 |
| 対角線幅 | linewidth | セル全体をちょうど覆える幅に対して、百分率で対角線の幅を指定できます。
| 内容 | 省略可能 |
| 対角線色 | linecolor | 対角線の色を変更します。
| 内容 | 省略可能 |
| 他のスタイル | style | セル本体に関するその他のスタイルをCSSで指定できます。 | 内容 | 省略可能 |