絶対他力

凡人の凡人による凡人のためのWebサービス開発

normalize.cssを適用しました_PWDD-160117

   

チームPocoです。
ポコ帳ワイヤーフレーム開発日記(PWDD)です。

今回から、CSSによる見た目の調整に入ります。
まず、「normalize.css」というCSSを自作HTMLに適用させます。

ドットインストールの「CSSレイアウト入門」で紹介されていたのですが、ブラウザによる差を取り除く事が目的です。

ブラウザ(IEとかChromeとかFirefoxとか)は、それぞれ独自のCSSを持っており、そのCSSが自動的に適用される仕組みになっています。
そのため、それをキャンセルしておかないと、何のブラウザを使っているかで見た目が変わってしまう恐れがあるようです。

具体的な作業内容は、下記の通りです。

  1. まず、↓サイトから「normalize.css」をダウンロード
    Normalize.css: Make browsers render all elements more consistently.
  2. その「normalize.css」をHTMLファイルと同じ場所に置く
  3. ↓のようにHTMLを編集して、CSSを適用

 

その結果、スクリーンショットは↓のようになりました。
※デベロッパーツールの設定:iPhone6

↓↓↓↓スクリーンショット↓↓↓↓
HTMLスクリーンショット↑↑↑↑スクリーンショット↑↑↑↑

見た目は、normalize.css適用前の前回の状態とほとんど変わりません。
文字が小さくなり、文字間隔もやや狭くなった…ぐらいでしょうか?

恐らく、他にも何か変わっているのでしょうが、詳しい事はよく分かりません。
次回以降、この状態をベースとして作業を進めていきます。

本日のPWDDは以上です。

 - PWDD