
レスポンシブ対応したCSSを記述する方法

・今主流のスマホに対応した、表示が切り替わるWebページにしたい。
・WordPressで表示が切り替わるスタイルをどこに書けばいいのかわからない。
・WordPressのCSS追加方法でレイアウトの変更はできるけど、レスポンシブ対応できる書き方がわからない。
今回は、以上の悩みを解決できる記事を作成しました。
ココがポイント
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

皆様はよく、WordPressで記事を書いていると、
スマホで見るときは、違うスタイルにしたい。
このように思うときがありませんか?
なんと、WordPressにあるデフォルトの設定だけで
スマホとPCでレイアウトを変更することができます。
使用したいスタイルについて知りたいときは、
Google検索で「CSS リファレンス」と検索。
もしくは、「CSSリファレンス用冊子」から確認などがあります。
HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE)が
私も利用している便利なリファレンス用冊子になります。
逆引きから目的のコードを見つけやすい。
使用例もあるので、CSSのルールがわからなくてもCSSを書ける。
おすすめの一冊なので、是非手元に置いてみてはいかがでしょうか?
1.セレクタにいれる、id属性値とclass属性値、タグ名を確認

セレクタに入れる値を探す
参考
2.CSSコードをコピペ

CSSコードをコピペ
/* レスポンシブ設定 ↑PC ↓タブレット */ @media screen and (max-width: 768px){ .sample { /* タブレット専用スタイルを入れる */ } } /* レスポンシブ設定 ↑PC、タブレット ↓スマホ */ @media screen and (max-width: 480px){ .sample { /* スマホ専用スタイルを入れる */ } }
以上をコピーして、追加CSSにペーストします。
追加するのは、記述してあるCSSの一番下になります。(最重要)
ココがポイント
CSSスタイルの決まりとして、コードの一番上から順にスタイル読み込んでいきます。
このとき、Web上で同じ場所を指定するセレクタに、同じプロパティで違う値のCSSを書てしまったとします。
例えば、最初にfont-sizeを1px、次にfont-sizeを2pxにしたとします。
そうすると、Webブラウザでは後から読み込んだCSSスタイルが優先されスタイルの上書きが起こります。今回はフォントサイズが2pxになります。
そのような理由から、レスポンシブ対応したCSSを追加するポイントは、
下のCSSに、表示が切り替わるスタイルを書き、前のスタイルを上書きしていくというイメージをもっておいてください。
3.スタイル最初のセレクタ(.sample)を変える

セレクタを変える
タブレットの場合は、「/* レスポンシブ設定 ↑PC ↓タブレット */」の下の「.sample」に。
スマホの場合は、「/* レスポンシブ設定 ↑PC、タブレット ↓スマホ */」の下の「.sample」に。
それぞれ、目次「1.セレクタにいれる、id属性値とclass属性値、タグ名を確認」で確認した値を入れていきます。
書き方は、下表の「セレクタに入力するCSSコードの例」を参考にしてください。
属性 | コンソール画面の表示例 | セレクタに入力するCSSコードの例 |
id属性 | id="smartphone" | #smartphone |
class属性 | class="smartphone" | .smartphone |
それぞれのタグ | <a> | a |
4.{ }内にお好みのスタイルを書く

CSSスタイルをお好みにカスタマイズ
コピペしたコードの中にある
タブレットなら、「/* タブレット専用スタイルを入れる */」
スマホなら、「/* スマホ専用スタイルを入れる */」
が書いてある行にオリジナルスタイルを書いていきます。
「指定したいスタイル(プロパティ)+『:(半角コロン)』+値(2pxやblock等)+『;(半角セミコロン)』」
書いたスタイルは最後「;(半角セミコロン)」で終わります。
この「;」の後ろで改行すると、コードが読みやすくなります。
好みのCSSスタイルをみつけるには、「CSS リファレンス」でGoogle検索してみてください。
上記のWebサイトが探しやすいでしょう。
Google検索で探しても、目的のコードが見つからないときは、
上記の冊子はいかがでしょうか?
逆引きも見やすくできているので、目的のコードが見つけやすい。
また、CSSの書き方も記載例がのっているので、実際にCSSを書くところまでつまずくことなくいけます。
食事にかかる費用を2日節約すれば、買える一冊なので、
是非、手元にどうぞ!
まとめ
お疲れ様でした。
今回は、レスポンシブ対応したCSSスタイルを適用できるまで、をご紹介させていただきました。
ココがポイント
以上になります。
皆様も自分オリジナルのCSSスタイルを記述して、
目的に合ったWebデザインにしてみてはいかがでしょうか?
ご一読いただきありがとうございました。