Material Design Liteをダウンロードして、日本語テキストをあててみた

2015/07/16 HTML5  このエントリーをはてなブックマークに追加


Googleのマテリアルデザインを使ったWebサイトが作れるテンプレート(CSS/JS/HTMLコンポーネント)「Material Design Lite」が公開されたので、早速ダウンロードし、テキストを日本語にしてみたりしました。


Material Design Lite
http://www.getmdl.io/



ほら、導入するならテキストは日本語である可能性が高いわけで、そうなるととりあえず日本語入れたらどうなるか確認しないとね。

とりあえずメニューとかを全部日本語に差し替える。メニューの並び順やメニュー名はよくある管理画面っぽい感じのにしてみた(イメージ的に確認しやすいため)


保存→表示テスト→文字化け!!


UTF-8に文字コードを変換し直す。ついでに読み込みファイルもも一通り確認する(海外発テンプレートあるあるなので、この辺は割愛します)





なんか、ださい。


こういう海外発の、英語ベースのテンプレートって、日本語を入れると途端にもっさりするのは何でなんだろう……おそらくフォントのバランスの問題なんだろうけど。
とりあえずデフォルトフォントがどう見てもMSゴシックなので、ここを何とかしたい。
CSSを見ると、

font-family: "Roboto","Helvetica",sans-serif;

になってる。
「Roboto」はGoogleがAndroidのシステムフォントとして使っているもの。
オープンソースとしてGitHubで公開もされているし、GoogleFontにもきちんと存在している。

しかし、日本語フォントではないので、メイリオさんを当ててみる。




うーん、もう少しフォント見てバランス整えた方が良いかもですが、とりあえずDashboardのテンプレートに日本語あてるとこんな感じです。

コメント

*
*

<< プロダクションEXPOに行きました | Material Design Liteの文字色・背景色変更用class名と色の見本帳 >>