「高度合成数」が鍵
「Bootstrap」のグリッドはなぜ10個ではなく12個なのか その数学的理由
レスポンシブWebサイトの作成で主流のフレームワーク「Bootstrap」は、12カラムのグリッドシステムを採用している。それはなぜなのか。そこには幾つかの数学的な理由がある。
グリッドシステムは、グリッド（格子）に沿って要素を配置することで、異なる画面サイズに合わせたページレイアウトやデザインを、単体のHTMLファイルで実現する仕組みだ。Webサイト開発フレームワーク（部品群）「Bootstrap」のグリッドシステムは、画面の横幅を12分割する。
「さまざまな国が10進法を採用しているように、Bootstrapのグリッドシステムも10分割する方が合理的ではないのか」。そう疑問に思う人もいるだろう。実は、10分割は合理的ではない。それには数学的な理由がある。その理由を解説しよう。
理由1．12は「高度合成数」である
数学では、12は「高度合成数」に分類できる。高度合成数は約数が多い自然数を意味する。厳密には自然数のうち、自身より小さいどの自然数よりも約数の個数が多い数を指す。12の約数は1、2、3、4、6、12であり、12は次の方法で均等に分割できる。
- 12分の1に分割
- 6分の1に分割
- 4分の1に分割
- 3分の1に分割
- 2分の1に分割
これに対して10は、3分の1にも、4分の1にも、6分の１にも均等に分割できない。12のこうした分割のしやすさは、Webデザインで重要な意味を持つ。
理由2．レスポンシブレンダリングしやすい
BootstrapはWebページをレンダリングする際、まずビューポート（表示領域）の大きさを参照する。PCのビューポートはタブレットより大きく、タブレットのビューポートはスマートフォンより大きい。
次にBootstrapは「レスポンシブレンダリング」を実行する。これは全てのコンテンツをページの左から右に配置するか、あるいは領域に合わせて2分の1、3分の1、4分の1のいずれかにコンテンツを分割するかを判断してレンダリングする仕組みだ。レスポンシブレンダリングにより、BootstrapはデスクトップPCやタブレット、スマートフォンといったさまざまなデバイスでWebページを美しく表示できる。
同じ理屈から、カナダのドーナツチェーンTim Hortonsは、ドーナツを10個単位ではなく、ダース（12個）単位で販売している。1ダースのドーナツは、2、3、4、6、12人で均等に分けることができるが、10個パックではそうはいかない。
「時間」や「円」と同様の理屈
Bootstrapのグリッドがなぜ12カラム（列）なのかという疑問は、われわれがしばしば思い浮かべる「なぜ1時間は60分なのか」「なぜ円は360度なのか」という疑問の答えでもある。12と同じく、60と360はいずれも高度合成数だ。60には12個の約数があり、360には24個の約数がある。これに対し、10進法で切りが良い100の約数は9個、400の約数は15個、500の約数は12個だ。これらに比べて60と360は分割しやすいと言える。
1,000,000より小さい高度合成数は、120、2,520、5,040、55,440、720,720など38個ある。われわれがこれらの数を日常目にすることはあまりない。だが12、60、360という高度合成数は、われわれの日常生活に広く浸透している。その中でモダンなレスポンシブWebサイトのデザインで重要な役割を果たしているのが12というわけだ。
TechTarget発 先取りITトレンド
米国TechTargetの豊富な記事の中から、最新技術解説や注目分野の製品比較、海外企業のIT製品導入事例などを厳選してお届けします。
Copyright © ITmedia, Inc. All Rights Reserved.
TechTarget発 先取りITトレンド
米国TechTargetの豊富な記事の中から、最新技術解説や注目分野の製品比較、海外企業のIT製品導入事例などを厳選してお届けします。
この記事の著者
関連記事
新着ホワイトペーパー PR
-
製品資料
[株式会社MatrixFlow] 「物流リソース最適化」ガイド：人員・配車・傭車を出庫依頼の確定前に決めきる -
製品資料
[株式会社キーエンス] なぜRPA導入は頓挫する？ シナリオ作成の壁を乗り越える解決策とは -
製品資料
[株式会社セールスフォース・ジャパン] 「CRMは設計と無関係」は本当か？ PLMとの融合で実現する高速開発 -
事例
[日本ヒューレット・パッカード合同会社] AIエージェントの時代にどう備える？ 「新たな働き手」を支える3要素とは -
製品資料
[日本ヒューレット・パッカード合同会社] “横並びの自動化”から脱却、AI活用で生産性と競争力を高める秘訣
こんなメディアも見られています
TechTargetジャパンに関連する情報をお探しであれば、こちらのメディアもお役に立てるかもしれません。
ベンダーコンテンツ PR
From Informa TechTarget
SpecialPR
アクセスランキング
-
1
なぜ「全社配布Copilot」は使われないのか？ 失敗に学ぶAI定着
-
2
法務と開発者で「言葉が通じない」問題 トヨタやソニーが語るOSS管理の真実
-
3
なぜ「Gemini 4 Argon」は出遅れたのか？ Googleが狙う“逆転のシナリオ”
-
4
損保ジャパンはなぜ「COBOL」を捨てなかったのか？ 脱メインフレームの真相
-
5
情シスの約8割が転職や退職を意識 調査で分かった“辞めたくなる最大の理由”
-
6
ChatGPTは“検索しまくり”でGeminiは“淡泊”？ データが明かすAIの裏側
-
7
情報漏えいはなぜ繰り返されるのか 今すぐ見直すべき「境界」
-
8
「Wi-Fi 7」経由でWindowsが乗っ取られる？ 最高権限奪取の恐怖
-
9
「結局使わなくなる」Microsoft 365 Copilotを半年で定着 キリンの3施策
-
10
「中堅・中小企業のネットワーク・セキュリティ運用実態」に関するアンケート
ホワイトペーパーランキング PR
-
1
不審メールの経路や見せ方に変化？ 2026年夏の3事例から見えた動向と対処方法
-
2
家庭用Wi-Fiルーターの業務利用は危険？ 避けるべき理由と具体的な対策
-
3
Microsoft 365を安全に運用 うっかりミスやサイバー攻撃に備えるデータ保護術
-
4
財務部門がAIを最大限に活用する方法 無駄のない戦略的リーダーシップへの道
-
5
LLMが兵器化？ 元FBI高官が鳴らす警鐘とセキュリティツール統合のポイント
-
6
「オンプレミス回帰」せざるを得ない“合理的な理由”
-
7
なぜRPA導入は頓挫する？ シナリオ作成の壁を乗り越える解決策とは
-
8
生成AIを開発に導入しても効果が見えない？ 実証実験で分かった成果と課題
-
9
経産省DX指針から読み解く、受発注業務デジタル化ロードマップ
-
10
HDDを使わない「SSDオンリー」が無謀なのはなぜ？
TechTargetジャパン SNS
@techtarget_itmをフォロー
インフォメーション
注目情報をチェック
TechTargetジャパンをフォロー