IT・プログラミング

HTML/CSS上級編レスポンシブについて学ぶが疑問が残った【progate】

おすすめ開発パスに沿ってやっていたら、ちょっと学習工程が前後してしまったけどレスポンシブ!
このレスポンシブは、非対応のサイトをレスポンシブ化させる案件もあるほど求められている技術らしい。

ということで張り切って学んでいこう!
上級編の学習工程はこれ。

スポンサードサーチ

HTML/CSS上級編

学べること一覧

レスポンシブデザインとは
目標物を確認しよう

メディアクエリ
メディアクエリを設定しよう
メディアクエリによるレイアウト
box-sizing

レスポンシブデザインの実装
レスポンシブデザインの型を準備しよう
タブレット向けのレイアウトを作ってみよう
レイアウトの崩れを修正しよう
スマートフォン向けのレイアウト(1)
スマートフォン向けのレイアウト(2)
フォントをレスポンシブ化しよう
max-width
ヘッダーメニューを切り替えよう

引用:progate公式HP HTML&CSS上級編

box-sizing: border-box;超便利!

widthをpaddingとかを含めた値で考えてくれるというすごいコード。
なんだかレスポンシブ!って感じがする。

アスタリスクで全体に適用させることといい、今後たくさん使っていきそうな気配がある。

clear: left;の謎

便利なコードもあったけど謎のコードもでてきた。
それがこいつclear: left。

いや、いいたいこともやりたいこともわかる。
floatを使うと親要素に子が見えなくなって、高さがなくなってしまうらしい。
だからfloatを打ち消して、親要素に子を認識させてあげると高さがなくならない・・・ということだと思う。

フフーフ
でもさ、それならそもそも浮かせなければよくない・・・?

floatと併用してよく使うと記載されていたけど、浮かせないで寄せたり並べたりはできないんだろうか?
これはちょっと本番でいろいろやってみないとメリットとデメリットがわからなそうだ。

フフーフ
練習ではリストとかアイコンを横に並べるのに使ったりしたけど、他にもっといいのないのかな?

メディアクエリの謎

あとこれ。
レスポンシブの核になるコードなんだけど、ここもちょっと疑問が残った。
使うのはこのコード。

@media( ){

ここにコードを書いていくイメージ

}

ほうほうなるほどこれで指定すんのね。
練習では、

@media( ){

コードを何個か書く

}

ここにもコードを書く

!??!?!!!??
いや{}からはみ出したとこにも書くんかーーーい!

{}の中に記述したものだけが適用されるのかと思いきや、{}以降に記述されたものも適用される様子。
じゃあなぜ{}の中に記述するものと外に記述するものがあるんだ?

完全に忘れてたアイコン呼び出すやつ

突然fa fa-barsとかかいてあるから本気で?となってしまった。
調べてみるとfa-barsは3本線のよくあるメニューアイコン!
そういえばアイコン呼び出すコードも前にちょっと習ったなあ。

フフーフ
spanのクラスにアイコンぽいの指定したけどこうやるんだっけ・・・?
完全に忘れているからもう一回復習しないと。
反復しながらおぼえるにゃー
ちゃんねこ

疑問は残ったが合格はした

とにかく、やることと書くコードはwかっているから合格自体はすぐ出来てしまった。

でも自分がなぜこのコードを使ってその効果を出しているのかを理解していないと、応用が利かない気がする。
clear: left;の謎は、他に代用できるものはないのか・こを使うメリットは何なのかをちょっと調べてから次に進もうかな。

次回は上級編の道場コース。
この疑問も少し解決するんだろうか・・・!?

それでは、また。

  • この記事を書いた人
  • 最新記事
卍フフーフ

卍フフーフ

3児の父。 好きなものは旅行・漫画・家族。 世界中どこでもクロックスで出かけます。

-IT・プログラミング
-, ,

© 2020 気まぐれなねじまき鳥 Powered by AFFINGER5