pandaNote

全てのWEBサイトは見つけてもらうために存在する

webで縦書き&rubyのマスター

f:id:pandanote:20151204180211p:plain

雨ニモマケズ

 

最近よく見かけるオシャンティなデザイン、縦書き多いよね。画像にすると検索エンジンが読めないけど、これなら大丈夫。縦書きはやっぱ明朝でしょ、というわけで明朝体の指定も習いました。

出来るだけ綺麗なものから順に指定していくこと。先生から以下の順番で習いました。

 

font-family:
"ヒラギノ明朝 ProN",
"HG明朝E",
"MS P明朝",
"MS 明朝",
serif; 

 

Macの人は "ヒラギノ明朝 ProN" があてられると思います。 書体に恵まれないWinの人々が普段どのような書体で過ごしているのかよくわからないのですが、実際には恵まれない人々が9割ということで、ぷぷ、"HG明朝E"とか "MS P明朝"になるのかなー。そういうの考えるとWEBフォントを使うとか、画像にするとか、デザイン性を重視する場合は考えないとね。しかもね、わたしはMacで Safari/Chrome/Firefox の3つのブラウザを使っているけど、結局ブラウザによって書体も変わるのね。

 

 f:id:pandanote:20151204180236p:plain

一番美しいとわたしが思ったのはSafariで、これはSafariのデフォルトの書体があてられてるみたいです(理由わかんない/書体名も不明)。

 

f:id:pandanote:20151204180222p:plain

f:id:pandanote:20151204180234p:plain

"ヒラギノ明朝 ProN"があてられたのがChromeFirefox。まぁ綺麗。

 

 

 f:id:pandanote:20151204183518p:plain

そんでこれはWinのIE9です。めんどくさくて写メで失礼。ルビの部分の漢字がずれてるし、どうなの。。

 

要素検証でどの書体が使われたのか判るのでチェケラ!

 

 

それでも縦書きがやっぱ流行の兆しらしく、縦書きWebデザインアワードなるものが開かれるそうです。誰か参加してみてね。

tategaki.github.io

 

 

f:id:pandanote:20151204180225j:plain

これは雨ニモマケズの英語の絵本。ローカル用にデータ作ったので表紙の絵を使わせてもらったけど、サーバーにUPしたのは別の写真です。

宮沢賢治は一番好きな作家です。

 

 

その他、今日は昨日の「パスタ」に「戻るボタン」をつけたりしましたん。

今度アップし直す。