トップに戻る

<< 前 次 >>

自サイトスマホ対応

◆外部サイト(自前でHTMLを作成しているもの)のスマホ対応化方法

・htmlファイルをテキストエディタで開く

・<head>の次の行に以下の1行を入れる

<meta name="viewport" content="width=device-width,initial-scale=1">

(<> を 半角にしてね)

・HTML、CSS内の、widthを固定幅で指定している箇所をすべて削除
 (px固定指定箇所があるとスマホ表示が変なことになる)

・たとえば、スマホの画面幅が320pxなのに、<table style="width:640px;">みたいなのがあると
 スマホの画面にtableタグを収めるためには、自動的に縮尺が50%になってしまう
 結果として文字がめっちゃ小さくなり、リンクがタッチしづらくなる

・ロゴ画像みたいなかっちり固定したいところだけ固定幅指定にして、それ以外はおおむね width: auto がオススメ

・PCである程度横幅制限をしたい場合は max-width に固定幅を指定するぶんにはスマホには影響ない

◆上級者向け

・PCとスマホでデザインを変えたい場合、CSSの@mediaを使う 詳しくは「メディアクエリ」で検索

◆雛形について

雛形もスマホ対応しました。説明書は変更がめっちゃ大変そうなのでまだ触ってません

これから外部サイト作る人は雛形使えば自動的にスマホ対応になります

過去に外部サイト作った人は、自分で変更してもらわないとスマホ対応にはなりません
9

きつねこ 先生に励ましのお便りを送ろう!!

〒みんなの感想を読む

<< 前 次 >>

トップに戻る