あいさつとCSS width%に関する勘違い

お久しぶりです。

最近Web制作の勉強を再開しておりまして、日々勉強に勤しんでいるのですが、

どうしてもやる気が持続してくれない。

勉強をやった末の出口が想像しづらくどうしても手が止まってしまう。

その解決法として1日の終わりに今日の学習内容と進捗をブログにてまとめようと思った。

これで毎日一つの出口を確保できる。

今日の学習で得ることが出来たことは

width: 100%;のパーセンテージに対する誤解が解けたことである。

今まで%はページの横幅を決めた上で最終的にwidth100%になるように設定しなければ

いけないと思っていた。

その勘違いから実装が億劫になっていた。

しかし、最近トレースしているサイトのCSSを見ていたらそうでもないことがわかった。

このサイトなのだが

ページトップのスライダー部分はWidth87%で

スライダー横のメッセージ部分はmargin-right3%が指定されているだけで

widthの指定はされてない。

つまり、今わかっている数字だけで見ると10%の余白が存在してることになる。

またスライダー下の会社ロゴやメニューの部分も

ロゴとメニューを含んだ全体でwidth88%が指定されてmargin: 0 auto;で中央寄せになっている。

中身に関しても合計して100％になるような設計にはなっていない。

こんなことから％指定への心理的障壁が大きく下がった1日だった。

しかし、よく考えてみれば文字などのを含んでいるため横幅の指定を100％丁度で指定するのは困難なのである。

こう言った多角的な視点が足りてないとつくづく思う。

次に今日はメニューにあるABOUT US BLOG CONTACTの部分を作っていたのだが

共通のクラスを持たせればいいのに完全に忘れており

同じCSSを三回クラス別に書くというアホな行為に勤しんでいた。

一度:nth-childで全部に対応出来ないかと試行してみたのだが、失敗に終わった。

子要素全てに対応できる擬似要素はないのか探してみようと思う。

今日はそんな進捗具合であーる。

ではおやすみなさい。