オクテットログ

App,Web,IT,ゲーム,ガジェットのことを中心に色々書いています

【CSS】画面サイズが小さくてもレイアウトが崩れないようにカスタマイズしてみる

f:id:hakoz2017:20180519151712j:plain

ブログを作っていく上で、HTMLやCSSは必須ですがその辺に関しては完全に素人なので日々試行錯誤をしている次第です。

なのでこのブログも改善点が有り余ってます(笑)

そんな中、画面サイズが小さいPCでこのブログにアクセスしてみたところ、CSSを書いた際に想定していたレイアウトが崩れてしまっていました。

今回はPCの画面サイズに依存せず、一定のレイアウトを保てるようなカスタマイズをしてみました。


カスタマイズ前の状態

元のレイアウト

f:id:hakoz2017:20180520222716p:plain

元々設定していたレイアウトは、メインカラムが710px、サイドメニューが280pxでそれぞれ左右のpaddingが20px、両端の余白が130pxとなっていました。

ちなみにこのブログで使用しているCSSは、「Boilerplate」というサンプルテーマを少しカスタマイズしたものです。

「Boilerplate」は、"はてな”が公開しているサンプルCSSで、非常にシンプルなものになっており簡単にカスタマイズすることが可能です。


staff.hatenablog.com

小さい画面で見ると

f:id:hakoz2017:20180525201822p:plain

元のレイアウトの状態で10インチ画面のPCで当ブログにアクセスすると、1カラムになっていると思いきや


f:id:hakoz2017:20180526110617p:plain

一番下にサイドメニューがありました。

しかもかなり中途半端な位置ですね(笑)

もちろんブラウザのズーム倍率を調整すれば改善されるのですが、閲覧するページごとにズーム倍率を変える人はあまりいないと思います。

なので今回は、このような画面サイズの違いによるレイアウトの崩れを改善してみたいと思います。


今回行ったカスタマイズ

Media Queries の記述を削除

f:id:hakoz2017:20180526161717p:plain

「Boilerplate」のCSSにはMedia Queriesが書かれており、スマホやタブレットの画面サイズに合わせてレイアウトのパラメータが切り替わるようになっています。

しかし、初期設定では中途半端にカスタマイズしていることもあり、画面サイズを小さくしても画像のように左右に不要な余白ができてしまいます。

今回はまずこのようなサイズによるレイアウトの切り替えを考えずに進めるため、一旦Media Queriesに関するCSSの記述を削除しました。

タブレットサイズに対応するようなカスタマイズは、また後程やっていきたいと思います。


ピクセルからパーセントに変更

f:id:hakoz2017:20180526131157p:plain

CSSの記述をpx表記から%表記に変更しました。

このようにCSSを書くことで、メインカラムやサイドメニュー、余白などの幅が、ブラウザのウィンドウの幅に対する割合で決まります。


f:id:hakoz2017:20180526133201p:plain

ブラウザを縮小すると、その幅に合わせてそれぞれの幅も縮小されるようになりました。

pxから%への書き換えは、レイアウト全体の幅(今回は1330px)でそれぞれのカラム、余白の幅を割った値に100をかけます。

CSS上でのカラムの設定は以下のようになっています。


#main {
  width: 53.4%;
  float: left;
  margin-left:9.7%;
  background-color:#ffffff;
  padding:1.5% 1.5%;
}
#box2 {
  width: 20%;
  float: right;
  margin-right:9.7%;
  padding:1.5% 1.5%;
  background-color:#ffffff;
  }

今後変更する可能性がありますが、2カラムレイアウトで悩んでいる人がいれば参考になればなと思います。


完成

f:id:hakoz2017:20180526233419p:plain

以上のようなカスタマイズで、10インチ画面のPCでもページを開いたときにデフォルトで2カラムレイアウトが綺麗に表示されるようになりました。

10インチ画面に限らず、サイズに依存せず一定のレイアウトを保つことができます。


まとめ

Media Queriesの記述を削除、今までのレイアウトをpxから%に変更することで、画面サイズが変わってもレイアウトが崩れることがなくなりました!

しかし、現状だとタブレットなどの縦長の画面でも無理やり2カラム表示にしているため少し窮屈になってしまいます。

なのでやはり、Media Queriesをカスタマイズする必要がありそうなので色々検討してみたいと思います。