本日のテーマは「横幅」です
以前にレスポンシブウェブデザインについて触れました
スマホやPCどちらも場所や状況が違うので
宣伝目的のサイトにはあまり向かないというお話をしましたね
今回は企業サイトと動物病院のサイトで
このレスポンシブウェブデザインを使う機会があったので
いろいろ書いておきたいと思います
現在はhtml１つ、cssのメディアクエリで
画面幅に応じてスタイルシートを変更する方法で作業しています
動物病院の件では、予算の都合でTOPだけなのですが
いろいろ勉強になりましたね
ナビゲーションの部分はどうしても小さくなりすぎるので
PCでのhtmlではテキスト、cssでbackground指定しておくと
スマホ用にしたときに使いやすく変更が可能です
ここはホント作成のポイントですね
そもそも画像の横幅を半分にした値が320px以内に収まるように
画像サイズとレイアウトのバランスをとっとくと、いろいろ楽です
そうすると必然的に横640pxがメインコンテンツの横幅で
残り300px前後がサブコンテンツというか２カラム目、３カラム目で使える
最大幅になるわけですね
ま、自分はこういうのに縛られるの好きではないし
デザインの幅が狭まるのであまりきにはしませんが
機械的に作業ベースで考えたらある程度考慮するほうが早いでしょう
それで、今回一番悩んでいるのが画面の横幅です
知っている人も多いですがiPhoneの画面幅は320pxになります
横にしたときは480pxと、これが一つの基準になります
Androidはメーカーによってバラバラなので
だいたい640くらいあれば基本スマホ用にはなるかと推測しています
今回企業サイトはタブレットも考えないといけないので
これがくせ者な訳です
iPadの通常は768px、横にしたときが1024pxなんですけど
この1024pxってかなり怪しい数字なんですよね
なぜ怪しいかというと
画面いっぱいにブラウザを広げてみる人もいれば
やや小さめにして仕事するひともさまざまなわけで
意外とこのくらいのサイズでみているのではないかと・・・
最近のPCのモニターはだいぶ高解像度になっているので
ほとんどの場合、気にする必要は無いかと思いますが
お客様にもいますが古いモニターを使っているところも
少なくないのですよね・・・
そうなるとタブレット仕様になったりPCになったり
絶妙な感じにならないかと
そんな不安があります
そもそもタブレットはPCサイトでよくない？
という疑問が頭をよぎりまくります
明日もこの葛藤を続けながら難解なソースコードをスマホ対応かさせる作業です