このページは日本語に翻訳済みです。
grid要素関数要素関数要素関数はsetルールやshowルールでカスタマイズできます。
setルールやshowルールでカスタマイズできます。グリッド状にコンテンツを配置。
グリッド要素を用いるとコンテンツをグリッド状に配置できます。 行と列の数に加えて、それらの間隔を定義できます。 複雑なレイアウトが作成できるような、列と行の大きさに関する設定方法が複数あります。
グリッド要素とテーブル要素はとてもよく似た挙動をする一方で、これらは異なる用途が想定されており、セマンティクスが異なります。
グリッド要素はプレゼンテーションおよびレイアウトに使われることが想定されている一方で、table要素は、複数の関連するデータ項目を表すことが大まかに想定されています。
これらの要素に対するsetルールとshowルールは、互いに影響しません。
グリッドやテーブルがスクリーンリーダーなどの支援技術（AT）のユーザーにどのように提示されるかについては、アクセシビリティのセクションを参照してください。
トラックのサイズ設定
グリッドの大きさは引数に指定されたトラックサイズによって決定されます。
サイズの設定パラメーターとして、columns、rowsおよびgutterがあります。
各サイズ設定パラメーターは同じ値を受け入れるため、ここでまとめて説明します。
各サイズ設定パラメーターはトラックサイズの配列を受け入れます。
トラックサイズは以下のいずれかです。
-
auto: トラックはコンテンツに合わせた大きさとなり、残りのスペース全体まで大きくなります。autoトラック幅が複数指定され、利用可能なスペースより大きなスペースが要求された場合、利用可能なスペースがautoトラックに等分配されます。 -
固定あるいは相対長さ（
10ptや20% - 1cmなど）: トラックは厳密にその大きさになります。 -
比率長さ（例えば
1fr）: 他のトラック全ての大きさが確定し次第、残りのスペースは比率指定のトラックに指定された比率に応じて分配されます。 例えば、1frで比率指定されたトラックが2つある場合、それぞれ残りのスペースの半分になります。
単一のトラックを指定する場合は、配列を省略して単一の値を指定できます。
複数のautoのトラックを指定する場合は、配列の代わりにトラックの数を入力して下さい。
例えば、columns: 3はcolumns: (auto, auto, auto)と同じ意味になります。
例
以下の例は異なるトラックサイズオプションの実演です。
また、1つのセルをグリッドの2つのトラックにまたがせるためにgrid.cellをどう使うのかも示しています。
// We use `rect` to emphasize the
// area of cells.
#set rect(
inset: 8pt,
fill: rgb("e4e5ea"),
width: 100%,
)
#grid(
columns: (60pt, 1fr, 2fr),
rows: (auto, 60pt),
gutter: 3pt,
rect[Fixed width, auto height],
rect[1/3 of the remains],
rect[2/3 of the remains],
rect(height: 100%)[Fixed height],
grid.cell(
colspan: 2,
image("tiger.jpg", width: 100%),
),
)
また、文字列やコンテンツの配列をグリッドに展開して、セルを埋めることもできます。
#grid(
columns: 5,
gutter: 5pt,
..range(25).map(str)
)
グリッドのスタイル設定
グリッド要素とテーブル要素の動作は似ています。 実践的な説明についてはテーブルガイドを参照してください。 概要を知りたい場合はこのまま読み進めてください。
グリッドの外観はさまざまなパラメーターでカスタマイズできます。 以下のものが最も重要です。
alignはセルの配置方法を変更します。insetはセル内に任意のパディングを追加します。fillはセルに背景を設定します。strokeは特定のストロークでグリッドの線をオプションで有効化します。
多様なニーズに対応するため、さまざまな設定方法があります。
もし個々のセルに対して上記のオプションを上書きする必要がある場合は、grid.cell要素が使用できます。
同様に、個々のグリッドの線もgrid.hlineやgrid.vline要素を用いて上書きできます。
あるいは、グリッド全体のスタイルを設定するには、以下のいずれかの方法でオプションを指定できます。
- 全てのセルに適用される単一の値。
- 各列に対応する値の配列。配列の要素数が列数より少ない場合、配列は循環して使用されます。
(x, y) => valueの形式の関数。セルの列と行の（いずれも0始まりの）インデックスを受け取り、そのセルに適用する値を返します。
#grid(
columns: 5,
// By a single value
align: center,
// By a single but more complicated value
inset: (x: 2pt, y: 3pt),
// By an array of values (cycling)
fill: (rgb("#239dad50"), none),
// By a function that returns a value
stroke: (x, y) => if calc.rem(x + y, 3) == 0 { 0.5pt },
..range(5 * 3).map(n => numbering("A", n + 1))
)
さらに、gridやgrid.cellにスタイルルールを適用できます。
特に、grid.cellのxとyフィールドはwhereセレクターで使用でき、特定の列や行、または特定の位置にあるセルにスタイルを適用できます。
ストロークのスタイル設定の優先順位
上記で説明したように、グリッドセルのストローク指定方法は3種類あります。
grid.cellのstrokeフィールドを用いる方法、grid.hlineとgrid.vlineを用いる方法、gridのstrokeフィールドを用いる方法です。
これらの設定が複数存在し、競合する場合、hlineとvlineの設定が最優先となり、続いて優先されるのがcellの設定で、最後にgridの設定が適用されます。
さらに、グリッドの繰り返されたヘッダーおよびフッターのストロークは、通常のセルのストロークよりも優先されます。
アクセシビリティ
グリッドには特別なセマンティクスはありません。
支援技術（AT）は、グリッド内のセルを2次元的に移動する機能を提供しません。
表形式のデータを提示したい場合は、代わりにtable要素を使用してください。
ATはグリッドセルを論理的順序（semantic order）で読み上げます。
通常、これはグリッドに渡した順序です。
ただし、grid.cellのxおよびy引数を使用して手動で配置した場合、セルは（左から右に書く文書では）行ごとに左から右に読み上げられます。
セルは、その位置に最初に到達した時点で読み上げられます。
引数引数引数は関数への入力値です。関数名の後に括弧で囲んで指定します。
grid(,rows:,,,,,,fill:,,)->列の数または各列の大きさ。
トラックサイズの配列か整数を指定します。
整数を渡した場合、その数だけautoサイズ列を持つグリッドが作成されます。
rowsおよびguttersとは異なり、単一のトラックサイズを指定するとただ一つの列が作成されることに注意してください。
詳細は上記のトラックのサイズ設定のセクションを参照してください。
デフォルト値：()
デフォルト値：()
行間と列間の間隔。
これはcolumn-gutterとrow-gutterを同じ値で設定する省略記法です。
定義した数よりも多くgutterがある場合、最後のgutterが繰り返されます。
詳細は上記のトラックのサイズ設定のセクションを参照してください。
デフォルト値：()
列間の間隔。
デフォルト値：()
行間の間隔。
デフォルト値：()
inset設定可能引数設定可能引数設定可能引数は、setルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。
insetsetルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。セルのコンテンツのパディング量。
全てのセルに一律のインセットを指定するには、全ての辺に対して単一の長さを使用するか、各辺の長さを指定する辞書を使用します。 詳細はボックスのドキュメントを参照してください。
セルごとに異なるインセットを指定するには、以下の方法があります。
- 全てのセルに対して単一のインセットを使用する
- 各列に対応するインセットの配列を使用する
- セルの位置をインセットに変換する関数を使用する
詳細は上記のスタイル設定のセクションを参照してください。
また、table.insetパラメーターの例も参照してください。
デフォルト値：(:)
セルのコンテンツの配置方法。
autoに設定された場合、外側の配置が使用されます。
以下のいずれかの方法で配置を指定できます。
- 全てのセルに対して単一の配置を使用する
- 各列に対応する配置の配列を使用する
- セルの位置を配置に変換する関数を使用する
詳細は上記のスタイル設定のセクションを参照してください。
また、table.alignパラメーターの例も参照してください。
デフォルト値：auto
セルの塗り潰し方。
以下のいずれかを指定できます。
- 全てのセルに対する単一の色
- 各列に対応する色の配列
- セルの位置を色に変換する関数
特に、配列や関数はストライプ状のグリッドを作成するのに便利です。 詳細は上記のスタイル設定のセクションを参照してください。
例を表示
#grid(
fill: (x, y) =>
if calc.even(x + y) { luma(230) }
else { white },
align: center + horizon,
columns: 4,
inset: 2pt,
[X], [O], [X], [O],
[O], [X], [O], [X],
[X], [O], [X], [O],
[O], [X], [O], [X],
)
デフォルト値：none
セルのストロークをどうするか。
デフォルトではグリッドにストロークはありませんが、このオプションを所望のストロークに設定すれば変更できます。
gutterオプションによって作成されたセル間の空白を横切る線を配置する必要がある場合や、複数の特定のセル間のストロークを上書きする必要がある場合は、グリッドセルにあわせてgrid.hlineおよびgrid.vlineのいずれか、または両方を指定することを検討してください。
全てのセルに同じストロークを指定するには、全ての辺に対して単一のストロークを使用するか、各辺のストロークを指定する辞書を使用します。 詳細は長方形のドキュメントを参照してください。
セルごとに異なるストロークを指定するには、以下の方法があります。
- 全てのセルに対して単一のストロークを使用する
- 各列に対応するストロークの配列を使用する
- セルの位置をストロークに変換する関数を使用する
詳細は上記のスタイル設定のセクションを参照してください。
例を表示：関数を渡して位置に基づくストロークを設定
#set page(width: 420pt)
#set text(number-type: "old-style")
#show grid.cell.where(y: 0): set text(size: 1.3em)
#grid(
columns: (1fr, 2fr, 2fr),
row-gutter: 1.5em,
inset: (left: 0.5em),
stroke: (x, y) => if x > 0 { (left: 0.5pt + gray) },
align: horizon,
[Winter \ 2007 \ Season],
[Aaron Copland \ *The Tender Land* \ January 2007],
[Eric Satie \ *Gymnopedie 1, 2* \ February 2007],
[],
[Jan 12 \ *Middlebury College \ Center for the Arts* \ 20:00],
[Feb 2 \ *Johnson State College Dibden Center for the Arts* \ 19:30],
[],
[Skip a week \ #text(0.8em)[_Prepare your exams!_]],
[Feb 9 \ *Castleton State College \ Fine Arts Center* \ 19:30],
[],
[Jan 26, 27 \ *Lyndon State College Alexander Twilight Theater* \ 20:00],
[
Feb 17 --- #smallcaps[Anniversary] \
*Middlebury College \ Center for the Arts* \
19:00 #text(0.7em)[(for a special guest)]
],
)
例を表示：ストロークの辞書の畳み込み
#set page(height: 13em, width: 26em)
#let cv(..jobs) = grid(
columns: 2,
inset: 5pt,
stroke: (x, y) => if x == 0 and y > 0 {
(right: (
paint: luma(180),
thickness: 1.5pt,
dash: "dotted",
))
},
grid.header(grid.cell(colspan: 2)[
*Professional Experience*
#box(width: 1fr, line(length: 100%, stroke: luma(180)))
]),
..{
let last = none
for job in jobs.pos() {
(
if job.year != last [*#job.year*],
[
*#job.company* - #job.role _(#job.timeframe)_ \
#job.details
]
)
last = job.year
}
}
)
#cv(
(
year: 2012,
company: [Pear Seed & Co.],
role: [Lead Engineer],
timeframe: [Jul - Dec],
details: [
- Raised engineers from 3x to 10x
- Did a great job
],
),
(
year: 2012,
company: [Mega Corp.],
role: [VP of Sales],
timeframe: [Mar - Jun],
details: [- Closed tons of customers],
),
(
year: 2013,
company: [Tiny Co.],
role: [CEO],
timeframe: [Jan - Dec],
details: [- Delivered 4x more shareholder value],
),
(
year: 2014,
company: [Glorbocorp Ltd],
role: [CTO],
timeframe: [Jan - Mar],
details: [- Drove containerization forward],
),
)
デフォルト値：(:)
children必須引数必須引数必須引数は、関数を呼び出す際に必ず指定しなければなりません。位置引数位置引数位置引数は順序通りに指定することで、引数名を省略して設定できます。可変長引数可変長引数可変長引数は複数回指定することができます。
childrenグリッドセルのコンテンツと、grid.hlineおよびgrid.vline要素で指定される任意のグリッド線。
セルは行優先で埋められます。
定義定義これらの関数や型には、関連する定義を持たせることができます。定義にアクセスするには、対象の関数や型の名前を指定した後に、ピリオド区切りで定義名を記述します。
cell要素関数要素関数要素関数はsetルールやshowルールでカスタマイズできます。
cellsetルールやshowルールでカスタマイズできます。グリッドのセル。 グリッドの引数リストでこの関数を用いると各セルのスタイルプロパティを上書きしたり、グリッド内にセルを手動で配置したりできます。 showルールにこの関数を用いると複数のセルに対して特定のスタイルを一度に適用できます。
例えば、以下のようにある単一セルの位置とストロークを上書きできます。
例を表示
#set text(15pt, font: "Noto Sans Symbols 2")
#show regex("[♚-♟︎]"): set text(fill: rgb("21212A"))
#show regex("[♔-♙]"): set text(fill: rgb("111015"))
#grid(
fill: (x, y) => rgb(
if calc.odd(x + y) { "7F8396" }
else { "EFF0F3" }
),
columns: (1em,) * 8,
rows: 1em,
align: center + horizon,
[♖], [♘], [♗], [♕], [♔], [♗], [♘], [♖],
[♙], [♙], [♙], [♙], [], [♙], [♙], [♙],
grid.cell(
x: 4, y: 3,
stroke: blue.transparentize(60%)
)[♙],
..(grid.cell(y: 6)[♟],) * 8,
..([♜], [♞], [♝], [♛], [♚], [♝], [♞], [♜])
.map(grid.cell.with(y: 7)),
)
grid.cellに対してshowルールを用いると全てのセルに一括でスタイル設定ができます。
例えば、セルの位置に基づいてスタイルを適用できます。
より詳しく知りたい場合はtable.cell要素の例を参照してください。
grid.cell(,x:,y:,,,,,fill:,,)->body
bodyセルの本文。
セルの列（0始まり）。 このフィールドをshowルールで用いるとセルの列に応じたスタイルを適用できます。
このフィールドを上書きすることでセルを配置する列を選択できます。
行（y）が選択されていない場合、セルは（0行目から始まる）使用可能な（存在しなければ新しい）最初の行に配置されます。
一方、xとyの両方が選択された場合は正確にその位置に配置されます。
その位置が利用できない場合、エラーが発生します（したがって、通常はセルを自動配置する前に、カスタム位置を指定する方が賢明です）。
例を表示
#let circ(c) = circle(
fill: c, width: 5mm
)
#grid(
columns: 4,
rows: 7mm,
stroke: .5pt + blue,
align: center + horizon,
inset: 1mm,
grid.cell(x: 2, y: 2, circ(aqua)),
circ(yellow),
grid.cell(x: 3, circ(green)),
circ(black),
)
デフォルト値：auto
セルの行（0始まり）。 このフィールドをshowルールで用いるとセルの行に応じたスタイルを適用できます。
このフィールドを上書きすることでセルを配置する行を選択できます。
列（x）が選択されていない場合、セルは（0列目から始まる）使用可能な最初の列に配置されます。
選ばれた行にある全ての列が既に埋まっている場合、エラーが発生します。
例を表示
#let tri(c) = polygon.regular(
fill: c,
size: 5mm,
vertices: 3,
)
#grid(
columns: 2,
stroke: blue,
inset: 1mm,
tri(black),
grid.cell(y: 1, tri(teal)),
grid.cell(y: 1, tri(red)),
grid.cell(y: 2, tri(orange))
)
デフォルト値：auto
hline要素関数要素関数要素関数はsetルールやshowルールでカスタマイズできます。
hlinesetルールやshowルールでカスタマイズできます。グリッドの水平方向の線。
グリッドのstrokeフィールドを用いて指定されたものを含めてセルごとに設定されたストロークを上書きします。
グリッドのcolumn-gutterオプションで作成されたセル間の間隔をまたげます。
この関数の例はtable.hline要素のドキュメントにあります。
grid.hline(y:,,end:,,)->配置される水平方向の線の上にある行（0始まり）。
positionフィールドがbottomに設定されている場合、指定された番号の行の下に線が配置されます（詳細はgrid.hline.positionを参照してください）。
autoを指定すると、その行が配置されるのは、グリッドの子要素のうち、その行より前にある、最後に自動配置されたセル（すなわち座標が上書きされていないセル）の下の行になります。
その行の前にそのようなセルが存在しない場合、グリッドの一番上（0行目）に配置されます。
このオプションをグリッドにある行の数と全く同じ値に設定すると、水平方向の線は一番下の境界線を上書きし、0に設定すると一番上の境界線を上書きすることに注意してください。
デフォルト値：auto
start設定可能引数設定可能引数設定可能引数は、setルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。
startsetルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。水平方向の線を開始する列（0始まりで、指定した列を含む）。
デフォルト値：0
水平方向の線が終了する直前の列（0始まりで、指定した列は含まない）。
したがって、水平方向の線はend - 1列目まで引かれます。
値をnoneまたは列の数と同じにすると、線はグリッドの終端まで延びます。
デフォルト値：none
線のストローク。
noneを指定すると、水平方向の線の範囲にこれまで配置された全ての線が削除されます。
これには水平方向の線の下にあるhlineやセルごとのストロークが含まれます。
デフォルト値：1pt + black
position設定可能引数設定可能引数設定可能引数は、setルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。
positionsetルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。行（y）が与えられた場合の線が配置される位置。
topかbottomのいずれかを指定し、それぞれその行の上または下に描画します。
この設定はrow-gutterが設定されている場合にのみ有効です（それ以外の場合は使用せず、単にyフィールドの値を1ずつ増やしてください）。
これは、行の下部の位置と次の行の上部の位置の間に空白が発生し、両者が一致しなくなるためです。
デフォルト値：top
vline要素関数要素関数要素関数はsetルールやshowルールでカスタマイズできます。
vlinesetルールやshowルールでカスタマイズできます。グリッドの垂直方向の線。
グリッドのstrokeフィールドを用いて指定されたものを含めてセルごとに設定されたストロークを上書きします。
グリッドのrow-gutterオプションで作成されたセル間の間隔をまたげます。
grid.vline(x:,,end:,,)->配置される垂直方向の線の前にある列（0始まり）。
positionフィールドがendに設定されている場合、指定された番号の列の後に線が配置されます（詳細はgrid.vline.positionを参照してください）。
autoを指定すると、垂直方向の線が配置されるのは、グリッドの子要素のうち、その線より前にある、最後に自動配置されたセル（すなわち座標が上書きされていないセル）の後の列になります。
垂直方向の線の前にそのようなセルが存在しない場合、グリッドの最初の列（0列目）に配置されます。
このオプションをグリッドにある列の数と全く同じ値に設定すると、垂直方向の線は終端の境界線（LTRでは右端、RTLでは左端）を上書きし、0に設定すると始端の境界線（LTRでは左端、RTLでは右端）を上書きすることに注意してください。
デフォルト値：auto
start設定可能引数設定可能引数設定可能引数は、setルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。
startsetルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。垂直方向の線を開始する行（0始まりで、指定した行を含む）。
デフォルト値：0
垂直方向の線が終了する直前の行（0始まりで、指定した行は含まない）。
したがって、垂直方向の線はend - 1行目まで引かれます。
noneまたは行数と同じ値を指定すると、線はグリッドの一番下まで延びます。
デフォルト値：none
線のストローク。
noneを指定すると、垂直方向の線の範囲にこれまで配置された全ての線が削除されます。
これには垂直方向の線の下にあるvlineやセルごとのストロークが含まれます。
デフォルト値：1pt + black
position設定可能引数設定可能引数設定可能引数は、setルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。
positionsetルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。列（x）が与えられた場合の線が配置される位置。
startかendのいずれかを指定し、それぞれその前またはその後に描画します。
leftおよびrightの値も使用可能ですが、左から右に書く文書と右から左に書く文書間でグリッドの挙動が一貫しなくなるため、非推奨です。
この設定はcolumn-gutterが設定されている場合にのみ有効です（それ以外の場合は使用せず、単にxフィールドの値を1ずつ増やしてください）。
これは、ある列の直後の位置と次の列の直前の位置の間に空白が発生し、両者が一致しなくなるためです。
デフォルト値：start
header要素関数要素関数要素関数はsetルールやshowルールでカスタマイズできます。
headersetルールやshowルールでカスタマイズできます。繰り返し可能なグリッドのヘッダー。
repeatがtrueに設定されている場合、ヘッダーは改ページごとに繰り返されます。
例としてtable.header要素およびgrid.strokeパラメーターのドキュメントを参照してください。
grid.header(,,)->level設定可能引数設定可能引数設定可能引数は、setルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。
levelsetルールを用いて設定でき、それ以降で使用するデフォルト値を変更できます。ヘッダーのレベル。0にはできません。
これにより、複数のヘッダーを同時に繰り返せます。 異なるレベルを持つヘッダーは、レベルが昇順であれば一緒に繰り返せます。
特に、より低いレベルのヘッダーが繰り返しを開始すると、それ以上のレベルのヘッダーの繰り返しは停止します（新しいヘッダーに「置き換え」られます）。
デフォルト値：1
children必須引数必須引数必須引数は、関数を呼び出す際に必ず指定しなければなりません。位置引数位置引数位置引数は順序通りに指定することで、引数名を省略して設定できます。可変長引数可変長引数可変長引数は複数回指定することができます。
childrenヘッダー内のセルと線。
footer要素関数要素関数要素関数はsetルールやshowルールでカスタマイズできます。
footersetルールやshowルールでカスタマイズできます。grid.footer(,)->