on:2015年5月25日sponsorsBootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。-GitHub日本語フォントは、たくさんのフリーフォントがあります。-Bootstrapでの日本語表示最適化Honokaの利用方法Honokaの特徴Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBootstrapを使って作成されたサイトであればCSSファイルを書き換えるだけで簡単に利用できます。Bootstrapは残念なことに、フォント指定やサイズ指定が日本語に最適化されているとは言えません。Honokaでは文章や見出しをはじめ、テキストを使用する箇所に対してさまざまなアプローチを行い、より美しく日本語を表示させています。Bootstrapのデフォルトとどのように変わるか見てみましょう。X+Chromeでの日本語表示:HonokaHonokaのデモデモページでは、Bootstapで用意されているさまざまなコンポーネントで日本語がどのように表示されるか確認できます。デモページ:リストやパネル他にもナビゲーションやボタンなども日本語表示の最適化が行われています。最適化にあたり、作者様からコメントをいただきました。フォント指定については「本文」と「見出しやボタン」の部分で若干異なっています。本文については可読性の高い游ゴシックを優先的に指定しているのに対し,見出しやinput/buttonなどの部分には游ゴシックをあえて指定せず,視認性の高いメイリオやヒラギノ角ゴを使用するなど差別化を行っています。本文と見出しは、下記のようにスタイルが定義されています。1.2;}また、フォントの指定以外にも工夫されています。「Bootstrapっぽさ」をなくすために,その一番の原因であろうと考えられるナビゲーションバー部分については大幅に改変することでその目的を達成しています。他にもボタンなどに用いられる基本色の指定を本家Bootstrapより若干鮮やかにしています。主な利用方法は、3通り。HonokaをベースにWebサイトを作成。Bootstrapを使って作成されたサイトのCSSファイルをHonokaに書き換える。Compass(SASS)のソースコードが公開されているので、それを使用して作成する。Honokaは、MITライセンスで利用できます。