『Day5』 #記録メモ

2019年8月6日 00:09

・Day5の内容　

『Progate HTML & CSS 上級編』-レスポンシブデザインを学ぼう-

レスポンシブ対応は、個人的に制作しているWebでうまく適用できないことがあり、苦手意識があったので、ちゃんとProgateで1から学ぶことができて良かった！

◆メディアクエリとは？
プラウザの画面サイズに応じてCSSのスタイルを設定できる手法

◆メディアクエリの書き方
＠media(条件){.....}
⚠️(条件)の部分の最後に；(セミコロン)は付けない！！
条件には、最大幅→max-width・最小値→min-widthを指定できる

↓ブレイクポイントが1000px以下の時に適用される設定

＠media(max-width:1000px){
   h1{
     color:blue;
   }
 }

◆box-sizing: border-box;を指定する
→要素の幅合計にpaddingとborderが含まれ、追加した時に生じるレイアウト崩れを防ぐ

▶︎border-boxを全ての要素に対して指定することでレイアウト管理しやすくなる
→＊(アスタリスク)を使用してHTML全体にbox-sizing: border-box;を適用させる

*{
    box-sizing: border-box;
}

◆スマートフォンやタブレットでの閲覧でメディアクエリを正しく機能させるためにviewportの設定をする
▶︎<head>タグ内に設定する

◆responsive.cssを読み込むときはviewportよりも下に記述する

◆親要素の高さ＝子要素を包む高さ！
→⚠️子要素全てがfloatだと、親要素の高さが０になってしまう！！

◆子要素全てがfloatでも、親要素が高さを持つよう設定するには.....
→空タグとclearでfloatを解除する

◆要素の表示/非表示設定
要素を非表示→display: none;
非表示にした要素を表示させる→display: block;

読んでくだりありがとうございます。頂いたサポートはスキルアップのために大切に使わせていただきます！