レスポンシブWebサイトの作成で主流のフレームワーク「Bootstrap」は、12カラムのグリッドシステムを採用している。それはなぜなのか。そこには幾つかの数学的な理由がある。
グリッドシステムは、グリッド(格子)に沿って要素を配置することで、異なる画面サイズに合わせたページレイアウトやデザインを、単体のHTMLファイルで実現する仕組みだ。Webサイト開発フレームワーク(部品群)「Bootstrap」のグリッドシステムは、画面の横幅を12分割する。
「さまざまな国が10進法を採用しているように、Bootstrapのグリッドシステムも10分割する方が合理的ではないのか」。そう疑問に思う人もいるだろう。実は、10分割は合理的ではない。それには数学的な理由がある。その理由を解説しよう。
数学では、12は「高度合成数」に分類できる。高度合成数は約数が多い自然数を意味する。厳密には自然数のうち、自身より小さいどの自然数よりも約数の個数が多い数を指す。12の約数は1、2、3、4、6、12であり、12は次の方法で均等に分割できる。
これに対して10は、3分の1にも、4分の1にも、6分の1にも均等に分割できない。12のこうした分割のしやすさは、Webデザインで重要な意味を持つ。
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製品導入事例などを厳選してお届けします。
Copyright © ITmedia, Inc. All Rights Reserved.
お知らせ
米国TechTarget Inc.とInforma Techデジタル事業が業務提携したことが発表されました。TechTargetジャパンは従来どおり、アイティメディア(株)が運営を継続します。これからも日本企業のIT選定に役立つ情報を提供してまいります。
メルマガをきっかけにした商品購入、B2B商材ではどれくらいの人が経験?
ラクスが「メルマガに関する調査レポート」を公表した。メルマガ経由のサービス購入や資...
「ECプラットフォーム」売れ筋TOP10(2025年2月)
今週は、ECプラットフォーム製品(ECサイト構築ツール)の国内売れ筋TOP10を紹介します。
日本テレビの運用型テレビCM「スグリー」、プレミアパートナー企業9社を認定
日本テレビは、テレビCM枠をWebで購入できるサービス「スグリー」のプレミアパートナー9...