HTMLの最初のCSS

2017-08-23

ここのところずっとCSSの勉強とかしています、氷翠です。

サイトを作っていて、現在ではパソコンだけでなく、スマートフォン、タブレットといった機器でもインターネットを使ってWEBサイトを閲覧することが出来ます。

氷翠が仕事上で作っているサイトでも、やはりどんどんスマートフォンでのアクセスが増えてきていて、ここはやはり専用のデザインでもって見やすい形にしたほうがいいのではないだろうかと、いろいろと勉強しています。

まず、思ったのが、iOSの表示のされ方。

今まで気にしていなかったのだけど、氷翠は基本的にゴシック系のフォントを使います。ほとんどの人がそうかもしれませんがｗ
で、HTMLタグに対してゴシックの指示をしています。

ところが、Macで見てみると、明朝になっています。

Macの特性でしょう、なかなか指示に従ってくれません。
Macのsafariでようやくゴシックに出来たと思ったら、iOSつまり、iPhoneの方では明朝のまま。

でも、氷翠としてはどうしてもゴシックにしたい。

ということで調べて出てきた結果

html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}

と、こんな感じで指定して上げると、iPhoneでもゴシックになった。

今後はスマートフォンを意識した作り方をしていかないといけないので、まだまだ調べないと行けないことはたくさん出てきそう……