【CSS】軽微な調整をしました。バージョン1終了。

f:id:Kawan0116:20210429001026p:plain

3日ほどかけてブログデザインのカスタマイズをしていたのですが、ひと段落つきました。

しかし、気に入らないことがあったのです。

paddingからの離脱(完璧ではない)

余白を取る場合、marginかpaddingですが、個人的に、paddingは嫌いです。

何故かと言うと、画面サイズに応じてサイズが変わってくるからです。

でも、手っ取り早いのでpaddingを使っていました。

今まで、

を中心にpaddingで調整していました。

しかし、これは目測で調整していました。

目測でも結構自信があるのですが、とても気持ちが悪くてpaddingを出来るだけ排除しようと思いました。

個人的に、paddingよりmarginのほうが取り回しが良くて好きです。

あと、基本、「margin:0 auto」で中央寄せに出来る場合が多くて、marginが好きです。

ただし、widthを設定する必要がありますね。

まぁ、あくまで僕が作ったデザインテーマの場合はですけどね。

今回は、「640px」というPCではとてつもなく狭い幅です。

でもいいんです。

これがお気に入りです。

ただ、写真を載せる際、少し迫力に欠けますけどね。

とにかくwidthを640pxにして、「margin:0 auto」にしました。

そして、paddingを出来るだけ削除しました。

だいぶ削除しました。

一応、表示の確認をしましたが、全く問題ない模様です。

良かった・・・。

レスポンシブ対応(条件付き)

今回、出来るだけレスポンシブ対応にしようと思いました。

androidスマホiPhoneiPadの数機種とPCで表示確認済み。

なお、画面サイズを5000px程度にして確認しましたが、レイアウトが崩れることはありませんでした。

ただし、先ほど書いたようにwidthを640pxで設定していますので、文字がかなり小さいです。

読めたもんじゃありません(笑)。

まぁ、対応の余地ありかと思うのですが、さすがにそこままで大きな画面で見られることはないだろうって予測しています。

まぁ、対応は出来ますが、めんどくさいのでこのままで(笑)。

左右の余白の問題

paddingは、左右の余白の問題があります。

微調整が辛い訳です。

なのでサクッと親要素にwidthを設定して、あとは「margin:0 auto」に設定すれば大丈夫なはず。

ただし、PCの場合です。

スマホは、一般的に「width:100%」です。640pxであれば、画面オーバーになります。

なので、スマホの場合、一般的に「width:100%」です。

テストに出ますよ(笑)。

さいごに

一通り終えたので、あとはブログを書くだけ。

今後、メジャーアップデートはないと思います。

するとすれば、今後も軽微な調整だったりをするかと思います。

今回、デザインテーマを作った訳ですが、まぁ、自分しか読めないコードになっていますね(笑)。

まぁ、自分だけが使うので、これでいいやと思っています。