連載第177回
2022年8月28日
各エリアの構成、覚え書き

悪化していく健忘症対策として、Mac miniのローカル内に日記ブログを設置するにあたり、とりあえず忘れがちなあれこれを貼り付けておいて、記憶喚起の触媒とする。

ヘッダー内の構成ザックリ

上図で混在している、【width:auto】と【width:100%】だが、【width:auto】の場合において、paddingやライン幅などの余白を含んでの、横幅100%になるということを忘れがちである。
ただ、【width:auto】だと内包している要素が小さい場合、それに合わせてボックスも小さな幅で抑えられてしまう、という挙動があり、場合によって使い分ける必要がある。
例えば上図の場合だと、BOX01_B2A:100% とBOX01_B2B:92% と変則になっているのは、内包する要素の幅が都度変わるため、「auto」だと位置が意図したものと微妙にズレてしまうから。ちなみに右側の幅を92%と小さくしているのは、左側端にある「-」の文字を何とく中央に配置するため。ザックリである。

ページ全体の構成ザックリ