ゆるくはじめるWordPress.

テーマをレスポンシブにするためのCSSの書き方【WordPressテーマ作り STEP2】

responsive-css

前回の1.テーマをレスポンシブにするためのHTML5の書き方から引き続いてCSS編です。HTMLをCSS3のメディアクエリでレスポンシブにしていく方法を書いていきたいと思います。

CSSのリセットとNormalize.css

レスポンシブの前に一応この話を。
各ブラウザのデフォルトスタイルの差異を埋めるために使われるリセットCSSやnormalize.css。私は有用なスタイルは残したままバグの修正などをしてくれるnormalize.cssを入れています。
各ブラウザ共にバンバン目まぐるしくアップデートされていて、webの環境も日々移り変わっているので定期的に見直す必要はありそうですが、必要だと思ったら最初に入れておくと便利です。

Normalize.css

参考:normalize.cssで使用されている各スタイルがどのように機能しているか解説 | コリス


まずはCSSでリキッドレイアウトに

前回作ったHTMLにCSSを適応させていきます。

CSS

.header {
}

.wrapper {
  float: left;
  width: 100%;
  margin-right: -300px;
}
 
.content {
  margin-right: 300px;
}
 
.sidebar {
  float: right;
  width: 300px;
}
 
.footer {
  clear: both; 
}

floatでsidebarとcontentを横並びにし、ネガティブマージンを利用してsidebarの横幅分ボックスを削ったところにサイドバーがはまるようになってます。
そのsidebarがはまっているwrapperの横幅が相対値(%)で設定されているので、これで画面幅によってサイズが伸び縮みするリキッドレイアウトになりました。一方sidebarの方は絶対値で幅が指定されているので、sidebarの幅は変わらずcontentの方だけがどんどんサイズが変わっていく造りになってます。

リキッドレイアウト

下記サイトをお手本にさせていただきました
これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方 | OXY NOTES


メディアクエリでモバイル対応

Media Queries メディアクエリ

続いてCSS3のメディアクエリ機能を使って、画面サイズが○○px以下だったらこのCSSを適応する。というような事を指定していきます。
例えば画面の横幅768px以下をモバイル端末とみなしてPCとは別のスタイルを適応させたい場合、さっきのCSSの下に

CSS

@media screen and (max-width: 768px) {
}

とすると、画面サイズ768px以下の時にこの中のスタイルが適応されます。ここまでの記述と変えたい部分をこの中で上書きする形で書き加えます。

CSS

@media screen and (max-width: 768px) {
  .inner, .content, .sidebar {
    float: none;
    margin: 0;
    width: auto;
  }
}

このようにするとスタイルが各クラスで上書きされます。これでモバイル画面ではfloatが解除され、縦並びのレイアウトで表示されるようになりました。

モバイル表示

メディアクエリにも色々な指定方法があるので、状況に応じて使い分けてみてください。
参考:Media Queriesの指定について – Qiita


ブレイクポイント

メディアクエリを使用するにあたって、まずぶち当たるのがPCとモバイル(タブレット・スマホ)の境界を何pxで指定すればいいのか?だと思います。この境界点の呼び名がブレイクポイント。

どんどん新しい機種が発売されて画面サイズのシェアもその時々で変わっていくので、これが正解という数字はきっとないですが、サイトのデザインやアクセスの多い端末のサイズなんかから自分のサイトにあったブレイクポイントを決めていくとよいと思います。
下記サイトで主要な端末の画面サイズが見られるので参考にどうぞ。
Device metrics – Google Design

Goodle devicemetrics

dpとpxがあってややこしいですが、一番端のDensity(密度)が例えば2.0ならpxが2倍の密度で表示されるのでdpがpxの1/2になってます。つまり実際画面で表示されるのはdpの方。
私はipadの縦置きの横幅768pxをブレイクポイントにしてそれ以下をモバイル表示とし、iphone5など320pxの狭い画面で表示される端末もまだまだ多そうなので、iphone6 plusの414pxまでちょっと範囲を広げてまたブレイクポイントを作って画像の大きさなどを少し変えて見やすくなるように設定しています。

CSS

/*===============================================
768pxまで スマホ・タブレット用
===============================================*/
@media screen and (max-width: 768px) {

}

/*===============================================
414pxまで スマホ用
===============================================*/
@media screen and (max-width: 414px) {

}

自分で使ってるのがiphoneだったから基準に選んだというのもありますが、最初はそんな感じで確認しやすい端末で体感しながらやっていくのもいいんじゃないかなと思います。


さいごに

レスポンシブデザインはユーザビリティの向上はもとより、モバイルフレンドリーなサイトかどうかがGoogleの検索結果の評価基準に含まれるとGoogleから公式に発表されているので、SEOの視点からも重要ですね。
ちなみにしっかりスマホ用にサイトを作ると、スマホでのGoogle検索結果に『スマホ対応』とラベルが表示されます。

モバイル フレンドリー アップデートにより、モバイル検索では、携帯端末で読みやすく使いやすいページの掲載順位が引き上げられます。
Google ウェブマスター向け公式ブログ: モバイル フレンドリー アップデートを開始します

スポンサーリンク

公開日: