レスポンシブル対策（表示画面横幅調整）をCSSで行ってみる平成30年 9月 14日 作成
概略
PCの大画面での閲覧のみを想定としたwebデザインではスマホ・タブレットの表示時に問題が生じる場面が出てくるので、その対応を考える。
手段
画面の横幅によって表示方法を変更・適用させるCSS「Media Queries（@media screen）」にて。
実装方法
表示幅に違いによってテキストカラーが変更されるサンプルを作成。
CSS
// 全てに適用
p {
color: #323232;
font-size: 2.2rem;
font-weight: bold;
}
// 横幅 640px以上 979px以下に適用
@media screen and (min-width: 640px) and (max-width: 979px) {
p {
color: #FF0000;
font-size: 2.4rem;
}
}
// 横幅 639px以下に適用
@media screen and (max-width: 639px) {
p {
color: #0000FF;
font-size: 2.6rem;
}
}
HTML
<div id="wrapper"> <p>サンプルテキスト</p> </div>
デモ
考察
閲覧されるデバイスは多種多様、画面横幅を意識したデザインは必須になってくるのかなぁ。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
