モバイルフレンドリーアップデートが実施されました。だからという訳ではないのですが、前からスマホ対応しなきゃと思っていたにも関わらず、ズルズル先延ばしにしてきたので、Google に尻を叩かれた格好でむしろ丁度良かったです。
自分のサイトは、入門用のテンプレートから拡張してきたので、根本的なHTMLから変更しなければならないのですが、その前に display:flex の練習も兼ねて、今ある ID や Class のスタイルの変更のみでやってみたところ、いとも簡単にレスポンシブにできました。あるブラウザを除いては。
あるブラウザ11も対応しているはずで、事前に簡単なページを作成して動作の確認もしました。だけど少し複雑になると他のブラウザでは表示されているのに、あるブラウザ11のみ表示が崩れていました。それも壊滅的に。微妙な解釈の違いやバグがあるみたいです。
結局、時間を費やしたのは、ほぼ全てそのブラウザに掛かった時間のみ。
これについては、後日、詳しく記事にしたいと思っていますが、同じように flex で苦労しているのなら、「高さ」に注意してみるとよいかもしれません。
一応、CSS の変更のみで形だけはモバイル対応できました。見方を変えれば、display:flexは、非常に柔軟に表示させることができるということです。なんと、並びの順番まで指定可能です。
今回は、サイトをスマホ対応させるにあたって苦労したところや気がついたところを書きたいと思います。 何か役に立つかもしれません。
