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

30dayssトライアル Day5

 

解決します

・30daysトライアルってなに?

・Web制作に必要なポイントを簡潔に知りたい

・30daysトライアル5日目の課題内容が知りたい

 

こんにちは、ワタリビト(wataribito)です。

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

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

 

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

 

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

30daysトライアル3日目

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

09/11/2019
30daysトライアル Day4

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

09/12/2019

 

 

Day5の課題内容

 

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

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

 

Day5の学習内容

・レスポンシブデザインの実装

・メディアクエリの理解

・box-sizingのルールを理解する

 

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

 

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

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

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

 

(Progateはこちらから)

 



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

 

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

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

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

 

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

 

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

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

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

間違えやすいポイント!!

メディアクエリを書くときは入れ子構造になる!?

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

メディアクエリの記述の意味

max=最大値、この数値以下

max-width:○○px

min=最小値、この数値以上

min-width:○○px;

 

4章 box-sizingについて

 

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

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

*{box-sizing:border-box;}

この記述だと、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プロパティで解決できる。

親要素floatに大きさをつけるには

・clearなどのクラスを持つ空のdivタグをつくる
・CSSでclear:left(またはright);を指定

これで親要素が子要素を包み込む大きさになります?

 

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

 

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

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

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

ブレイクポイントの記述方法

@media (max-width:1000px){

.blog{

width:100%;

}

}

・セレクタは@media、()の中にブレイクポイント、;は不要!

・表示を上下に分けたいときなどはwidthを50%などに変えてOK

 

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

 

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

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

タイトル

.contents{

max-width:1200px;(自身の大きさ)

width:100%;

}

この記述だと、自身の大きさ(1200px)以上より大きく表示されることはない。

 

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

 

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

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

表示と非表示の記述方法

@media{

.blog{

display:none;(非表示)

}

.twitter{

display:block;(表示)

}

}

30dayssトライアル Day5

少しでもおもしろいと思ったらシェアお願いします?