Bootstrapで日本語表示が綺麗じゃないのでjpn.css導入してみた

Bootsrapは素晴らしいCSSフレームワークなのですが、どうしても日本語文字列に対しては不格好です。見だしタグはフォントウェイトがかからず、全体の文字も横に潰れ気味のため文字間の空白がなく、読みづらい印象です。

そこでBootstrapを使ったまま、日本語を綺麗に表示する「jpn.css」を使ってみることにしました。

jpn.cssの設定方法

まずはhttps://kokushin.github.io/jpn.css/からデータを取得しましょう。npmを使っていなければGitHubからzipデータをダウンロードすることができます。

GitHubからzipをダウンロードした場合には、\dist\bootstrap\のフォルダにjpn.min.cssがあるのでこれを使用します。(未圧縮版のjpn.cssも同梱されています。)

次にjpn.min.cssを適応したいHTMLから呼び出します。

HTML

<link rel="stylesheet" href="./jpn.min.css">

これだけでjpn.cssが使用できますが、lang属性を指定していない場合は”lang=ja”を指定しましょう。

HTML

<html lang="ja">

jpn.cssの適応前と適応後の違い

jpn.cssを使うと「見出しタグはくっきり」と「文字間隔が調整され見やすく」なっているのがわかります。

Related Posts