最近、ウェブで使える便利ツールのサイトを作っているのですがスマホ向けのレイアウトを最近勉強中なのでメモとして残しておきます。
Webサイトをスマホレイアウトに対応させる方法（簡易版）
PC向けのレイアウトのサイトを作って、後からスマホ向けのレイアウトにも対応させたい場合、以下の方法でやればそれっぽい見た目にすることができます。
（今回紹介するのは簡易的な方法なので、ちゃんとやりたい場合はちゃんとしたHTML5やCSSのサイトをみた方がいいと思います。）
1. HTMLのヘッダーにviewportを設置する
まず、HTMLのヘッダーにviewportを設置します。HTML側の設定はとりあえずこれだけでOK。
<!DOCTYPE html> <html lang="ja"> <head> <!--- 省略 ---> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <!--- 省略 --->
2. 画面サイズ毎の設定をCSSに書く
そして、cssファイルに画面サイズ毎の設定を記述します。
@media screen and (min-width:480px) { }
上記のかっこの中にタグなどの設定を記述すれば、480px以上の画面サイズの場合にかっこ内の設定が適用されます。
上記のかっこ外に記述した設定は画面サイズ480px未満の場合に読み込まれます。
なので、480px以上をPC向け、480px未満はスマホ向けのレイアウト用のcssを書けばスマホレイアウトにも対応できるという感じです。
例としては以下のような感じです↓
/*PC用*/ @media screen and (min-width:480px) { /* 画面サイズが480pxからはここを読み込む */ a { color: #930056; } } /*スマホ・PC以外 */ /* リンク */ a { color: #31315c; }
上記の場合だと、PCとスマホでみた場合のaタグリンクの色が変わります。
この方法を使えば、スマホサイズの場合だけ表示するフォントサイズを変更したり、ハンバーガーメニューをつけたりすることができるので、
とりあえずスマホレイアウトにも対応できます。
