ForHosting KIT · 文章作成・要約AI

ベースライングリッド行送り

16pxの文字を比率1.5、8pxのグリッドに置くと、行送りは24pxでちょうど3行分になり、すべての行が同じ線に乗ります。理想の値がグリッドから外れるときは、行数が整数になるよう合わせます。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

文字サイズ: 16
グリッド: 8
希望の比率: 1.5

結果

スナップ: nearest
理想の行の高さ: 24
行の高さ: 24
比: 1.5

ベースライングリッドは、すべてのテキスト行を同じ見えない水平レールに載せ、段落・キャプション・多段組レイアウトがページ先頭からフッターまで一つの縦リズムを共有するようにします。デザイナーとフロントエンドエンジニアは、多くの場合四・六・八ピクセルといったグリッド単位を選び、その単位のちょうど整数倍になる行送りを求めます。浮動比率のままでは行ごとに半ピクセルずつずれてしまいます。このベースライングリッド行送り計算機は、フォントサイズ、単位なしの希望比率、グリッド行高さを受け取り、理想の行ボックスを最も近い（または切り上げ・切り下げの）整数行数に吸着します。吸着後の行送り（px）、CSSに貼れる実効比率、その行が占めるグリッド行数、理想値がすでにグリッド上だったかどうかが得られます。

ベースライングリッドへの行送り吸着の仕組み

単位なし行送りの定番から始めます。フォントサイズに一・五のような希望比率を掛け、フォントと同じ単位（ほぼ常にCSSピクセル）の理想行ボックスを得ます。読みやすさには適していますが、ベースライングリッドにちょうど乗ることは稀です。

理想行送りをグリッド行高さで割り、行が何行分を占めるかを求め、次に吸着モードを適用します。nearestは最も近い整数行数に丸め、希望比率からの見た目の変化を最小にしたい本文の既定です。up（切り上げ）は常に行ボックスを広げ、理想より詰まった印象にならないようにします。

法的脚注や長い行長で余白が必要なときに有用です。down（切り下げ）はカード高さや印刷カラムなど縦方向の予算が厳しいときにグリッドへ寄せて縮めます。吸着後、整数の行数にグリッド単位を掛けて最終行送りを得、フォントサイズで割ってCSSカスタムプロパティに載せられる単位なし比率を復元します。

病的な入力で行送りが零に潰れるのを防ぐため、行数は最低一を強制します。

行送りをグリッドに合わせると役立つ場面

デザインシステムは単一のグリッド定数から余白とタイプスケールを生成します。著者が新しいサイズを足すときに本計算機を呼べば、表計算なしで各行送りトークンがレール上に保たれます。多段記事・商品カード・ドキュメントのサイドバーを描画するコンポーネントライブラリは、ブレークポイント横断でベースラインを揃える必要があります。

CSSを固定ページグリッドに写す印刷・PDFパイプラインは同じ吸着論理を使い、画面プレビューを刷版と一致させます。検証失敗は残高を消費しません。

活用例

デザイントークンとタイプスケールの生成

デザインシステムに新しいフォントサイズを追加するとき、希望比率を共有ベースライングリッドへ吸着させ、各行送りトークンがグリッド単位の整数倍になるようにします。

多段組とカードレイアウト

単一グリッドに対しサイズごとの吸着行送りを計算し、段組や積み重ねカード間で本文・キャプション・見出しの行ボックスを揃えます。

印刷・PDFの縦リズム

画面のタイプスケールを固定の印刷ベースラインへ写し、CSSからPDFへのパイプラインが段落間隔をページグリッドと一貫させます。

よくある質問

nearest・up・down の違いは何ですか？

nearestは理想の行ボックスを最も近い整数グリッド行数に丸めます。upは常に切り上げ（ゆとりのある行送り）、downは切り下げ（詰め）です。行数は決して一未満になりません。

単純な行送り計算機との違いは？

単純な計算機はフォントサイズに比率を掛けるだけです。本ツールはその積をベースライングリッドへも吸着させ、サイズや段組をまたいで縦リズムを揃えます。

グリッドの単位はどう選べばよいですか？

