デイトラ1期 DAY5『Progate HTML & CSS 上級編』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

30DAYSトライアル1st DAY5.『Progate HTML & CSS 上級編』の解説です。

デイトラ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トライアル」というお話でした。

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

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