ウェブサイトのスマホ対応 ― 2015年09月01日
会社のホームページをスマホ対応せなアカンなと思って、いろいろ苦労した結果、何とか最低限の処置はできたようなので、やったことをメモしておこう。
1、HTMLファイルの<head>部にビューポート・タグを書く
<meta name="viewport" content="width=device-width">
2、CSSファイルの中身をコピペして、1つのファイルの中に2つスタイルシートがある状態にし、一方を
@media screen and (min-width: 769px) { }
の中に入れてPC用にスタイルシートにする。もう一方を
@media screen and (max-width: 768px) { }
の中に入れてスマホ用にする。
/* PC用スタイル */とか書いておく。
3、スマホ側のスタイルシートを修正する
・画像やリストのfloatをやめる
・画像がはみ出ないように img {max-width: 100%;} と指定
・文字サイズ、改行高さ、paddingなどの調整
4、見栄えの確認にはブラウザの開発モードを使用
chromeでもfirefoxでもF12ボタンで開発モードになり、
cromeのHTMLビューワのメニューにあるスマホアイコン
firefoxはビューワの右の方にあるレスポンシブデザインモードボタン
をクリックして再読み込みすると、スマホ表示になる
1、HTMLファイルの<head>部にビューポート・タグを書く
<meta name="viewport" content="width=device-width">
2、CSSファイルの中身をコピペして、1つのファイルの中に2つスタイルシートがある状態にし、一方を
@media screen and (min-width: 769px) { }
の中に入れてPC用にスタイルシートにする。もう一方を
@media screen and (max-width: 768px) { }
の中に入れてスマホ用にする。
/* PC用スタイル */とか書いておく。
3、スマホ側のスタイルシートを修正する
・画像やリストのfloatをやめる
・画像がはみ出ないように img {max-width: 100%;} と指定
・文字サイズ、改行高さ、paddingなどの調整
4、見栄えの確認にはブラウザの開発モードを使用
chromeでもfirefoxでもF12ボタンで開発モードになり、
cromeのHTMLビューワのメニューにあるスマホアイコン
firefoxはビューワの右の方にあるレスポンシブデザインモードボタン
をクリックして再読み込みすると、スマホ表示になる
コメント
トラックバック
このエントリのトラックバックURL: http://bun.asablo.jp/blog/2015/09/01/7767571/tb
※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※なお、送られたコメントはブログの管理者が確認するまで公開されません。