Luxeritas の『レスポンシブ』を把握してカスタマイズを効率化【初心者向け】

2017年11月27日WordPress,Luxeritas,ウェブサイト作成

Luxeritasはレスポンシブのため、画面サイズによってパートごとの幅を変えています(Bootstrapベースのテーマなら同じ)。

レスポンシブデザインのおかげで画面サイズが変わってもレイアウトが破綻することなく統一性を保ったまま、画面サイズに最適化された表示させられるようになっています。

切り替えが発生するポイントはというと。

  • 576px 未満(スマホ)
  • 576px 以上(ファブレット)
  • 768px 以上(タブレット)
  • –992px 未満でサイドバーが下に—
  • 992px 以上(PC)
  • 1200px 以上

大きな違いが生じるのは992px未満になってサイドバーが下に移動する時です。

動きとしてはこんな感じ。下の赤くなってるスライダーを動かすと画面幅が992未満になった時の挙動が分かります。

ヘッダー

本文

992px以上で592px、1200以上でさらに大きく

サイドバー

992px以上で366px

 右側に出てるボタンがスライダー。動かしてみてね。↑

スマホだと意味不明かもしれませんが、レスポンシブはこんなしくみで動いています。2カラムの場合は992pxまではサイドバーが表示され、それ以下になったらサイドバーは下に移動して、本文のパート(main)とサイドバーのパートが横幅いっぱいに表示されるようになります。

実際にはもっと多くの要素が変動しますが、こんな感じということで。

1200px以上は992以上とあまり変わらないのですが、768px 未満と576px 未満では小さいサイズに合わせた表示が行われます。

見出しなどはそれほど気にしなくていいのですが、リスト(olやul)で右側のマージンを多めにとったりボタンを並べて配置したときなどは、画面サイズの小さいデバイス用にスタイルを設定するほうがみやすさが向上します。

画面サイズに応じたスタイルを設定する

画面サイズの調整のためのLuxeritasのスタイルシートにはこんなふうに書かれています。

/* 767px and under (bootsrap4 対応) */
@media (min-width: 576px) and (max-width: 767px) {
	.container {
		padding: 0 5px;
		width: 100%;
	}
}

これは画面サイズに合わせてスタイルを適用させるためのメディアクエリ(Media Queries)というCSSの機能を利用した記述です。

“min-width" は画面幅の最低値、"max-width" は画面幅最大値。こうすると576px 以上 767px 以下(768px 未満)の時に{}内のスタイルが適用されます。

しかし、min-widthとmax-widthで576px未満、576以上767未満、768以上などと全てを記述するのは煩わしい。

たとえばカラーやボーダーなど、スタイルの大半はPC表示・スマホ表示共通で使えるものを、画面サイズごとに指定する意味はありません。

画面サイズごとに厳密に指定しなくていい場合は全体をPCサイズで記述しておき、より小さい画面に合わせて調整したものを追記していくほうがスマートです。この方法をPCファーストと呼びます。

逆に小さい画面に合わせて全体のスタイルを書いておき、大きい画面に合わせた記述を追記していくモバイルファーストという方法もあります。

どちらでも構いませんが、モバイルファーストならmin-widthで順に大きいサイズを足していく、PCファーストならmax-widthで順に小さいものを足していくことになります。

めんどくさいことはおいといて

めんどくさいことはおいといて、PCファーストのmax-widthでメディアクエリを書いてみます。中身は適当です。

@media screen and (max-width: 991px) {
#side #thk-new .img{box-shadow:3px 3px 4px #ccc;}
}

@media screen and (max-width: 767px) {
.post h2{font-size:smaller;}
…
}
@media (max-width: 575px) {
.post h3{font-size:smaller;}
…
}

991pxはサイドバーが表示されてからなのであまり使いませんがありませんが、一応書いておきました。

screen and (max-width: 991px)の and は「かつ」です。表示させている機器がモニターで、なおかつ最大幅が991pxまでならこのスタイルを適用するということです。

min-widthなら変化の生じる画面サイズでよいのですが、max-widthはそれ以上大きいものには適用しないという指定なので、画面変化の生じるサイズから1pxひいた値を指定します。

全般に適用したいことはこの外に書き、必要なところだけ埋めていくことになります。

全てを埋める必要はなく、576px未満にだけ適用したければ、max-witdh:575pxのところに書けばOK。768px未満のところに書くと、576px未満の画面サイズにも適用されます。なぜなら575pxは768px未満に含まれるから。

このサイズ「以下」でこのスタイルを適用したいと思ったところに一つだけ書けば、それ以下の画面サイズ全てに適用されます。

モバイルファーストについてはこちらが詳しいです。

豆知識

@media screen and (max-width:991px)の他にも@media printといった書き方もあります。メディアクエリではPC(スマホ)画面のほかにも、print(印刷)、tv(テレビ)といった、機器による指定ができます。逆にscreen and と書かないと、すべてのメディアに対しての指定となります。

@media screen and とすると、印刷やテレビの出力に影響を及ぼすことなく、PCやスマホの画面サイズに合わせた調整を行えるというわけです。

厳密に使い分けるのでなければ、@media screen and (max-width){}といった書き方をしておくと無難でしょう。

なんか色々書き忘れてるような気がするけど、レスポンシブデザインのスタイル指定はこんな感じです。