ページごとに 1 つ以上の小さな広告以上表示しないことを保証します。ご心配なく、このメッセージを非表示にすると、二度と表示されなくなります。
概要
列
Grid は水平方向のスペースを「列」と呼ばれる不可分の単位に分割します。Grid 内のすべての列は、使用可能な行幅の割合として幅を指定する必要があります。
すべての Grid システムは、行ごとに許可する任意の列数を決定します。Semantic のデフォルトテーマでは、16 列を使用します。
以下の例では、4 つの four wide 列が最初の行に収まり (16 / 4 = 4)、2 番目の行にはさまざまなサイズの 3 つの列ができます。2 + 8 + 6 = 16
デフォルトの列数と Grid のその他の任意の機能は、Semantic UI の基盤となる テーマ変数 を調整することで変更できます。
行
行は水平方向に整列された列のグループです。
行は、追加の row 要素でマークされた 明示的な 行と、前の行に空きスペースがなくなったときに自動的に出現する 暗黙的な 行のどちらかになります。
各列グループの後には、各列グループを分離するために垂直方向の間隔が追加され、垂直のリズムが作成されます。
ガター
グリッドの列は「ガター」と呼ばれるホワイトスペースの領域によって分けられています。ガターは ネガティブスペース をページ要素間に提供することで、可読性を向上させます。
ガターは、Grid の幅や行内の列の数に関係なく、一定のサイズを維持しています。特定の Grid のガターのサイズを増やすには、relaxed grid バリエーションを使用します。
負のマージン
すべてのグリッドの列にガターが含まれるため、グリッドは 負のマージン を使用して、最初の列と最後の列がグリッドの外側のコンテンツとぴったりと合うようにします。
次の例では、最上行には余白があるものの、attached button が依然としてグリッドのエッジとぴったりと揃っているのがわかります。
列または行が colored の場合など、場合によっては負のマージンを使用したくない場合があります。これを行うには、padded grid バリエーションを使用します。
ページグリッド
グリッドは流動的で、使用可能な最大の幅になるように自動的に大きさが変更されます。
コンテナーは、ユーザーの画面のサイズに基づいて表示されるページコンテンツを妥当な最大の幅に制限するように設計された要素です。
ui grid containerを使用してグリッド内に最上位のページコンテンツを含めるのが最善の方法です。
列
自動フロー
ほとんどのグリッドでは行を指定する必要はありません。現在の行のすべてのグリッド列が占有されている場合、コンテンツは自動的に次の行に流れます。
列のコンテンツ
列はパディングを使用してガターを作成するため、コンテンツスタイルは列に直接適用しないでください。列内の要素に適用してください。
行
グループ化
行ラッパーを使用すると、列のグループにバリエーションを適用できます。
さまざまなグリッド
グリッドのネスト
グリッドは他のグリッド内に配置できます。これにより、列を分割できます。
カラー
グリッドは名前付きカラーバリエーションを使用して背景色を追加できますが、負のマージンを含まないpadded gridでのみ使用できます。
デフォルトのパレットにない色を含めるには、CSSを使用しても問題ありません。
オリーブ色
黒
カスタム行
黒
オリーブ色
重要な語順
グリッドには、垂直方向または水平方向の配置、テキストの配置、またはデフォルトのガターサイズなどのものを調整するための多くのバリエーションが含まれています。
left floatedやright alignedなどの一部の複数語バリエーションは語順に依存しており、隣接するクラス名を使用する必要があります。
左に浮いた右揃えの列
右に浮いた左揃えの列
中央揃えの行
中央揃えの行
右揃えのグリッド
レスポンシブなグリッド
手動での調整
doublingまたはstackableなどのデザインパターンはレスポンシブスタイルを簡素化するために役立ちますが、(x) wide deviceまたはdevice only列または行を指定して、デバイスの表示を手動で調整することもできます。
タイプ
分割 行が必要
Grid は、列の間に仕切り線を入れることができます
垂直に分割 行が必要です
Grid は、行の間に仕切り線を入れることができます
セル分け 行が必要です
Grid は、行をセルに分割できます
内部でセル分け 行が必要です
Grid は、内部の行の間にのみ行の区分を持つことができます
コンテンツ
行
行は、列の水平グループです
列
列はそれぞれ、ガターを含み、それにより、他の列との間の等間隔が与えられます
バリエーション
フローティング
列は、行の左端または右端にぴったり付けることができます
列幅
列は、単一の Grid 列以上に幅が取れるように幅を変えることができます
列数
Grid は、行ごとに異なる数の列を持つことができます
同幅
Grid は、利用可能な幅を均等に分割するために自動的にすべての要素のサイズを変更できます
1
2
3
1
2
3
4
1
2
3
1
2
伸張
行は、列の高さ全体を占めるようにその内容を伸張できます
1
1
2
1
2
3
1
2
1
2
1
2
1
2
パディング
Grid は、最初の列と最後の列で垂直および水平のガターを保持できます
以下の Grid には、垂直および水平のガターがあります
以下の Grid には、垂直のガターがあります
以下の Grid には、水平のガターがあります
リラックス
Grid は、より多くのネガティブスペースを利用できるようにするためのガターを増やすことができます
カラー
行または列には、色を付けることができます
赤
オレンジ
黄色
オリーブ色
緑
ティール
青
バイオレット
紫
ピンク
茶色
灰色
黒
赤
オレンジ
黄色
オリーブ色
緑
ティール
青
バイオレット
紫
ピンク
茶色
灰色
黒
中央揃え
Grid は、その列を中央揃えにすることができます
テキスト配置
Grid、行、または列はそのテキスト配置を指定できます
両端揃えの内容は、完全に Grid 列に収まり、片側から片側まで幅全体を占めます。両端揃えの内容は、完全に Grid 列に収まり、片側から片側まで幅全体を占めます。両端揃えの内容は、完全に Grid 列に収まり、片側から片側まで幅全体を占めます。両端揃えの内容は、完全に Grid 列に収まり、片側から片側まで幅全体を占めます。両端揃えの内容は、完全に Grid 列に収まり、片側から片側まで幅全体を占めます。
垂直配置
Grid、行、または列は、そのすべての列が垂直に中央揃えになるように、その垂直配置を指定できます
レスポンシブバリエーション
倍増
Grid は、タブレットサイズとモバイルサイズで列幅を 2 倍にすることができます
スタック可能
Grid は、モバイルのブレークポイントに達した後に列を互いにスタックできます
反転
Grid または行は、列を異なるデバイスサイズで順序を反転するように指定できます
コンピュータ A 第 4 列
コンピュータ A 第 3 列
コンピュータ A 第 2 列
Computer A First
Computer B Fourth
Computer B Third
Computer B Second
Computer B First
Tablet Fourth
Tablet Third
Tablet Second
Tablet First
Mobile Fourth
Mobile Third
Mobile Second
Mobile First
Computer Row 4
Computer Row 3
Computer Row 2
Computer Row 1
Tablet Row 4
Tablet Row 3
Tablet Row 2
Tablet Row 1
Mobile Row 4
Mobile Row 3
Mobile Row 2
Mobile Row 1
デバイスの可視性
列または行は、特定のデバイスまたはスクリーンサイズでのみ表示することが可能です
大画面
大画面
ワイドスクリーン
ワイドスクリーン
モバイル
モバイル
コンピューター
タブレットおよびモバイル
すべてのサイズ
すべてのサイズ
コンピューター
コンピューター
コンピューター
コンピューター
タブレット
タブレット
タブレット
レスポンシブ幅
列では、特定のデバイスの幅を指定できます