30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS 上級道場終了【30DAYSトライアル DAY7】

30DAYSトライアル

今回はレスポンシブ対応。
レッスン自体は4レッスンしかなかったですし、1レッスン1時間も掛からないだろうと思っていたけど、めちゃくちゃ詰まったよね。甘かった...。

しかも前回の中級編から間が空きすぎたので余計に。
最初のヘッダーの方は答えを見たりしつつ、こうしたらこう動く。というのをだんだんと思い出しながらやっていきました。

学んだこと・学び直したこと

floatでの文字寄せ

レッスン2のトップ部分をレスポンシブさせるのに、モバイル表示時に文章を左寄せにするのですが、ご覧のとおりぐちゃぐちゃに。

HTML CSS Progate レスポンシブ
h1とpタグの文章でそれぞれにfloat掛けてたんですよね。
そのせいでbtn-wrapperのpタグまで反応してえらいことに(笑)。

HTML CSS Progate レスポンシブ
単純にtop-wrapperをtext-align: left;してあげれば良かったんですよね(笑)。

clearでfloatを解除する

こちらもfloat関係のことなのですが、下の文字がずれこんできてレイアウトが崩れてしまっています。

Progate 文字 ずれ
この原因がわからなくて30分以上悩んでしまいました。。。

で、結局答えを見たのですが、

【HTML】
HTML clear

【CSS】
CSS clear

これを記入すると確かに直ったのですが、全くこんなこと思いつかなかったし、なんでこの記述をいれないといけないのかがすぐに理解できなかった。

調べると、このclearの記述は要素に対する回り込みを解除するためのもの!
上記の場合、レッスン要素に文字が回り込んでいるので、clear : left; で左寄せになっている文字の回り込みを解除してあげよう!ということだったのです。

まったくこんなこと思いつかなかったよ。。
学習コースでこんなんやったっけ??
全然覚えてない...(´;ω;`)

(やってた)

ボタンのwidth表示

このボタン部分を100%に対応させるのもだいぶ悩みました。。

ボタン width

HTMLはこんな感じ↓

HTML Progate

最初は単純に該当箇所をwidth : 100%;にすればいいんじゃない?と思って、

  .btn message {
    width : 100%;
  }

としたが変化なし。

じゃあもう全体をwidth : 100%;にすればいいのかと思って、

  .message-wrapper {
    width : 100%;
  }

にしてみたけどこれもダメ。

正解は、

.message-wrapper .btn {
    width: 100%;
}

でした。

『message-wrapperクラス』の中の『btnクラス』をwidth: 100%;ということでしょう。

「じゃあ.btn message でもいいんじゃないの?」と思って納得できなかったのですが、
.btn messageだと「さっそく開発する」の中のメッセージに対してwidth: 100%;が効くのでボタン自体にwidthは効かない、と。

message-wrapperクラスのボタンをwidth: 100%;にしておくれ~ってことだと、やっぱり
.message-wrapper .btn {
    width: 100%;
}
の書き方になりますね!

心折れそうになったこと

改修対象外のところが違うからダメ!っていうので判定OK出なかったのは「あ”?」ってなりましたね(笑)。
改修対象の部分は合ってるのに、他が崩れてたりしてダメだから進めない。っていうのが何度かありました。

例えばレッスン部分やってて

.lesson-wrapper h2 {
    font-size : 20px;
  }

って書いて、レッスン部分はOKなんだけど、後に改修するメッセージ部分のレイアウトが少し崩れてしまってダメ。

ちなみにこの時は、こう↓書くのが正解でした。

.heading h2 {
    font-size : 20px;
  }

レッスン部分以外のところも統一させること前提の改修をしろ。ってことなんですね。

『レッスン一覧部分をレスポンシブ対応させよう!』って言ってるのに、判定はページ全体なの理不尽!!!!(笑)
でもレスポンシブ対応させても他が崩れてちゃ意味ないですものね。

あっちを改修したらこっちが崩れて、、、
もう何度も言ってるような気がするけど、HTML・CSSいじるのって大変ですね。。。

気づいたこと

30分悩んでわからなかったら...

答えを見る!!
絶対その方が効率いいな!って思いました(笑)。

よく自分で調べる力が大事。っていうのを聞きますが、答え見てから調べてもいいんじゃない?って思います。

「なんだこのコード初めて見たぞ?」
「前に見た気もするけど忘れちゃったな...」

と思ったら調べて、

「あ、なるほど!」

と納得すればいいわけだし。

要は、

  • なぜこのコードを書いたのか?
  • このコードを書くとどういう動きをするのか?

といったことが理解できればOK!

目的が『Progateを完璧にこなすこと』にならないよう注意したいなと思いました。

ProgateをChromeブラウザで検証確認する

Chrome検証っていまいちどう使うのかピンと来なかったのですが、
「なるほど。こう使うのか!」
と思ったのでメモしておきます。

①見たい画面を全画面で開く

Progate Chrome 検証
自分が今実装している画面、見本の画面。
どちらか見たい方の画面を全画面表示にします。
赤丸で囲んであるところをクリック!

②画面上で右クリック⇒検証

Progate Chrome 検証

③どのようなスタイルになっているのか確認する

こんな感じの画面になるかと思います。

Progate Chrome 検証

例えば、私は「さっそく開発する」ボタンのレスポンシブ対応にかなり苦戦してしまったので、見本のスタイルがどうなっているのか知りたいと思いました。

Progate Chrome 検証

赤丸の矢印アイコンをクリックして、画面上の確認したい箇所をクリックします。
ここでは「さっそく開発する」ボタンをクリック。

すると、

Progate Chrome 検証

「さっそく開発する」ボタンがどのようなコードで実装されているのかがわかります。
赤丸で囲んだところでスタイルが確認できるので、「レスポンシブ対応はこうすればいいのか!」と知ることができました。
その左横はHTMLの記述がどうなっているのかが確認できます。

Progate側で見本のソースコードと自分のソースコードを照らし合わせて答え合わせもいいですが、Chromeの検証を使えばよりわかりやすくスッキリ納得できるんじゃないかな?と思いました。

-30DAYSトライアル, お勉強
-, ,

© 2021 文系女子とプログラミング