CALENDAR
S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2019 >>
ARCHIVES
CATEGORIES
Twitter




Amazon左
MOBILE
qrcode
<< 第69回(2018)NHK紅白歌合戦 出場順・曲名・ゲスト審査員・出演者一覧 | main | ブログ記事で振り返る2018年 >>
ホームページTOPをリニューアルしスマホに対応
大晦日です。念願の、自分のホームページのTOP画面をスマホにも対応したレスポンシブデザインにしました。



以前はホームページの先生にお願いしたのでかっこよかったのですが、いかんせん、Flashを使っており、SSLを導入したらますます表示が厳しくなっていました。そしてGoogleで検索するとこれ見よがしに「モバイルフレンドリーではありません」と出てしまい、頭にきていました。



今回も、HTML5 & CSS3 デザインブックのサンプルコードを活用させてもらいました。ありがとうございます。本当にこの本にはお世話になった。本来は最初から順番に実際に試してみて学ぶ本だろうけど、大体の理屈はわかっているので(かなり忘れていたが)、ざっと目を通してサンプルコードと格闘した。これはよい本です。お勧めします。



しかし4回も続けて作っていると、だんだんと要領がわかってきて、工程的には複雑になっているのだけど、速度は上がっている。さすがである。

タブレットの幅での表示。最上部のh1タグで書いてある概要が、横幅いっぱいに表示される。「安くて気軽な公共の宿」などの地図は一列になる。



右側のサイドメニューは下部に落ちて、二列になる。



スマホ幅での表示。最上部の概要は数行になってしまってウザイので表示をしないようにして、さらに最新情報で画面がいっぱいになるので、これも表示しないようにした。display:none。



サイドメニューは下部に一列になる。



これらはほぼサンプルコードのままです。ありがとうございます。いずれにせよ、こんなカンジにしたかった。

スマホとタブレットの実際の画面。



今後は、中味のデザインがパソコン用のままなので、早くそれらをレスポンシブデザインにしてスマホやタブレットでもきれいに見えるようにしたいです。

今年の目標を達成できた気がして、ほっとしています。
ありがとうございました。

  
| パソコン・インターネット | 17:18 | comments(0) | - |


コメント
コメントする