oshushichangのブログ

プログラマになるため、勉強した内容を日報として家庭用esaに記録し、旦那からFBを貰っている日々を綴っています。

0703日報

日報

やったこと

やったこと ないよう さんこう
Reset CSS について知る HTML初心者が知っておくべきリセットCSS と3つのポイント | 3streamer blog
Reset CSS について知る ResetCSS と Normalize.css の違い リセットcssとNormalize.cssの特徴と違い - darudaru
CSS 課題

こまったこと・わかったこと

デフォルト CSS はブラウザ毎に差異がある

  • 文字の種類や、行間等が違う
  • 差異があることを理解しておく
  • まずは各ブラウザが持っているデフォルトの CSS を一度リセットする

    • reset.css と呼ばれる
    • 一度リセットして、まっさらな状態から CSS を書き始める
    • : ユニバーサルセレクタ(今は使わない)
  • 各ブラウザが持っているデフォルトの CSS を活用しながら、ブラウザごとに異なる部分を補正する

    • Normalize.cssと呼ばれる

float: left; を指定すると下の要素と被る事件

f:id:oshushichang:20180712182451p:plain

  • パンくずリストfloat: left;を指定すると、下の要素(広告)が被る。
  • ググると解決策にclearfixclear が出てきたが、Dash でclearfixが出てこず、古い情報が多かったので、clearで、下の要素(広告)に指定したところ被らなくなった。
  • とりあえずclear: left;を指定したが、both rightでも変わらないと思うが、どれを指定したらいいのだろう?

ひとこと

  • 今日から CSS Tutorial に手をつけた。今の所順調だが、三角形も作らないと...

旦那より

clear だけだとだめなパターンがあって、clear 以外にもいろいろ組み合わせたのが clearfix なので、Dash では出てこないんですよ〜。clear だけでも大丈夫なパターン、だめなパターンを考えるのは大変だから基本は clearfix 使うかな。

今日のまとめ

  • float を使わずに flexbox を使えば clear に悩まされることはないッ!