ウェブサイトのスマホ対応: お気楽論

会社のホームページをスマホ対応せなアカンなと思って、いろいろ苦労した結果、何とか最低限の処置はできたようなので、やったことをメモしておこう。

１、HTMLファイルの<head>部にビューポート・タグを書く

<meta name="viewport" content="width=device-width">

２、CSSファイルの中身をコピペして、１つのファイルの中に２つスタイルシートがある状態にし、一方を

@media screen and (min-width: 769px) {　　}

の中に入れてPC用にスタイルシートにする。もう一方を

@media screen and (max-width: 768px) {　　}

の中に入れてスマホ用にする。

/* PC用スタイル */とか書いておく。

３、スマホ側のスタイルシートを修正する

・画像やリストのfloatをやめる

・画像がはみ出ないように　img {max-width: 100%;}　と指定

・文字サイズ、改行高さ、paddingなどの調整

４、見栄えの確認にはブラウザの開発モードを使用

chromeでもfirefoxでもF12ボタンで開発モードになり、

cromeのHTMLビューワのメニューにあるスマホアイコン

firefoxはビューワの右の方にあるレスポンシブデザインモードボタン

をクリックして再読み込みすると、スマホ表示になる