Bootstrapで日本語を使うとものすごく残念な見た目になってしまうので、タイポグラフィ周りだけ調整して残念感を和らげてくれる**「jpn.css」**というものをつくりました。
GitHub、npmにてMITライセンスで公開しております。使い方や実際のデモなどは下記のページでご確認ください。
https://kokushin.github.io/jpn.css/
技術的なお話
このままではただの宣伝になってしまうので技術的なお話を少々...
フォントは「游ゴシック」を指定
jpn.cssで指定しているフォントは以下のような感じです。
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic", YuGothic, YuGothicMedium, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !default;
「游ゴシック」はWindows, Macともに新しいOSバージョンに共通で搭載されている美しい日本語フォントです。ただ、Windowsだと以下のようなバグがあるようです。
- IE10, 11でフォントの下部に余分な空きができてしまう
- Chromeでみた際にウェイトが細くなってしまう
上記の1の問題は、IE10, 11だけ「メイリオ」を適用させるという方法で解決しました。（参考ページ）
2の問題に関しては、Windowsには「游ゴシック Medium」を指定してあげることで解決できました。（参考ページ）
英語に関しては「Helvetica Neue」だけフォントの太さを調整しています。
HTMLの言語が日本語のときだけスタイルを当てる
jpn.cssを使っている時点で日本のページだとは思いますが念のため。
下記のように属性セレクタを使うことで分岐できます(要SASS)。langがja以外だった場合はBootstrap標準のスタイルが適用されます。
これはわりと多言語対応の案件で使ったりするテクニックです。
.text {
/* 標準のスタイル */
font-size: 1rem;
[lang=ja] & {
/* 他の言語の場合にスタイルを上書き */
font-size: .875rem;
}
}
npm script を使ってみた
今まではgulpなどタスクランナーでSASSのコンパイルを行っていましたが、今回はnpm scriptでSASSのコンパイル部分を書いてみました。
手順としては node-sass をインストール後、package.jsonに下記のscriptを追加します。
"compile": "node-sass --include-path scss [ソースファイル(*.scss)のパス] [書き出すファイル(*.css)のパス] --output-style expanded"
上記はscssファイルをcssへコンパイルして書き出すというシンプルなタスクです。
末尾の「--output-style expanded」はオプションで、CSSの整形方法を指定できます。
なので、リリース時など圧縮して使用したい場合はオプションを「--output-style compressed」として、buildタスクを作っておくと良いでしょう。
あとは、watchですね。
*.scssファイルを監視し、変更が加わったら勝手にコンパイルしてくれるようにします。
末尾に追加された「-w」というオプションがwatchのオプションになります。
"dev": "node-sass --include-path scss [ソースファイル(*.scss)のパス] [書き出すファイル(*.css)のパス] --output-style expanded -w"
上記コマンドが実行されている間は自動でコンパイルしてくれます。Ctrl+Cで解除できます。
これで「開発用のタスク」「リリース用のタスク」をつくることができました。
他にもシェルスクリプトが使えたり、もうちょい複雑な処理をかけたりするので、使いこなせるようになりたいですね。
今後の予定
ドキュメントページにもあるように、Bootstrap以外にも対応するフレームワークを増やしていきたいです。
あとは、全てのパターンでテストしきれていないので実際に使ってみて随時アップデートしてく必要がありそうです。
フォントサイズやマージン感は一応全て均等に調整しているつもりではありますが、どうしてもここが気になる・こうした方が良いんじゃない？などあれば是非、プルリクエストをいただけますと幸いです。