本記事の内容
タイトルの本のChapter5(P198~215)の学習を進める中でのメモを記します。
（理解が間違っていたら教えてほしいです）
p209「potisionメソッドのrelativeとabsoluteがよくわかんない」
参考URL「CSSのposition:absolute;とは？要素を思いのままに配置する方法」
https://www.sejuku.net/blog/53016
参考書では、
post-infoクラスにposition: relative;を設定し、
post-dateにposition: relative;としている。
まずこの意図は「日付を表示するpost-dataの位置を固定したい」だと思う。
potisitionタグを使うことによって、親要素であるpost-infoの位置を基点にするrelativeを設定することによって、子要素の配置をabsoluteを指定することによって決めることができる。
（のかな？）
p210,215「displayメソッドのblockって何？」
参考URL「【初学者必見】displayについて知ろう！」
https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e5%88%9d%e5%ad%a6%e8%80%85%e5%bf%85%e8%a6%8b%e3%80%91display%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e7%9f%a5%e3%82%8d%e3%81%86%ef%bc%81/
親子関係の整理
親：news-contentsでdispaly:flex;
子：post-dateでdisplay:block
この関係は、p要素の中にスパン要素「2019」が入っているのでこのままだと横並びになる。
今回は、青丸の中に上下に日付と年を入れたいのでspan要素をblockにすることで縦並びなるようにした。
sub-menuのdispaly:blockの意図
元々li要素にしているので縦並びだが、block要素にしてクリックした時の範囲を文字のみから文字が含まれるブロックに広げている。クリックしやすい。
→クリックするやつはブロックにした方が良いのだろうなぁ。
p211「font-weight:normal」にする理由
参考URL「h1タグの太字をやめる方法」
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1484134829
h要素はデフォルトが太字（bold）だから、太字解除のため
p213「paddingで(0 , 8px , 8px)ってある時の上下左右の指定はどうなるの」
参考URL「スタイルシートリファレンス padding」
http://www.htmq.com/style/padding.shtml
値を3つ指定した場合： 記述した順に[上][左右][下]のパディングになります。
→へ〜
以上。
↧