【初心者向け】CSSのmedia queriesの使い方
「webサイトに訪問したユーザのデバイスサイズや環境毎に表示形式を変えたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- cssでmedia queriesの使い方が分かる
昨今、webサイトを訪問するユーザが使用するデバイスはPC、スマホ、タブレット等非常に多岐にわたります。せっかくwebサイトをデザインしても、PCのユーザにしか綺麗に表示されないともったいないですよね。
是非本記事をお読みいただき、理解を深めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
cssのmedia queriesとは
cssのmedia queriesを使用することで、「このブラウザとデバイスの環境の時には、このデザインにする」というように、環境ごとに表示するデザイン形式を変えることができます。
これだけだとイメージが湧きづらいと思うので、早速次にコードを見ていきましょう。
cssのmedia queriesの使い方
まず、cssのmedia queriesの基本を紹介します。
@media media-type and (media-feature-rule) {
/* CSS 規則をここに記載 */
}
環境の条件を「media-type」と「media-feature-rule」に記載し、その中に適用したいcss規則を書けば完成です。
まだイメージがつかないと思うので、具体例を見ていきましょう。。
@media screen and (max-width: 500px) {
body {
color: green;
}
}
上記の例では、「ビューポートが500pxより狭い場合には緑色にする」という設定をしています。
今回は上記の1つの例だけですが、media queriesを複数繋げて、「500pxより狭い場合には緑、500pxより広い場合には薄い緑」とパターンに応じたcssの設定が可能です。
まとめ
いかがでしたでしょうか。今回は初心者向けなので基本的なmedia queriesの書き方を紹介しました。是非本記事をきっかけに、各ユーザの環境に適したwebサイト設計を進めてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
