Webエンジニア目指して#10

CSS Progate HTML

どうも買った曲面ディスプレイが最高マンです　没入感が半端ねえ

 

勤め先で愛用しているマウスのElecomのEX-GをMacにも導入しました。

トラックパッドめっちゃ便利だけど8ボタンマウスの作業性には敵わないね

もちろん両刀でいきます

 

では前回に引き続きHTML&CSS上級です

 

HTML

  • <meta name="viewport" content="width=device-width,initial-scale=1">
    レスポンシブデザインのときの呪文。端末の画面サイズを認識させてるんですかね？少し調べた感じでは高解像度のスマホが出てきたおかげでコンテンツを表示させるサイズ情報と実際の端末のサイズが噛み合わずにスマホ用のブレイクポイントを下回っちゃうことで、表示がおかしくなるのを防ぐ記述みたいです。

CSS

  • box-sizing:border-box;
    width:25%とかにしてるのにpadding入れると100%からはみ出る現象の解決策。
    borderとpaddingがwidthに含まれます。
    *{box-sizing:border-box}とすると、全ての要素にCSSを適用させます。よく使われるらしい

  • レスポンシブ用CSSの分離
    分離させた方がわかりやすいとのこと。おっしゃる通り。
    HTMLで読み込む際にはviewpointより下の行で記述する必要あり

  • clear:left;
    float使った時にheight指定しないといけなくてなんかなあと思ってましたが、
    floatしたい要素が終わったところで空のdivタグを置いてこいつを使うことでちゃんと高さを自動で合わせてくれるみたいです。

  • max-width:1170px
    width:100%;としたときに最大の幅を指定することで、大きな画面で要素が広がり過ぎるのを防げる

  • display:none;
    要素を非表示にする。メディアクエリごとに表示するものを変えたりする時に使う


以上で上級終わり！HTML&CSS終了！と言いたいとこですがまだ道場編があります

中級は謎の判定NGでつまづいてましたが盆も明けて質問のメールが帰ってきたので再開できます...opacityを単体で指定するところをまとめて指定していたからNGだとか。見た目変わんなくない？

ひと段落ついたので今日はここまで。