2017年09月29日

レスポンシブデザイン

私のホームページは自分で作成しています。
スマホが普及しだしたころに遅ればせながらレスポンシブデザインにしました。

デスクトップPCやタブレット、スマホなどそれぞれの画面サイズによって同じ内容ながら表示の仕方を流動的に替えるアレです。

作った時はうまく出来たと思っていたのですが、メニューボタンやら作成していじっているうちに表示が崩れるようになったかもしれません。

最近Goggleの検索画面で自分のホームページの検索結果を見ていたら
「ページがモバイルフレンドリーではありません」というコメントが付くようになりましたふらふら

というわけで、いろいろ細かいところを修正しました。

はじめは画面サイズと縦横画面までを細かく分けていたのですが、いまはデスクトップ、タブレット、スマホ2の4種類に整理しました。
@media screen and (max-width: 1024px) {hogehoge;}
@media screen and (max-width: 768px) {hugahuga;}
@media screen and (max-width: 480px) {harehare;}
@media screen and (max-width: 360px) {hirahira;}
スマホは480pxだけでいいのかもしれません。

今はモバイルフレンドリーのお墨付きをもらっていますわーい(嬉しい顔)

デスクトップ版のブラウザは画面の大きさを自由に変えられますので、横枠を掴んで画面幅を小さくすると流動的に表示が変わるのが分かります。

スマホ356x561ピクセルの画面
ボタンを押してスライドメニューを出したところ
Screen Shot 2017-09-29 at 08.27.15.png

cssファイルの中身はまだまだブラッシュアップできるのかもしれません。
web製作は素人なのでこのへんでご勘弁を・・・。

posted by 片桐 健 at 08:30 | ホームページのメンテナンス