CSS layout-grid

layout-gridは文字や行の間隔を調整するCSSプロパティである。

layout-grid

スタイルシート属性 layout-grid は、行間と文字間のスペースを指定します。

書式

layout-grid: mode type line char

属性値

mode
値意味
bothlineとcharの両方を適用する（規定値）
noneどちらも適用しない
linelineのみ適用する
charcharのみ適用する
type
値意味
loose日本語や韓国語に適した方法（規定値）
strict中国語に適した方法
fixed固定
line
行間のスペースの大きさを10pxのように数値と単位で指定するか、以下の値を指定します。
値意味
none指定なし（規定値）
auto自動
char
文字間のスペースの大きさを10pxのように数値と単位で指定するか、以下の値を指定します。
値意味
none指定なし（規定値）
auto自動

layout-grid-mode

スタイルシート属性 layout-grid-mode は、行間と文字間のスペースを指定します。

書式

layout-grid-mode: mode

属性

mode
行間（line）と文字間（char）のどちらにCSSを適用するか
値意味
bothlineとcharの両方を適用する（規定値）
noneどちらも適用しない
linelineのみ適用する
charcharのみ適用する

layout-grid-type

スタイルシート属性 layout-grid-type は、行間と文字間のスペースを指定します。

書式

layout-grid-type: type

属性

type
値意味
loose日本語や韓国語に適した方法（規定値）
strict中国語に適した方法
fixed固定

layout-grid-line

スタイルシート属性 layout-grid-line は、行間のスペースの大きさを指定します。

書式

layout-grid-line: line

属性

line
行間のスペースの大きさを10pxのように数値と単位で指定するか、以下の値を指定します。
値意味
none指定なし（規定値）
auto自動

対応状況

Webブラウザ対応状況
Internet Explorer 6.0○
FireFox 3.0×
Google Chrome 0.3×
Opera 9.62×
Safari 3.2.1×

例

<p style="layout-grid-line: 0px">スタイルシート属性layout-grid-lineを指定すると、改行幅を変更することができます。この段落では、改行幅を0pxとしています。</p>

スタイルシート属性layout-grid-lineを指定すると、改行幅を変更することができます。この段落では、改行幅を0pxとしています。

<p style="layout-grid-line: 3em">スタイルシート属性layout-grid-lineを指定すると、改行幅を変更することができます。この段落では、改行幅を3emとしています。</p>

スタイルシート属性layout-grid-lineを指定すると、改行幅を変更することができます。この段落では、改行幅を3emとしています。

layout-grid-char

スタイルシート属性 layout-grid-char は、文字の間隔の大きさを指定します。

書式

layout-grid-char: char

属性値

char
文字間のスペースの大きさを10pxのように数値と単位で指定するか、以下の値を指定します。
値意味
none指定なし（規定値）
auto自動

対応状況

Webブラウザ対応状況
Internet Explorer 6.0○
FireFox 3.0×
Google Chrome 0.3×
Opera 9.62×
Safari 3.2.1×

使用例

スタイルシート属性 layout-grid-char の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="layout-grid-char: 0px">スタイルシート属性layout-grid-charを指定すると、文字間隔の大きさを変更することができます。この段落では文字間隔を0pxとしています。</p>

スタイルシート属性layout-grid-charを指定すると、文字間隔の大きさを変更することができます。この段落では文字間隔を0pxとしています。

<p style="layout-grid-char: 1em">スタイルシート属性layout-grid-charを指定すると、文字間隔の大きさを変更することができます。この段落では文字間隔を1emとしています。</p>

スタイルシート属性layout-grid-charを指定すると、文字間隔の大きさを変更することができます。この段落では文字間隔を1emとしています。

参考文献

World Wide Web Consortium (2020) CSS Grid Layout Module Level 1