max-width、min-widthの使用目的
しばらく更新できませんでしたが、最近は模写コーディングを継続してます。
そんな中、今まではmax-widthのみ使用したサイトを模写していましたが、ある時min-widthを使用したサイトを模写することになりました。
「max-widthの反対と考えればいいでしょ」と思ってましたが、目的としては2通りあると解説サイトに記載があったため、ここでまとめておきます。
1.min-width
※ある親要素の中に子要素があった場合、子要素に対してwidth50%を指定したとします。
---min-widthなし---
PC画面では視認できても、スマホ画面では視認できないサイズとなる可能性があります。
---min-widthあり---
min-widthのサイズより小さく表示されないため、min-widthのサイズをスマホ画面でも視認できるようにしておけば視認できます。
2.max-width
※ある要素に対してwidth80%を指定したとします。
---max-widthなし---
要素サイズがスマホ画面では適切でも、PC画面では大きすぎる可能性があります。
---max-widthあり(目的1)---
max-widthのサイズより大きく表示されないため、max-widthのサイズをPC画面でも適切なサイズにしておけば大きくなりすぎません。
---max-widthあり(目的2)---
画像にmax-width:100%と指定すれば、PC・スマホの画面サイズを超えて画像を表示させないようにできます。
timeタグ
timeタグについて初めて学習したとき、検索エンジンに対して「これは日時ですよ」と伝えるだけだと思ってましたが、以下のメリットがあるようですね。
・検索順位アップ
・スニペット(検索結果のwebページ要約文)に表示される
コーディング練習サイトで、日時にtimeタグを使ってみようと指示があったため、単純に「なんで?」と思ったのが調べたきっかけでした。
細かなことでも調べてみると意味がわかり理解が深まるので、これからもよく調べる癖をつけていきたいなと感じました。
※追記(以下サイトでの説明が具体的に書かれており、わかりやすいです)
【HTML・CSS】img要素の下に余白ができる原因と解決法 | 山形のホームページ制作・管理に関するお悩みならWebplus
画像下の隙間を消す
模写コーディング中、指定した画像下に隙間があり、レイアウトが少し崩れていることに気付きました。調べてみると、vertical-alignをbaseline以外の値にすると隙間がなくなるみたいでした。baselineではフォントのベースラインに画像を合わせるため隙間が発生するようです。初歩的かもしれませんが、ありがたい情報です。
模写コーディングに挑戦!
先日、ProgateにてHTML&CSSのコースを全て終え、次は何をすべきなのか調べていると、模写コーディングが良いということが分かりました。
初心者なので、最初はネットで見つけた入門用サイトを模写することにしました。1カラムのシンプルなプロフィールサイトとのことですが、やってみると全然うまくできませんでした。サイトを一通り見たときに、全体の構成が浮かんでこないのです。
とりあえず、iPadに手書きで全体の構成を書いてまとめてみました。少し整理できましたが、その後細かい部分まで書いていくと途中で共通のクラスを持たせた方が良いことに気付きコードを修正したり、実行して実際の画面を見ると見本のサイトと位置がずれているなど、、なかなか前に進めません><
わからないことを考え続けても時間が経つだけなので、ある程度考えてわからない場合は実際のコードを見て書き方を学んでいます。ある程度慣れてくるまでは、この方法で進めるのが良いのか、実感が湧いてこないのが辛いところですね。模写の途中で今までに学んだ内容で理解が不十分だったことも、その都度気づいて再度学習できているのは良いことだと思っています。
周りにプログラミング経験者がいないので、今の学習方法が合っているのか確認もできませんが、このようなネット上の繋がりで今後有益な情報がたくさん得られるといいなと思ってます。
本日はこの辺で、また進捗あれば記事を更新します〜、バイバイ!!