【モバイルファーストな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
【<img>タグのレスポンシブ&Retina】
<img>タグを画面サイズに応じてレスポンシブに切り替え、
なおかつiPhoneのようなRetinaディスプレイの場合は高解像度版の
画像を選択的に読み込ませる方法です。
<picture> <source media="(min-width: 768px)" srcset="images/main_visual_l.jpg"> <source media="(min-width: 320px)" srcset="images/main_visual_m.jpg 1x,images/main_visual_m@2x.jpg 2x"> <img src="images/main_visual_l.jpg" alt="" class="img-responsive retina"> </picture>
＜解説＞
768px以上（PCとタブレット）
⇒main_visual_l.jpgを表示
320px～767px（スマホ）
⇒Retinaディスプレイならmain_visual_m@2x.jpgを表示
非Retinaディスプレイならmain_visual_m.jpgを表示
<picture>タグ非対応のブラウザなら<img>タグを表示
IE11が<picture>タグ非対応なので<img>タグには
PC用の画像を割り当てておきます。
＜この方法のメリット＞
CSSやJavascriptによって画面サイズごとに画像を切り替える方法では、
いったんサーバーからブラウザに各サイズの画像データを読み込むので、
PCはともかくスマホでは負荷がかかります。
この方法なら、最初から画面サイズや解像度に適した画像データだけを
ブラウザが選択的に読み込んでくれるので、無駄な通信負荷がありません。
【ディベロッパーツールでリアルタイム保存コーディング】
【WordPressで画面が真っ白になる原因と対策】
WordPressが他の無料ブログと決定的に違う点は、
自分のサーバーにインストールして使うことです。
その分、間違った変更をするとログインできなくなったり、
サイトが真っ白になることがあります。
真っ白になるのは、そのページを表示するための
HTMLが正常に生成されなかったということです。
WordPressはサーバーで動くプログラムであり、
それはPHPというプログラム言語で記述されています。
そのため、PHPを書き間違えると、
サーバー側でHTMLを生成する処理が途中で止まってしまい、
ログインできなくなったり画面が真っ白になったりするわけです。
典型的な原因は「functions.php」というファイルを間違って書き換えた場合です。
functions.phpは、サイトのページ（公開ページ）だけでなく
管理画面（ダッシュボード）でも、
表示に先立って必ず実行されるプログラムです。
ですから、functions.phpを書き換える場合は事前に
functions.phpをサーバーからPCにダウンロードしておきましょう。
そして、間違いがあれば変更前のfunctions.phpを
サーバーにアップロードして復旧しましょう。
▼無料相談をお気軽にご利用ください。
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
【見積交渉におけるRetina対応とレスポンシブ】
レスポンシブという言葉は浸透してきましたが、
Retinaディスプレイへの対応をするかしないかで
制作の手間が変わることや、Retina対応の必要性を
考えておられるクライアント様は少ないようです。
そんなクライアント様と見積交渉する上で、
Retina対応の必要性をご理解いただくためには、
↓５分で読めるので、読んでいただけますか？
必読！5分でわかるレスポンシブWebデザインまとめ その2 | 株式会社LIG
とお願いすると良いでしょう。
その上で、まずはRetina対応を前提とした
レスポンシブな費用見積を提示します。
クライアント様のご予算が合わない場合は、
「では、Retina対応をやめますか？」
で調整します。
あとは、ブレークポイントの数で調整です。
「iPadはPCと別にせず同じレイアウトにする」
それでも折り合いがつかない場合は残念ながら
クライアント様（窓口の担当者）のご理解が
とても浅いケースかも知れませんので、
「モバイル対応をせず、PC専用に構築する」
「モバイル専用に構築する」
のどちらか選択を委ねます。
もちろん、モバイル対応の必要性をご理解されて
ご予算が立ったときはご相談いただけるよう伝えます。
