エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

DAY5.『Progate HTML & CSS 上級編』 #30DAYSトライアル

DAY5.『Progate HTML & CSS 上級編』#30DAYSトライアルです。

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY5.『Progate HTML & CSS 上級編』

DAY5.『Progate HTML & CSS 上級編』では、メディアクエリなど学びました。

 

課題にかかった時間は、大体30分くらいです。 

「初級編の後半」~「中級編の前半」が1番大変な印象です。

HTML&CSSは

  • ボックスモデル
  • paddingとmargin
  • inline、block、inline-block

 あたりが肝だと思います。

 

「Progate HTML & CSS 上級編」全てを終えた感想

「Progate HTML & CSS 上級編」ではレスポンシブデザインを作りました。

 

実現した物が「レスポンシブデザイン」で、そのために使った手法が「メディアクエリ」ですね。

 

学んだことはこの辺り。

  • メディアクエリは、@media (条件) { .... }と書く
  • max-width: ◯◯px の ◯◯部分がブレイクポイント
  • 空タグとclearでfloatを解除するテクニック

 

学習メモ(Progate上級編の補足説明)

個人的な学習メモですが、上級編を終えた方には「ちょっと役立つ」と思うので、共有します。

やっていて、私(アルパカ)が疑問に思ったところが中心です。

 

レスポンシブデザインはいつできた?

レスポンシブデザインこと、レスポンシブウェブデザイン (Responsive Web Design, RWD)はいつできたのか?

→スマホ(iPhone)が日本国内に登場した2007年くらいから。

 

メディアクエリの指定順番

CSSは上から順番に読み取るので、メディアクエリの指定順番は

  • モバイルファーストの場合は「小さい→大きい」
  • デスクトップファーストの場合は「大きい→小さい」

で書くようです。

今回作ったのはデスクトップファースト(多分)で、max-widthを「大きい→小さい」の順番に記述していきましたね。

 

メディアクエリのmax-width指定は「以下」です(「未満」じゃない)

メディアクエリのmax-width指定は「以下」です。

※以下→指定した値を含む

 

「未満」じゃないようです。

Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.

» 参考:Media Queries

 

メディアクエリの条件を指定する部分でスペースを空けてはいけない理由は?

メディアクエリの条件を指定する丸括弧部分にはスペースを空けてはいけない理由を調べました。

しかし、よく分かりませんでしたw

そういう仕様なんだと思います(知ってる人いたら教えてください)

 

viewportって何?

<head>タグの中に入れた「viewport」。

これが何か説明薄かったですね(意図的に省略だと思います)

 

ちょっと初級者には難しそうな概念ですが、ざっくりこんなものです↓

viewport【metaタグ】とはmetaタグのひとつであり

ホームページのファイル(HTMLファイル)に書く「スマホでは、こんな感じで表示してよ」な情報のこと

» 参考:viewport【metaタグ】

 

ちゃんと理解したい人はこの辺りが参考になります(難しいかも)

» 参考:もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

» 参考:HTMLのviewportについて分かりやすく書いてみた

 

空タグとclearでfloatを解除する(テクニック)

空タグとclearでfloatを解除するテクニックが紹介されていました。

なにをやっているか分かりづらかったですが、簡単に言うと

  • float指定しているから「次の要素」は続けて(右側に)表示されてしまう
  • でもやりたいことは、「次の要素」を改行して表示すること
  • だから「clear:left指定の空タグ」=「表示されない回り込み用の要素」を入れて、無理やり改行させる。そうすれば、改行された後から「次の要素」が表示される

みたいな感じかなと思います。

 

clearの勉強については、この辺りが参考になりそうです↓

» 参考:【脱初心者!】ふわふわお化け?floatバグで泣かないための3つのヒント! | geechs magazine

» 参考:絶対に知っておきたい!便利すぎるCSSプロパティ「clear」の使い方 – 60%ぶろぐ 技術メモの場

 

【余談】作るときには小さい画面~大きい画面まで意識する

実際に作るときには小さい画面~大きい画面まで意識する必要があるなあ、というのが今回の気づき。

レスポンシブデザインの作り方ということで、PC、タブレット、スマホとそれぞれのサイズを見ましたね。

 

「小さくするときにどうするのか?」ということばかりに目が行っていましたが、課題でもあったように「画面幅が大きい場合」も考える必要があります。

この観点、気づきませんでした。

なるほど…って感じ。

※対処方法自体はシンプルで「max-width: ◯◯px;と指定」でOKです。

 

プログラミングをするときって、こうやって「逆側」も考えるクセをつけるのが重要ですので、習慣づけておくと良いかもです。

 

以上「DAY5.『Progate HTML & CSS 上級編』 #30DAYSトライアル」というお話でした。

上級編まで終えた方、お疲れ様でした!

次回も一緒に頑張りましょう!

【関連記事】

  1. DAY1.『Progate HTML & CSS 初級編(4章まで)』 #30DAYSトライアル 
  2. DAY2.『Progate HTML & CSS 初級編(7章まで)』 #30DAYSトライアル
  3. DAY3.『Progate HTML & CSS 中級編(3章まで)』 #30DAYSトライアル
  4. DAY4.『Progate HTML & CSS 中級編(7章まで)』 #30DAYSトライアル
  5. DAY5.『Progate HTML & CSS 上級編』 #30DAYSトライアル
  6. DAY6. 『Progate HTML & CSS 初級・中級道場コース』 #30DAYSトライアル
  7. DAY7. 『Progate HTML & CSS 上級道場コース』 #30DAYSトライアル

www.engineer-step.com