デザイナーはよく4、6、8ピクセルのいずれかを選び、すべての余白をその数から組み立てます。同じ単位をここに入れれば、返ってくる行送りは必ずその倍数になり、1行ごとに半ピクセルずつずれることがありません。

好みの比率がすでにグリッドに合っているかは分かりますか？

分かります。理想の行送りがすでに整数の行数になっている場合は、結果でそう示されます。たとえば16pxの文字を1.5、8pxのグリッドにすると24pxで3行分となり、比率も変わりません。

スタイルにはピクセルの値と比率のどちらを使いますか？

どちらでも文字はグリッドに乗ります。合わせた行送りをピクセルで使うか、単位なしの行送りを使う場合は、その高さを文字サイズで割った実際の比率を使ってください。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/str/baseline-grid

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/str/baseline-grid \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"font_size":16,"grid":8}'

const res = await fetch("https://api.kit.forhosting.com/str/baseline-grid", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "font_size": 16,
    "grid": 8
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/str/baseline-grid",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "font_size": 16,
    "grid": 8
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/baseline-grid", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"font_size":16,"grid":8}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"font_size":16,"grid":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/baseline-grid", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "font_size": 16,
  "grid": 8
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "str.baseline_grid",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

ベースライングリッドへの行送り吸着の仕組み

理想の積がすでに整数行数と一致する場合、応答は on_grid を true にし、トークンパイプラインは書き換えを省略できます。

入力契約・応答フィールド・検証

round・ceil・floor などの別名も受け付けます。十八ピクセル・同じ八ピクセルグリッド・比率一・五では理想は二十七となり、nearest では二十四（三行、比率およそ一・三三）、up では三十二（四行）に吸着します。ルートフォントサイズが異なる場合はご自身の rem 変換と組み合わせてください。POSTでJSON本体に、必須の正の有限数を二つ送ります。font_size（寸法を決めているテキストのCSSピクセル）と grid（同じ単位のベースライン行高さ）です。任意で preferred_ratio（省略時は一・五）と、nearest・up・down の snap を送れます。数値フィールドはJSON数値でも十進文字列でもよく、欠落・零・負・NaN・Infinity は invalid_input で失敗し課金されません。成功時ペイロードは font_size・grid・preferred_ratio・snap をエコーし、吸着前の ideal_line_height を報告し、吸着後の line_height と ratio を返し、整数 grid_rows を含め、理想がすでにグリッドの倍数だったときに on_grid を立て、ドキュメント用の短い formula 文字列を提供します。例：十六ピクセルの書体を八ピクセルグリッド、希望比率一・五とすると理想は二十四でちょうど三行となり、line_height は二十四、ratio は一・五のままです。このエンドポイントは生ピクセルで動き、環境間で結果が決定的に一致します。

ベースライングリッド行送りAPIが活きる場面

フォントサイズをAPIで一括処理すれば、Storybookと視覚回帰用の安定した吸着比率表が得られます。実装は純粋な parse ティアAのため、成功した呼び出しは毎回公開の基本料金 $0.002 のみで、モデルトークンも外向き通信もありません。

技術的な質問

ベースライングリッドの行送りはどう計算しますか？

正の font_size と grid（任意で preferred_ratio、既定 1.5、および snap: nearest・up・down）を送ってください。APIはグリッドの整数倍の line_height と実効の単位なし比率を返します。

font_size と grid にはどの単位を使いますか？

両方に同じ単位を使います。通常はCSSピクセルです。両入力が同じ尺度を共有する限り計算は単位に依存しません。rem変換はルートフォントサイズに任せます。

ベースライングリッド行送りツールの料金は？

ブラウザツールは無料です。API要求は成功した呼び出しごとにプリペイドKIT残高から $0.002 です。無効な入力は課金されません。

KITの完全なドキュメントを見る →

ベースライングリッド行送り

無料で実行

計算例

ベースライングリッドへの行送り吸着の仕組み

行送りをグリッドに合わせると役立つ場面

活用例

デザイントークンとタイプスケールの生成

多段組とカードレイアウト

印刷・PDFの縦リズム

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

エラー

技術的な注記

ベースライングリッドへの行送り吸着の仕組み

入力契約・応答フィールド・検証

ベースライングリッド行送りAPIが活きる場面

技術的な質問

ありがとう