スマホサイトを作ってみた
パソコン用ホームページ制作の練習をしてきたのですが、そろそろスマホ・携帯用のサイトも作ってみたくなりました。
ホームページを作るとき、最近はモバイルファーストといってスマホ・携帯サイトを作ったあとでパソコン用ホームページを作るのが主流になりつつあります。
ですが私はいままでパソコン用ホームページをメインで作成してきたため、今回も最初にパソコンサイトを作り、それをスマホ・携帯サイトに作り替えるという手順を取ることにしました（私はこれをパソコンファーストと呼んでいます）。
パソコンファーストでホームページを作ってみた結果ですが、私は「二度とパソコンファーストではホームページは作らない」と心に強く刻みました。
なぜ私がそう思うようになったのか、以下にその理由を書いてみたいと思います。
パソコンファーストで苦労した点
デザインに制約がある
パソコンファーストで苦労した点は大きく2つあります。
1つはデザインに関する点です。
ホームページ制作というのは、例えるなら倉庫に荷物を詰め込む作業のようなものです。
モバイルファーストは小さな倉庫にある荷物を大きな倉庫に詰め替える作業、パソコンファーストは大きな倉庫にある荷物を小さな倉庫に詰め替える作業といえます。
小さな倉庫から大きな倉庫に詰め替える場合、荷物の詰め替えは比較的容易です。
ところが大きな倉庫にある荷物を小さな倉庫に詰め替えようとすると、いろいろと工夫しないと倉庫に入りきりません。
パソコンファーストでホームページを作ると、それを小さくするために行を折り返したり、構成物を非表示にしたりと、様々な工夫をしなければならないのです。
もちろんモバイルファーストで作る場合も小さな画面は手間はかかるのですが、パソコンファーストのようにいったん大きな画面で作り、それを小さくするほうがはるかに手間がかかります。
CSSの構成に悩む
モバイルファーストのCSS構成
もう1つ悩んだのはCSSの記述構成です。
私はメディアクエリでホームページを作っているのですが、モバイルファーストの場合は、最初に1番小さな画面のデザインを記述し、その下に順次、大きな画面のデザインを記述していくことになります。
例えば小画面（400px）、中画面（800px）、大画面（1200px）のサイトを作る場合、モバイルファーストであれば
- 小画面（400px）
- 中画面（800px）
- 大画面（1200px）
の順に記述すればいいですよね。
これはCSSの記述として統制がとれてきれいです。
仮にこのサイトに大々画面（1600px）を追加する場合も、
- 小画面（400px）
- 中画面（800px）
- 大画面（1200px）
- 大々画面（1600px）
の順に記述すればいいだけですね。
パソコンファーストのCSS構成
ではパソコンファーストでホームページを作る場合、どの順で記述するのがよいのでしょうか？
パソコンファーストだから最初に大画面（1200px）を記述しますよね。すると構成は
- 大画面（1200px）
- 中画面（800px）
- 小画面（400px）
となるのでしょうか？
ではこのサイトに大々画面（1600px）を追加したい場合はどうすればいいのでしょうか？
- 大画面（1200px）
- 中画面（800px）
- 小画面（400px）
- 大々画面（1600px）
と記述するのでしょうか？ それとも
- 大々画面（6500px）
- 大画面（1200px）
- 中画面（800px）
- 小画面（400px）
とするのでしょうか？
CSSの記述ルールを決めておかないと、CSSがどんどん見づらくなりますね。
またきちんとCSSの記述場所を考えないと、記述場所によっては優先順位（下に書くほど優先適用される）のためにセレクタが複雑になりすぎるという問題も生じます。
つまり、きれいなCSSをつくるという観点からもモバイルファーストでホームページを作るほうが理にかなっているのです。
今回、パソコンファーストでホームページを作ったことにより苦労はしましたが、それによりモバイルファーストの意義がよく理解できたことが大きな収穫でした。