【CSS】キーデバイスを決めるという話。

こんにちは！

朝晩寒いですが、日中は暖かいですね。

天気が良い日なんかはデジカメを片手に散歩をしたいですね。

ま、僕はしませんが(笑)。

さて、僕はWebサイトを作って勉強しているのですが、何を基準にするかというお話です。

PC、タブレット、スマホとありますが、僕はスマホをキーデバイスにしています。

■ スマホで問題なく表示させることに全力を注ぐ

実は、スマホ対応はあまり難しくありません。

何故なら、画面幅が小さいので、デザインは限られてきます。なので、簡単なCSSを書けばOK。複雑なデザインだと時間がかかります。

実際に手を動かしている人なら分かるかと思いますが・・・。

コンテンツ量によりますが、僕は1～2時間程度で終了します。

ま、1ページだけですが(笑)。

■ スマホの次は

スマホで問題ないことを確認したら、僕の場合は横幅768pxの端末をターゲットにします。

ま、iPadになりますけどね。大概、デザインが崩れているので、メディアクエリで対応。

iPadは縦横でサイズが異なるので、それぞれに対応するメディアクエリで対応します。

結構難しくて、難儀しますが・・・。先ほど、スマホは1～2時間と書きましたが、iPadでは2時間を超えることも・・・。

辛く悲しい道のりです。

それを超えると、いよいよPCに対応という形になります。とは言え、これまでの工程だと、あまり書くことはありません。

なので、スマホとPCは比較的簡単というお話ですね。

「PCでも様々な画面サイズがあるのでは！」って思う方がいるかもしれません。

僕は1200pxで作ってます。ネットで調べた結果、どうやら1200pxがベースだという事を知り、今は1200pxで作ってます。

ま、画面サイズを大きくしてもいいですが・・・。メディアクエリでナンボでも対応出来ますし。

■ なぜ、スマホなのか

そもそも、何故スマホなのかというお話ですが、圧倒的にスマホからホームページにアクセスされる方が多いと思っているからです。

これもネットの情報なのですけどね。ふと「スマホ向けサイトにして、それ以外は無視するか！？」なんて思ったのですが、まぁ、それはダメだと思って、スマホ以外も対応していますけどね。

■ さいごに

1.スマホ

2.iPad

3.PC

という順番であります。前はPC対応から作っていたのですが、上記で書いた通り、「スマホを1番にしたほうがいい」と思いました。

今後も、まずはスマホ向けから対応したいと思っています。

おわり！