ウェブサイトと黄金比

Note of Float Islandのライセンスなどを販売するためのウェブサイトを現在準備中です。今回はCSSで行うレイアウト指定に黄金比の考え方を導入してみました。

黄金比というのは、1:約1.618の長方形(A4など普段見る印刷紙などもこの比率になっています。)が形として最もきれいという考え方で、パルテノン神殿の設計などにも採用されているそうです。また、黄金比の長方形の短辺を直径とする円で描かれた黄金螺旋という概念もあるようです。ツイッターやアップルのロゴにも応用されているようです。

たとえば、このエントリの下部にあるコマーシャル用の画像タグも、一応1対1.618の比率に揃えてあります。確かに、なんとなく落ち着いた縦横比率に収まっている気がしています。

とはいえ、黄金比は宗教みたいなものという意見もある(ようは普段見慣れている比率だから落ち着くに過ぎないし、ネット上の黄金比はこじつけのようなものも目立つようです。)中で、自分としてもなんとなく幅や画像サイズを決めていた中で、単純に画像やレイアウトの幅や高さを機械的に決める指標になるので便利だと感じています。ようは、おまじないみたいな側面もあるのかなと感じています。

CSSでレイアウト調整をするときにGOOGLECROMEの右クリックで最下部に表示される“要素を検証する”機能は本当に有益かつ重宝しています。

各ブロック要素やインライン要素がどのように表示されているか分かりやすく視覚的に確認できるうえに、その場でCSSをいじれるという極めて高性能なサービスを提供してくれています。CSSの表示の仕組みを理解するにもとても役立っています。