読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

f:id:wp-lesson:20170221111943p:plain

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