レスポンシブデザインで使用するCSSの元ファイルサンプルです。
CSSの記述ルール
空のCSSサンプル
【条件】
・モバイルファーストのレスポンシブデザイン
・スマホ／タブレット＆PCの２段階切り分けのみ
・ブレイクポイントは600px
【解説】
分かりやすいように目次をつける。
・大カテゴリは＝線を使って分かりやすく分ける。
・大カテゴリを増やした場合には目次と本文の両方を修正する。
・MF-1.Base Structure / PC-1.Base Structure などのようにMF(モバイルファースト＝スマホ)とPCでインデックスを分けておくとスマホとPCでのスタイルを書く場所を間違えにくいので便利（実体験より痛感）
ファイルサンプル
/* =======================================
LAYOUT CSS
-----------------------------------------
INDEX
-----------------------------------------
MF-1.Base Structure
MF-2.Header
MF-2-1.Site Title
MF-2-2.Header Navi
MF-3.Globalnavi
MF-4.Toppage
MF-5.Contents
MF-6.Side
MF-7.Footer
MF-8.Form_contact
MF-9.Another
-----------------------------------------
PC-1.Base Structure
PC-2.Header
PC-2-1.Site Title
PC-2-2.Header Navi
PC-3.Globalnavi
PC-4.Toppage
PC-5.Contents
PC-6.Side
PC-7.Footer
PC-8.Form_contact
PC-9.Another
========================================== */
/*モバイルファーストでスマホ用のスタイルを記述*/
/* MF-1.Base Structure
========================================== */
/* MF-2.Header
========================================== */
/* MF-2-1.Site Title ---------------------------------------- */
/* MF-2-2.Header Navi ---------------------------------------- */
/* MF-3.Globalnavi
========================================== */
/* MF-4.Toppage
========================================== */
/* MF-5.Contents
========================================== */
/* MF-6.Side
========================================== */
/* MF-7.Footer
========================================== */
/* MF-8.Form_contact
========================================== */
/* MF-9.Another
========================================== */
/* smartPhone */
@media screen and (max-width: 600px) {
/*何らかの都合でスマホのときだけ適用させたいスタイルがあればコチラに記載する。*/
}
/* tablet and PC */
@media only screen and (min-width: 601px) {
/*ここにタブレット/PC用スタイルを記述*/
/* PC-1.Base Structure
========================================== */
/* PC-2.Header
========================================== */
/* PC-2-1.Site Title ---------------------------------------- */
/* PC-2-2.Header Navi ---------------------------------------- */
/* PC-3.Globalnavi
========================================== */
/* PC-4.Toppage
========================================== */
/* PC-5.Contents
========================================== */
/* PC-6.Side
========================================== */
/* PC-7.Footer
========================================== */
/* PC-8.Form_contact
========================================== */
/* PC-9.Another
========================================== */
}
