(2024/5/1)

スマホ対応のホームページを作る

私は、このホームページの新記事アップをしばらく休んでいました。 その間、スマホ対応のホームページ作成の勉強をしていたのです。

世の中はスマホ(smart telephone 賢い電話機)が大普及し、現在は、 ほとんどの人がスマホでサイトやブログを見ているという話を読んだ からです。

確かに街を歩いていると、若い人達はスマホを手に持って歩いていま す。そして、時々、サッと画面を見るのです。私と同じ70代ぐらい の高齢者も散歩中、立ち止まってスマホの画面をジーと見入っています。

そのため、大幅に遅ればせながら時代に合わせて、私もスマホ対応の ホームページを作らなければならないと思ったのです。

(自分のホームページをスマホで見る)

スマホ対応のホームページを作り始めるに当って、自分の、このホーム ページがスマホでどのように見えているかを確認するところから始めよ うと思いました。何事も出発点が大事です。

そのため、初めてスマホを買いました。ソニー製で基本ソフトは グーグル社のアンドロイドです。電話会社は近所にショップがあるauと 契約しました。スマホが動かなくなったとき相談できるところがないと 困ると思ったからです。

1ヵ月ぐらいしたところで、思った通り動かなくなってしまい、ショッ プに行って見てもらい色々と教えてもらって、何とかなりました。

若い店員さんは、面倒だなあという感じで教えてくれました。こちらは 歳はいっていますが、スマホのことは何も分かりませんので謙虚に教え てもらうしかありません。

(スマホは制約が厳しい)

自分のこのホームページをスマホで見てみました。字がとても小さいの です。ピンチ(pinch 縮小拡大)で広げて拡大しました。今度は少しの 部分しか見えません。

予想はしていましたが、スマホは少しの情報しか伝えることができない のです。

この厳しい制約の中で、新しいホームページを作りました。参考にした 本は、「HTML/CSSの絵本 翔泳社」です。題名が絵本となっていますが、 題名通り図解が多く分かりやすい本です。

HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉

新品価格
¥2,178から
(2024/4/8 17:21時点)

パソコンもインターネットも電気が流れているだけで、中は目に見えま せんので図で説明してもらうとイメージが把握できて助かります。デジ タルの世界はイメージ把握が重要です。

meta要素にviewportを設定することによってデバイス(device 機器)毎 に見せ方を変えることができます。パソコンでは、横並びになる画面表示 が、幅の狭いスマホでは自動的に縦並びの画面表示になります。このよう にして、スマホ表示の字が比較的大きくなります。

レスポンシブ(responsive 反応する)という方法です。デバイスの幅に 反応して自動的に見せ方を変えるのです。素晴らしい巧みな方法です。

(スマホ対応ホームページは一旦諦める)

しかしながら、スマホの場合、私のようにインターネットを使って、ある 程度まとまった情報を発信しようとする者にとって、画面の狭さという 絶対的な制約は厳しいということも痛いほど分からされました。

私は、このホームページに戻って新記事アップを続けることにしました。 今回作ったスマホ対応のホームページは、そのままにしておいて、いつか スマホの素晴らしさを生かせるホームページにしようと思っています。

(了)