覚え書01

■デスクトップファーストの記述例

body { background:#E4E3E4;} /* 1024px以上の幅の場合に適応される */
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
body {
background-color:#2262D1;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
body {
background-color:#f10010;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
body {
background-color:#F9DF2C;
}
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
body {
background-color: #68B876;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body { background:#E4E3E4;} /* 1024px以上の幅の場合に適応される */
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
body {
background-color:#2262D1;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
body {
background-color:#f10010;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
body {
background-color:#F9DF2C;
}
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
body {
background-color: #68B876;
}
}
この様に大きいサイズから小さいサイズすることもできますが、現在のメディアクエリの指定方法は”モバイルファースト”が圧倒的に多いです。
デスクトップファーストの場合、ブラウザの読込順序は最初に適用されるのがデスクトップ向けのスタイルからモバイル向けのスタイルとなります。
モバイル向けのスタイルにいくまでに余計なデスクトップ向けの重たいファイルなども読み込んでしまうため結果的にページ表示が遅くなるというデメリットがあります。
その為、現在は”モバイルファースト”が優勢といえます。

ユーザー目線でみると、”デスクトップファースト”にはメリットが少ないようにみえますが、”デスクトップファースト”は「最初にPCの画面」からスタイルを記述するので
デスクトップ向けのサイトを作ってきた製作者にとっては、作りやすいといえます。

ターゲットの閲覧環境が「PC重視であればデスクトップファースト」、「モバイル重視であればモバイルファースト」といったようにルールで
どちらを採用するかを選んでもよいかもしれません。

少し話がそれてしまいましたが、メディアクエリは比較的緩やかな仕様ですが必ず順番に書かなくてはいけません。
モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。
必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。