まずタブメニューとスワイプでレスポンシブのページを作る

ウェブサイトの制作でレスポンシブの隅々まで目が行き届くようになるには相当の時間を要する。

最低でも4つのブレークポイントが必要である。これは4種類のレイアウト構成が必要だということであり、このレスポンシブの骨格を深く吟味していないと、後で取り返しのつかないことになる。

例えばページ展開をガイドするタブインデックス

判読可能なフォントサイズを使って、タブを横に並べてみる。それをモバイルのPortrait（縦方向）とLandscape（横方向）で確認する。普通にテキストを並べるだけでは、Portraitでは横幅が短いのでタブが溢れてしまう。そこで、タブをクリックするとスライドして次のタブを表示させることでこの問題点を解決した。

モバイルのページ展開は片手でスワイプ可能

ページ展開で最適に機能するのは現時点ではスワイプが最適である。この機能はモバイルを片手だけで操作可能にする優れものだ。もし、貴方がページ下部に配置した「次へ」のリンクボタンで従来通りの対応を考えているとしたら、それはとても野暮ったいものだと気付くだろう。さて、ここまで作り込んだら、ページのデザイン・レイアウト・カラム・機能を導入して半分ほど完成したと言って良いだろう。

さて残りの半分につて、テキストやイメージに関連付けられた付加情報のデザインを行っていく。

モーダル、アコーディオン、アニメーション、地図、引用など

サイト内リンクのリストはページ下のアコーディオンに閉じ込めてある。別の方法、例えばモーダルでも実現できるが、このタブメニュー方式で少数コンテンツでは不要になるかもしれない。

モーダルに於いてモバイルに特化したものへアップグレードした。また、PCでは動くがモバイルでは動かないという機能は用いない主義である。ここは優先的にモバイルファーストで行こう。

このページでは「AOS」のアニメーションを追加してみた。

尚、アコーディオン、モーダル、地図、引用については、上のタブをタップするか、ページをスワイプさせるとご覧いただける。

基本構造はJavaScriptを使用せずCSSのみで動いている。だから、モバイルが持つ本来の基本機能のピンチアウト(pinch out)・ピンチイン(pinch in)が当たり前に使える。また、拡張機能を追加するときのコンフリクトの心配がないことは重要だ。

二種類の大小のモーダルを用意する。PC向けとモバイル向けの二種類をデバイスに応じてスイッチさせて表示する。これがレスポンシブでモーダルを開くときの解決策である。但し、作業は増える。

その理由は上の一つ目の画像をご覧いただければお分かりいただけるだろう。この画像がモバイルを横にしたときのモーダルサイズであり、このサイズにすると縦方向へ多くが溢れてしまう。

二つ目の画像はモバイル用のモーダルサイズを使った場合であり縦・横方向すべてが収まる。

三つ目の画像は、イメージのみを開きたい場合である。不要なものは一切排除して(特に画面が狭いモバイルを配慮して)、ボタンまでも排除したものも用意した。イメージの右上にFont Awesome の を表示させてピンチアウトができることを表示した。

四つ目の画像は、全てのデバイスでイメージのみを横幅いっぱいに開けるように設定。大きな動画を見るときにLandscape（横方向）で見るのと同様だ。ここでは閉じるボタンを画面右上に配置した。

実際のレスポンシブ対応のモーダルウィンドウの挙動はここでも多くの種類が確認できる。モバイルのPortrait（縦方向）やLandscape（横方向）でその対応の有無を吟味してみると、世の中にはモーダルが意図している機能を実現していないものを見かけることがある。何のために開かせるのかが問題だ。

このページを執筆中にBootstrapの新しいバージョンが出ていることを発見した。だから、ついでにバージョンアップさせて検証してみた。レイアウトが壊れている部分がある。モーダルに付属しているcss及び本サイトのcssのいくつかが「bootstrap.min.css」と競合していることが判明。「bootstrap.min.css」を外部ファイルに書き出して修正をかける必要があった。