前回までの状況はこちら
最新ソースはこちら(gitHub)
https://github.com/takishita2nd/hotel-mng
さて、残る作業はレスポンシブ対応ですが、
そもそも、レスポンシブ対応とは何かというと、
PCだけでなく、スマホやタブレットでも、そのデバイスに対応した表示に切り替えることができる対応、ということです。
PCでは正しく表示できても、スマホだと表示が崩れて使用できない、というのはレスポンシブ対応とは言えません。
その確認のために重宝するのが、Google Chromeのレスポンシブモード。
擬似的にスマホやタブレットでの表示に切り替えてくれる機能です。
使い方は、Google Chromeの画面でF12を押し、
このボタンをクリックして青色（絵の状態）にします。
表示エリア上部にこんな感じのバーが表示されますので、ここをクリックすることで、画面の表示解像度を切り替えることができます。
こうやってレスポンシブ対応できているかを確認するのですね。
実機を使うと、それだけ実物のデバイスを用意しなければなりませんので、これはかなり有効な確認方法です。
ためしに、作成中のいろんなページを表示させてみましょう。
こんな感じで文字が２行になるのはまだ読めるのでセーフです。
こんな感じで表示が枠からはみ出てしまったらアウトですね。
修正する必要があります。
こういうのは、たいていテンプレートやスタイルの問題です。
こんな感じでどうでしょうか。
いい感じに仕上がったと思います。
実は、Laravelには、標準でBootstrapというJSライブラリが組み込まれていて、このライブラリでブラウザ差分を吸収したり、基本的なレスポンシブ対応を行えるようにしてくれています。
今作成している機能はBootstrapをバリバリ活用した作りになっていません。そもそもそんな表示をするところが無いためです。
もしかしたら、画像のサムネイルなどをたくさん表示させたり、表を二列に表示させる場合などに活用することになるかもしれませんね。
まぁ、これで最終チェックして提出しようと思います。
