20200607 本日の日報

こんばんは。

今日も続きです。

今日は、webサイト作成の準備について学びました。

フォルダ・ファイルの作成については先日学んだのでさらっと理解できました。

今日の目玉はおそらく、ブロックとインラインですね。

考え方としてかなり重要とのことでじっくりと読み込みました。

ブロック要素は、イメージ的にテキストボックスみたいなもので、入力したテキストや画像をブロックとして捉えるもの、インライン要素は、そのまま入力されたテキストとして捉えるのかなあと思いました。

ふんわりしたイメージでしか掴めていませんが、

ブロックとインラインそれぞれに、幅や高さの指定等できることとできないことがあるということ、タグごとにブロックなのかインラインなのか決まっているということ、cssでブロック⇔インラインは変えられるということは分かったので、現時点では良しとしたいです。

次に余白について。

一番最初に少し躓きかけた、paddingとmargin、やっぱり出てきました笑　あの時に整理したおかげで割とすんなり頭に入ってきました。

追加情報として、この二つは、pxだけでなく%でも指定できるということで、pxで指定するよりも、他のデバイスでも同じ比率で表示されるようになりデザインが崩れにくいという利点があるとのことでした。

ただ、横の余白にしか使えないのは要注意。

また、borderは%指定できないようでした。でもborderだけpx指定して親要素からはみ出てしまうことを防ぐために、box-sizingプロパティというものを使うとよいとのこと。（box-sizingプロパティでborder-boxという値を指定すると、widthの数値の中にpaddingとborderを含められる。）

現段階では完全には理解できなかったので、印刷物を手元に置いて、問題に当たった時に再度確認できるようにしたいです。

marginの相殺についてという話もありました。

margin指定が複数に及ぶ（被ってしまう）と、どちらか一つ、値が大きいほうが優先して適用される、margin同士にのみ起こる事象のようです。不思議です。

あとは、要素を中央に配置する、autoについて学びました。

これはブロックのみに効くようで、

margin-left : auto ;

margin-right : auto ;

というように左右の値をautoにすることで、右側と左側のmarginが等しくなって、結果として要素が中央寄せになるというものでした。

インライン要素の場合は、

text-align : center ;

によって中央寄せできるとのことでした。

本日はここまで。

次からはアニメーションについて学べそうなので、楽しみです。

ちょっとゆっくりペースすぎるかも…？とも思いますが、

金曜日のオリエンテーションまでに何とか一巡すべく、頑張ります。

今日の夜ご飯は夫が作ってくれた、豚キムチうどんなるものでした。

とっても美味でした！

それでは、おやすみなさい。