30daysトライアルの要点まとめ　Day5

こんにちは、ワタリビト（wataribito）です。

30daysトライアルも本日で5日目を迎えましたね。

今日でProgateもHTML＆CSSの上級編が終わり、たった5日でそれっぽいものがつくれる知識がたまってきました。

あと25日でどこまで成長できるのか、ちゃんとブログを書き続けられるのか（笑）自分でも楽しみです?

こちらも30daysトライアルの振り返りです?

30daysトライアルの要点まとめ　Day3

09/11/2019

30daysトライアル要点まとめ　Day4

09/12/2019

DAY5.『Progate HTML & CSS 上級編』
プログラミング学習サイトProgate( https://t.co/2CJ1eEz9Hd )で、レスポンシブなサイトを作るためのコーディングを学びます！

DAY5は上級編を終わらせましょう
メディアクエリはもちろん、box-sizingも超重要です‼️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/ZiqYZeJvuj

— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月12日

Day5の課題内容

5日目の課題内容はDAY5.『Progate HTML & CSS 上級編』です。

具体的な内容は以下の通り。

上級編ではスマホやタブレット、PCなど様々な画面の大きさでも見やすいレイアウトに自動で調節してくれる「レスポンシブ」の実装を学習します。

Web制作はPCでの作業なので見た目もPCにあわせがちですが、読者はスマホで見ている人のほうが数が多いともいわれています。

どちらにしろ、見やすいレイアウトでないと読者はストレスを感じて離脱してしまいますね。

レスポンシブ実装の知識はWeb制作の場では必須の知識なので、しっかり身に着けましょう。

（Progateはこちらから）

DAY5.『Progate HTML & CSS 上級編』完了しました

上級編で一番のキモとなったのはbox-sizingの理解でした

「paddingやmarginを含めて指定した数字でサイズを調整してくれる」というルールがしっくりこないけど、理解は必須の項目なので、実際に手を動かして理解に努めます?#30DAYSトライアル https://t.co/MiBO9o0jSp

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月13日

Day5の要点まとめ　ーメディアクエリについてー

メディアクエリとは、レスポンシブデザインを設定する際に必須のCSS記述です。

画面の大きさに合わせてレイアウトをきれいに遷移できるなど、Web制作には必須の技術ですね。

複雑な部分はありますが、決して難しいものはないので、しっかり身につけたいポイントです。

1章から3章　レイアウトの崩れを修正するメディアクエリについて

・スマホ、PC、タブレットなど大きさが違う画面で見てもデザインをきれいに保つ。

・メディアクエリを記述してレスポンシブデザインを設定する。

・基準値＝ブレイクポイントの数値の最大値と最小値を設定する。

⏩maxは最大値でminは最小値

個人的にメディアクエリの記述で勘違いしやすかった部分?

max=最大値、この数値以下
min＝最小値、この数値以上

min670px、max1000px＝最低670px～最大1000pxまで指定する

以前はなぜかこのルールがしっくりしなかったけど今回の学びなおしで解決#30DAYSトライアル

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月13日

4章　box-sizingについて

・box-sizing:border-box;を指定すると、paddingやmarginを含めたwidthのサイズを％で一括管理できる。

・セレクタを＊（アスタリスク）にするとページ全体（サイト全体）に効果をつけられる。

＊この章の理解を深めるには、サルワカさんのこの記事がおすすめです?

Day5の要点まとめ　－レスポンシブデザインの実装－

スマホやPCなど、大きさが違う画面に対してレイアウトが崩れない・見やすいレイアウトを表示させるための実装方法を学習します。

理解は必須の項目なので、何度も復習して身につけたいですね?

5章から6章　レスポンシブデザインの準備

・headタグ内に以下のメタタグを記述します。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

・レスポンシブデザインでは、widthは今までのようにpxではなく％をつかうのが主流（管理が便利だから）

・レスポンシブ独自のCSSファイルをつくっておくと管理がしやすい（別に作ったら、別途linkタグでheadタグ内に読み込みの記述を書く）

・?必ずviewport（metaタグ）の下に記述すること！

7章　レイアウトの崩れを防ぐには

・すべての子要素が親要素のfloatの影響を受けると、親要素の大きさが0pxになるが、clearプロパティで解決できる。

8章から9章　スマホ向けのレイアウト設定

・それぞれの要素のwidthを100%にする（＊セレクタで一括管理がおすすめ）

・スマホ表示ではテキストは中央寄せがおすすめ。

・ブレイクポイントをmax670pxにする。

11章　ページ自体の大きさを指定する

・大型テレビなど大きすぎる画面で表示されると、ページが画面いっぱいに引き延ばされる。

・?これを防ぐには、ページ全体もしくは特定の要素自身の幅を指定する

12章　特定の大きさでのみ要素を表示させる

・スマホで見た時だけハンバーガーメニューを表示させる、など画面の大きさによって表示/非表示を切り替える。

・プロパティは、display:none;（非表示）display:block;（表示）をつかう。