スマホ対応のサイトの作り方

 こちらはパソコン教室なので、ホームページ作ります、という仕事もやってます。
 そりゃあこちらもパソコン教室なのでホームページくらい作れるんですが、一般の人に見てもらうきれいなのはちゃんとした業者さんにお願いしたほうがいいです。ネット通販やってるとか、日替わりでメニュー変えてるような場合とか(いまどき少ないとは思いますが)

 ウチでは会社案内とかそういうBtoBのものをかなりお安く作ってます。

 BtoBとは、会社対会社とか、商売上の関係です。会社対一般、会社対顧客、というのはBtoCといいます。

 で、BtoCだとスマホ対応のものがいいんじゃないかと思います。スマホで検索する人が増えましたから。BtoBなら会社のパソコンから検索する方が多いでしょうから、これまで通りパソコン対応のものだけで十分だと思います。

 さてそこで、スマホ対応のホームページの作り方です。
 要点のみです。

 やることはみっつあります。
1 画面サイズに応じてページの横幅が変わるようにする。(リキッドスタイル)
2 画面サイズに応じて画像のサイズが変わるようにする。
3 ページ幅の上限を指定する。

繰り返しますが要点のみです。

ではその方法です。

1 リキッドスタイルにするには

ヘッダにこれを追加する
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">


2 画像の自動拡大

本文の画像をこんなふうにします。
<p class="resizeimage""><img src="なんとかかんとか.jpg">



これはCSSでも指定すること


3 ページ幅の上限を指定
これはcssだけで指定


4 CSSはこんなふうに

「@charset "UTF-8";
 html{max-width:920px;}
 p.resizeimage img {width: 100%;} 」

※ブログに書く関係で一部を全角で書いてます。なのでまるまるコピペできません。あしからず。

1行目は文字コードを指定する、という内容です。省略してもいいです。たぶん。
2行目はページ幅の上限の指定です。
3行目は画像の自動縮小です。
画像のサイズの自動縮小については、cssで「ここのところは自動縮小で」と指定するほか、本文の画像のところに「ここんところはCSSの指定に従うように」と、2番のように指定すること。
この例では画像も<p>で囲って文字扱いにしてますんで

の内部に「ここんところはCSSの指定に従うように」と書き足してるわけです。
別に<p>で囲まなくてもいいんじゃないかとは思ったんですが、やってみるのも面倒で試してません。


 以上、適当ですがこれでちゃんとできてますのでいいんじゃないかと思います。

 なお、他にも気をつけることはあります。
 google地図を貼りつけするときはスマホ標準の横幅にするとか、ボタン類を大きくしないで画面サイズに合わせてきれいに流れるようにするとか。
 各自いろいろやってみてください。



7/26追記
いつのまにか投稿時にタグの設定ができなくなりました。原因は、ブログの設定でサイドメニューにタグを表示させないようにすると、投稿時にもタグが表示されなくなるようです。
そんなわけでこの記事にもタグを追加することができるようになりました。

[PR]
by nonnbiri001 | 2016-07-05 15:44 | 管理人日記 | Trackback | Comments(0)
トラックバックURL : http://hajimeyou.exblog.jp/tb/24506934
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
<< 7月のおたより お盆の予定ほか Excelの日付入力 >>