【モバイルファーストなCSS】

モバイルファーストとは、モバイルデバイス向けの
最適化を優先したウェブページの作り方を言います。
　
コーディングにおいては、
モバイルでアクセスしたとき最小限のリソースのみ
読み込むようにすることで、表示速度を無駄に遅く
しないという配慮もモバイルファーストの考え方に
基く結論です。
　
CSSファイル1つで書くなら、
最初にモバイル用スタイル、次にPC用スタイルを。

/*モバイル用CSS*/
・・・・
・・・・
@media screen and (min-width: 768px) {
　/*PC用CSS（タブレット含む）*/
　・・・・
　・・・・
}

　
CSSファイルを分けるなら、PCのみ追加CSSを
読み込むようにHTMLでメディアクエリを記述。

<link rel="stylesheet" href="mobile.css">
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 768px)">

　
こうすれば、モバイルアクセス時は mobile.css
しか読み込まれません。
　
もしPCでアクセスした場合は、mobile.css に続いて
pc.css が追加で読み込まれます。
　
処理能力が高いPCのほうに、たくさんの読み込みを
任せる（シワ寄せ）ことで、モバイルを優先している
わけですね。

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy