- 2020.05.13
PCとスマホでデザインを切り替えるメディアクエリ・ブレークポイント
レスポンシブなウェブサイトで必要になるメディアクエリとブレークポイントです。
もくじです
CSSのメディアクエリで見た目を変える
ブレークポイント画面の横幅749px以下に対応させるメディアクエリ
@media screen and (max-width: 749px){
ここにスタイルを記入
}
ブレークポイント画面の横幅750px以上に対応させるメディアクエリ
@media screen and (min-width: 750px){
ここにスタイルを記入
}
メディアタイプについて
上記のメディアクエリでは「screen」を設定しています。
この場合はPCやスマホの画面に対応しています。
プリントしたときに対応したい場合
@media print and (min-width: 750px){
ここにスタイルを記入
}
「print」にすると、プリンターでプリントアウトする際のみに指定できます。
複数の条件で対応させたい場合
ブレークポイント画面の横幅750px以上1000px以下に対応させるメディアクエリ
@media all and (min-width: 750px) and (max-width: 1000px){
ここにスタイルを記入
}
このように複数の条件を指定することも可能です。
なお、ここではmediaタイプを「all」に設定しています。
「all」の場合は、画面の「screen」、印刷の「print」や、音声の「speach」など全てに対応させます。
人気の小技
-
WordPress
投稿記事のカテゴリ名の表示、カテゴリIDの取得
2020.05.04 -
html/css
画像をほわっと下から上に表示させる
2020.05.15 -
WordPress
Uncaught TypeError: $ is not a function のエラーを解決する
2020.05.14 -
WordPress
ACF Advanced Custom Fieldsで画像を繰り返しフィールドで設定する
2020.05.08 -
Apache/Linux
htaccessでIP制限
2020.05.03 -
Apache/Linux
htaccessでディレクトリや拡張子を変更してリダイレクトしたい
2020.10.23 -
Apache/Linux
SSHでZIP圧縮(一部のディレクトリを除く)
2020.07.02 -
WordPress
WordPressの自動更新を止める
2020.05.15 -
html/css
cssで回転させる
2020.05.12 -
Apache/Linux
htaccessでhttpをhttpsに
2020.05.05