スマホ対応のWebページを作ってみる

今までwebアプリケーションは何度か作ってみたことはあったが、スマホ用のものは作ったことがなかった。
今後も作る機会があると思うので、ここに気づいたことをまとめておこうと思う。

1.viewportの設定
 まずスマホに対応させるために一番最初に行ったことがviewportの設定である。
qiita.com
細かいことはここに書いてあるみたいだが結局のところ以下のように宣言しておけばいいらしい。

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


2.bootstrapを使う
 webアプリを使う時に私の中で必須なのがこのbootstrapである。全く労力をかけずにそれなりのデザインができるのでお勧めである。導入の方法は簡単で、公式ページからbootstrapをダウンロードして、自分のディレクトリに移し、呼び出してあげるだけである。
http://getbootstrap.com/
 bootstrapは、あらかじめCSSが書かれているものにid名やクラス名を合わせることでスタイルを適応させるというものである。「bootstrap table」と検索すればどのようにクラス名をつければいいデザインになるかわかったりする。

3.スーパーリロード
 まあ、これはローカルにサーバーを立ててる時に起こりやすいことなんだけど、cssを書き換えてもサーバーにキャッシュされてしまって更新しても変更が反映されないことがある。そんな時はこのスーパーリロードである。キャッシュとかもの含め更新してくれるので、cssの変更がきちんと反映される。
Mac+chromeの場合は「Ctrl+更新ボタン」である。ブラウザとOSによって異なるので詳しいことはこれを見ると良い。
www.netyasun.com

とりあえず今回はこんなところかな。