メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
デザイン・CSS
/
Perfect Fourth スケール
▧
Perfect Fourth スケール
design/css-typography-scale-perfect-4th
Perfect Fourth 1.333 を基準に base から 5x までの rem 段階を一覧表示します。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
Perfect Fourth スケールでは、Perfect Fourth 1.333 を基準に base から 5x までの rem 段階を一覧表示します。
関連する観点として Perfect Fourth スケール、perfect 4th scale、CSS を確認し、結果をコピーして別の作業に使えます。
項目
内容
base
1.000 rem
1x
1.333 rem
2x
1.777 rem
3x
2.369 rem
4x
3.157 rem
5x
4.209 rem
使い方
Item 列で base から 5x までの階層を確認します。
Content 列の rem 値を、本文、h3、h2、h1 の候補として読み替えます。
1.333 倍は文章ページで見出しの差を出しやすいので、長文の階層に合わせて試します。
UI が詰まる場合は Major 3rd、もっと強い表示差が必要なら Golden と比較します。
入力例・出力例
INPUT
2x
OUTPUT
1.777 rem
1.333^2 を小数3桁で丸めた表示です。
INPUT
5x
OUTPUT
4.209 rem
1.333^5 を小数3桁で丸めた固定表の値です。
よくある利用シーン
ブログや技術ドキュメントで、本文から h1 まで自然な差を作るとき。
Major 3rd では控えめすぎ、Golden では大きすぎる見出し体系を探すとき。
長文ページの h2/h3 が本文に埋もれないように rem token を調整するとき。
複数の見出し階層を使う CMS テーマの基準値を決めるとき。
結果確認のポイント
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
Perfect Fourth スケール、perfect 4th scale、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
Perfect Fourth スケールの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
Perfect Fourth スケールの倍率 1.333 はどこから来ていますか?
音楽の完全四度(Perfect Fourth)に対応する周波数比 4:3 ≈ 1.333 をタイポグラフィに応用したものです。16px ベースなら 16 → 21.3 → 28.4 → 37.9px と進み、本文と見出しのコントラストをほどよく保ちながら読みやすい段階を作れます。
Perfect Fourth は長文コンテンツに向いていますか?
はい。倍率が Major Third(1.25)より大きく黄金比(1.618)より小さいため、記事や文書など複数の見出し階層が並ぶコンテンツで各レベルの差を視覚的に明確に保てます。Web 上の長文ブログや技術ドキュメントで採用例が多いスケールです。
生成されたサイズをレスポンシブに切り替えるには?
CSS clamp() を使い clamp(1rem, 2.5vw, 1.333rem) のように最小・最大をスケール値に合わせると、ビューポート幅に応じてサイズが滑らかに変化します。メディアクエリなしでフルードタイポグラフィを実現できます。
関連ツール
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。
Material Elevation
Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。
accent-colorが効く要素
CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。
CSS角度単位
CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。
animation-direction
CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。
animation-fill-mode
CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。