Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka

Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。

単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。

Honoka

Honoka
Honoka -GitHub

日本語フォントは、たくさんのフリーフォントがあります。

Honokaの特徴

Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBootstrapを使って作成されたサイトであればCSSファイルを書き換えるだけで簡単に利用できます。

サイトのキャプチャ

Bootstrapは残念なことに、フォント指定やサイズ指定が日本語に最適化されているとは言えません。Honokaでは文章や見出しをはじめ、テキストを使用する箇所に対してさまざまなアプローチを行い、より美しく日本語を表示させています。

サイトのキャプチャ

Bootstrapのデフォルトとどのように変わるか見てみましょう。

サイトのキャプチャ

Win7+IE10での日本語表示:Bootstrap

サイトのキャプチャ

Win7+IE10での日本語表示:Honoka

サイトのキャプチャ

OS X+Chromeでの日本語表示:Bootstrap

サイトのキャプチャ

OS X+Chromeでの日本語表示:Honoka

Honokaのデモ

デモページでは、Bootstapで用意されているさまざまなコンポーネントで日本語がどのように表示されるか確認できます。

サイトのキャプチャ

Honoka デモページ

サイトのキャプチャ

Honoka デモページ:見出しや文章

サイトのキャプチャ

Honoka デモページ:リストやパネル

他にもナビゲーションやボタンなども日本語表示の最適化が行われています。

Honokaのアプローチ -Bootstrapでの日本語表示最適化

日本語表示の最適化にあたり、作者様からコメントをいただきました。

フォント指定については「本文」と「見出しやボタン」の部分で若干異なっています。本文については可読性の高い游ゴシックを優先的に指定しているのに対し,見出しやinput/buttonなどの部分には游ゴシックをあえて指定せず,視認性の高いメイリオやヒラギノ角ゴを使用するなど差別化を行っています。

本文と見出しは、下記のようにスタイルが定義されています。

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "游ゴ
シック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
"メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.42857;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラ
ギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
sans-serif;
  font-weight: 300;
  line-height: 1.2;
}

また、フォントの指定以外にも工夫されています。

「Bootstrapっぽさ」をなくすために,その一番の原因であろうと考えられるナビゲーションバー部分については大幅に改変することでその目的を達成しています。他にもボタンなどに用いられる基本色の指定を本家Bootstrapより若干鮮やかにしています。

Honokaの利用方法

主な利用方法は、3通り。

  • HonokaをベースにWebサイトを作成。
  • 既にBootstrapを使って作成されたサイトのCSSファイルをHonokaに書き換える。
  • Compass(SASS)のソースコードが公開されているので、それを使用して作成する。

Honokaは、MITライセンスで利用できます。

top of page

©2017 coliss