ウェブサイトのスマホ対応 ― 2015年09月01日
会社のホームページをスマホ対応せなアカンなと思って、いろいろ苦労した結果、何とか最低限の処置はできたようなので、やったことをメモしておこう。
１、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はビューワの右の方にあるレスポンシブデザインモードボタン
をクリックして再読み込みすると、スマホ表示になる
１、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はビューワの右の方にあるレスポンシブデザインモードボタン
をクリックして再読み込みすると、スマホ表示になる
最近のコメント