.net column

.NET開発者のためのブログメディア
ひらがな

Bootstrapで日本語を美しく表示するためのツール

2020年01月23日

未経験者でも簡単に綺麗なデザインのWebサイトを作成することができるフレームワーク、Bootstrap。実はBootstrapには、日本語を美しく表示するためのツールがあることをご存知でしょうか。この記事では、美しい日本語を表示する「jpn.css」と「Rin」という2つのツールをご紹介していきたいと思います。Webサイトを作成しようと思っている方は、参考にしていただければ幸いです。

SE
確かに、スタイルによっては日本語だと違和感を覚えるものもありますよね。
PM
そうですね。文字の表示の仕方はサイトの印象を決めるうえでとても重要なので、ぜひ最後まで読んでいってください。

日本語を美しく表示するツール1|jpn.cssとは

Bootstrapで美しい日本語を表示する1つ目のツールは、「jpn.css」。
日本語だと不格好に見えてしまうスタイルでも、カッコよく、美しく表示することができるツールです。他にも以下の特徴があります。

  • 最新バージョンであるBootstrap4に対応
  • GitHubからダウンロード可能
  • タイポグラフィ周りだけ最適化されるため、他の要素に影響を及ぼさない

では、どのくらい美しさが変わるのか、配布サイトで確認してみましょう。
(配布サイト)https://kokushin.github.io/jpn.css/

jpn.cssを無効にすると、文字が横に潰れているため文字間の空白もなく、少し読みづらい印象になっています。
jpn.cssを有効にすると、文字の間に適度な隙間ができ、スッと頭に入ってきやすい表示になっています。

配布サイトを下へスクロールするとデモサイトがあります。いくつかデモファイルがあるので、気になる方は見てみると良いでしょう。

日本語を美しく表示するツール2|Rinとは

Bootstrapで美しい日本語を表示する2つ目のツールは、「Rin」。
可愛らしい名前が印象的ですね。では、Rinの特徴を見ていきましょう。

  • Bootstrapを基に製作されているため、互換性が非常に高い
  • 既に作成しているWebサイトでも、CSSを変えるだけで簡単に適用できる
  • 構成ファイルはすべて公開済み。自分好みの設定にできる

では、どのくらい美しく表示されているのでしょうか。同じく配布サイトで確認してみましょう。
(配布サイト)https://rinhoshizo.la/

Rinのテーマを適用すれば、適度に丸みを帯びたフォントで非常に読みやすくなることが分かります。また、フォントと適度な文字間の隙間が、柔らかな印象を与えてるため、手書きでなくても温かみが伝わってくる文章になっていますね。

SE
確かに、ツールを使うとグンっと読みやすさが増していますね。
PM
そうですね。Webサイトの場合、見た目の読みやすさは特に重要ですよ。

Bootstrapで美しい日本語を表示しよう

この記事では、jpn.cssとRinという2つのツールをご紹介していきました。見た目の美しさは、Webサイトの離脱率などにも関わってきます。表示の仕方を変えるだけで印象が大きく変わりますので、ぜひこの機会に利用してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)