30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS上級編終了【30DAYSトライアル DAY5】

30DAYSトライアル

台風のせい(言い訳)で休日何にもしてなかったのですが、昨日「HTML & CSS上級編」を終わらせました。

学んだこと

上級編は「メディアクエリ」に関することを学びました。
ブラウザの画面サイズに応じて画面の表示設定をCSSスタイルに記述。

レスポンシブデザインって設定していくのめんどうだけど、コーディングの中でもめちゃくちゃ大事な部分だよねきっと。
こうやってコーディングするのはPCでだけど、実際閲覧するユーザーはスマホが多いだろうし。スマホでの表示確認大事。

メディアクエリ

@media(max-width: ◯◯px){

条件部分は以下を指定。

  • max-width(最大幅)
  • min-width(最小幅)

「max-width」は画面幅が◯◯px以下の時にCSSを適用。
例えば「max-width:1000px」だと、上限max『1000px』だよー!ってこと。
これ以上は大きくなりませんよー!

逆に「min-width」はこれ以上小さくなりませんよーってこと。

それぞれスマホ表示かPC表示かでどのぐらいの大きさで要素を表示させたいかを設定する。
PCで見てデカすぎる!なら『max-width』。
スマホで見て小さすぎる!なら『min-width』

ブレイクポイント(Progate)

  • スマートフォンの画面幅は670px以下
  • タブレットの画面幅は670px~1000px

viewport

<head>タグ内にviewportを設定しないとメディアクエリが機能しない!!!

responsive.cssにメディアクエリ用のCSSを記述し、それを読み込む時、必ずviewportよりも下の行に記述すること!!!!

たぶん上から下にコードを読み込んでいくから先にviewportでメディアクエリを適用させてからのresponsive.cssってことなんでしょうねきっと。

box-sizing

box-sizing:border-box;

このようにすると、要素の幅25%にpaddingとborderの値がプラスされていたのが、要素25%の中にpaddingとborderの値が含まれるようになるので、レイアウトが崩れない。
(※marginはborder-boxの合計値に含まれない)

*{
box-sizing:border-box;

上記のようにアスタリスクに対して指定することが推奨されている。
アスタリスクはすべての要素に対して適用される。

widthの設定

pxで指定するとその値で固定されるけど、『width: 100%;』にすることで画面幅に応じた大きさになる。

幅や高さの指定はpxより%の方がいいのかな?画面に応じて融通が効くし。
そのへんもまた数こなしていけばわかるかな。

---------------

例)container要素のwidthが100%なので、画面幅が2000pxなどとても大きい時も画面いっぱいに広がってしまう。
max-width:◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなる。

.conteiner{
max-width: 1170px;
width: 100%;

なるほど。

要素の表示・非表示

要素を非表示にするにはdisplay:none;(デフォルト)。
非表示にした要素を表示させる時は、display:block;

⇒block が直感的に「表示させる」の意味で捉えられなくて混乱。

面白かったこと

通常、親要素の高さは子要素を包む高さとなる。
しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質がある。
これは、floatは「浮いている」という意味で、なんと親要素から見るとfloatの子要素は存在しないように見える。

な、なんだってー!!

floatはclear:left;で「浮いている」状態を解除できる。
clear:left;を適用するためだけの空のタグを用意しよう!
<div class="clear"></div>
空タグとclearでfloatを解除するのはよく使うテクニック。

なんかRPGでキャラ装備整えてる気分になってきた。

あと、ヘッダーメニューのアイコン動作はjQueryで作るって言ってて、いろんな言語覚えないとWebサイトってできないんだなーと。
まだまだ入り口にも立っていないのかもしれない。

困っていること

めっちゃ眠くなること。
このブログ書いてるだけでも眠くなる。

でも寝てしまうとそのまま夜までぐっすりしちゃうので眠れない。
誰か対策を...。

ちなみに会社でも昼食後に昼寝するんだけど普通に30分とか1時間とか寝てしまう。
病気ですかね。

今日からやること

いよいよ道場コースへ!
どんな感じなのかワクワク♪

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

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