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