【告知】ノマドエンジニア養成ブートキャンプ

【DAY5.】30DAYSトライアル5日目をわかりやすく解説

スマホデザイン

 

おはこんばにちは、ミヤビです。

 

さて、今回は#30DAYSトライアルのDAY5.について解説します。

 

 

✔︎本記事の内容

  • DAY5.『Progate HTML & CSS 上級編』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指

 

レスポンシブサイトの設計は必須です。

 

なぜなら、読者のほとんどはスマホで検索するからです。

 

当ブログおいても、レスポンシブ対応に設定しておりまして、pcとタブレット端末、スマホでCSSの設定を変えています。

 

レスポンシブサイトのコーディングができるようになり、読者目線になりましょう。

【DAY5.】Progate HTML & CSS 上級編を解説

レスポンシブサイト

上級編は中級編より簡単です。

 

 

メディアクリエとブレイクポイント

メディアクリエとは簡単に言えば、、、

 

  • pc、タブレット、スマホの各デザインに対応させる
  • @media(max-width:◯px又はmin-width:◯px) {CSS}で記述する
  • ブレイクポイントで最大と最小の値を設定する

 

 

たとえば、タブレット端末のCSSなら、、、

 

<!-- ブレイクポイントは670px~1000pxを想定 -->
<!-- 最大幅が670px以上かつ1000px以下の時のCSS -->
@media(max-width: 1000px) {
<!-- 1000px以下の時に表示させたいCSS -->
}

 

スマホのCSSなら、、、

 

<!-- ブレイクポイントは670px以下を想定 -->
@media(max-width: 670px) {
<!-- 670px以下の時に表示させたいCSS -->
}

 

box-sizing

要素の幅の合計に、paddingとborderの値が含まれるようになります。

 

これで、paddingやborderを追加した時にレイアウトの崩れを防ぐことができます。

 

ただし、marginの値は含まれないことには注意しましょう。

 

* {
box-sizing:border-box;
}

 

アスタリスクマークは全ての要素に対して適用させることが推奨されています。

 

viewport

viewportを設定しないとメディアクリエが正しく適用されません。

 

レスポンシブサイトを適用させるにも、head内にvieportを設定させる必要があります。

 

ついでにメディエクリエ用のCSSもhead内に追加しておきましょう。

 

ただし、<meta>タグの下に必ず記述する必要があります。

 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="responsive.css">
</head>

次なるステップはProgate道場編です

さて、ここまで基礎の基礎を学習してきました。

 

補助輪がたくさんついていたので、わりとスラスラ進めていたと思います。

 

しかし、道場編からは補助輪がないのでわりと苦戦するハズです。

 

Progateでも、答えと完璧に一致しなくても正解になるので、答えを暗記する学習方法は辞めましょう。

 

道場編は2日間設けられていますが、集中して進めていきましょう。

 

 

HTML & CSS 【DAY6.】30DAYSトライアル6日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】