学校が始まって一ヶ月。

教わることで真っ白に降り積もったWebの知識。
使っていない日陰で静かに溶けてしまっていたりはしないだろうか？
ふと不安になった折に良いサイトを紹介されたので、
苦手意識の消えないCSSについて、もう一度初心者の視点から見直して見ようと思う。


WebDesignRecipes (http://webdesignrecipes.com/)の「初心者の頃ハマったCSS 目次」を見て
自分の知らないことをピックアップしていこう。


  • フォントサイズの指定に"絶対値での単位指定"方法がある。

    • 学校で主に教わるのはpx,em,リファレンスから知ったのが%。全て相対値での指定方法だった。 ブラウザは見る人の拡大・縮小に合わせて、今後も相対値でのして方法を使おうと思う。 実用性に乏しい知識に感じるので、今は存在だけ知っておくという認識で良いと判断した。


  • line-heightに相対単位を指定すると表示がおかしくなることがある。

    • 対処法としては単位を外して数値のみにすること。


  • テキスト部分のピクセル数計算方法

    • font-size(px)*line-height(倍数,単位なし)*行数 画像のベースラインに合わせるには出た数値から(-fontsize/4〜-fontsize/2)をすると綺麗に揃う。


  • 画像と見出しを上に揃えると、見出しが落ちているように見える。

    • (見出しのフォントサイズ/6)分のトップマージンを引く。


  • フロート解除というのが必要になることがあるらしい。

    • 対策１：clear:bothやclear:(フロート方向)で解除できるが、
    clearを指定している要素に対しては、margin-topが効かなくなる可能性がある。

    対策２：br要素にmargin-topをつけると有効にすることが出来る。けど
    ブロックレベル要素の間にインライン要素入るの、ウチの先生嫌っていたからなぁ…いいのかしら？
    セマンティックコーディングを意識している私たちにとってはズルいやり方に見える不思議。

    対策３：clearfixという便利なCSSもあるらしい。魔法級に便利なのだそうだ。

    対策４：親要素にOverflow:hiddenを指定する。
    学校ではこれが推奨されている。

今回はここまで！


―オマケ―

皆が使うけど私が知らないIT用語

  • ペルソナ………(Persona)：架空の顧客像。Webで言えば作ったHPを見に来る人、注文してくれる人を言うのだろう。
  • ガジェット……(gadget)：目新しい道具、面白い小物、といった意味の英単語。Webコンテンツに対しても使うのかな？
  • マージ…………(merge)：「合併する」「融合する」といった意味の英単語。Webでは「セルのマージ」などと使わた。