レスポンシブ対応した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デザインにしてみてはいかがでしょうか？
ご一読いただきありがとうございました。
