【161日目】レスポンシブデザインに手こずる

レスポンシブ対応のデザインに、すごく時間がかかっております・・・。

なんて思っていたら大間違い。自分が思ったようにスムーズに縦に並ばず、HTMLを書き換えて構造そのものを修正したり、CSSで思ったように動かなかったり。

それでもなんとか「スマホ用」「スマホ横向き用」「タブレット用」の３パターンのブレイクポイントを設定し、スムーズに動くようになりました。

画像の上に置いたタイトルのはみ出し

やっとできあがったー！と思ったのも束の間。

検証ツールを開いて、画面幅を伸ばしたり縮めたりして表示を確認していたら、またもやメインビジュアルのところの縦書き部分の挙動が変。

バックグラウンド画像の上に「innner」をもう一枚敷いて、h1 section-titleの「白背景タイトル」の位置を固定していたのですが、画面幅が縦に短くなると、タイトルがはみ出ていることが判明。。

↓こんな感じに、背景は小さくなるのに、タイトルの大きさがそのままなので、はみ出しています・

innerそのものが画像よりも下にハミでてしまっているので、innerに高さ指定を加えて、背景画像と同じ高さに揃えました。そうすると今度はタイトルが下のラインにくっついちゃっているので、下にもpaddingを５％追加。これで解決。

表のCSS指定が難しかった

「診療時間」の表は、dl, dt, ddで組んでいたのですが、dtの「日付」と、「黒背景のインデックス」横並びの部分が、レスポンシブにするとずれている・・・。PC表示の時は普通に横並びになっていたので、気づかなかったんですよね。

画面幅が狭くなると、変な風に重なってしまっています。日付はpタグ、インデックスはspanタグで記述していたのですが、それぞれにクラスをつけて、display: flex; で横並びにしたら解決しました。

文字列だからって、何も考えずに単純にpとかspanで記述した部分は、後から調整が難しいなぁと感じました。

↓修正後の挙動はこんな感じ。

そして、レスポンシブの最終チェックをしていた時に発見したのですが、dd部分の文字列が、親要素であるdlからはみ出てしまっていたので、それも修正しました。

デザインカンプにはdd部分のline-heightは2.4と記載があったので、その通りに記述していたのですが、dlの行の高さが63pxとなっており、line-heightの2.4を忠実に守ると、行から文字列がはみ出てしまいます。これはかなり迷ったのですが、line-heightを優先して、行の高さはautoで記述しました。（なので行は63pxよりも高くなってしまっています）

このあたり、カンプの読み取り方が、まだよくわかりません。

footerの位置に悩む

そして悩みまくったfooterの位置・・・。

「地図」と「診療時間の表」が横並びになっていて、「診療時間の表」の要素のちょうど右下にfooterがあるんですよね。
なので、最初はdivの中にfooterを記述して、地図とdivを横並びにしていたのですが、そうするとレスポンシブの時に、①診療時間の表②地図③footer、という順で縦並びにしたいのに、どうやって位置を入れ替えて良いのか分からなかったのです。

ググりまくって、orderをつけるとか色んなことを試したのですがうまくいかず。

結局、すでに納品された先輩たちの作品を検証ツールでのぞいてみて、やっと分かりました！

footerは「診療時間の表」のdivの中に入れるのではなくて、あくまでも最後に記述して、position:relativeとabsoluteを使って位置決めをしていました。なるほど！！！

いや〜、レスポンシブデザインって奥が深い。というか、本当に、レスポンシブのことまで考えて組まないとだめなんだなぁとよく理解できました。

「Webの神様」おすすめです

修正に時間がかかり、納得行く結果が得られないまま仕事が始まっちゃったりして、悶々とする日が続きました・・。

ゆっくりPCの前に座って作業をできない時は、あーでもないこーでもないと悩みながら家事をしていたのですが、とにかく何かヒントが欲しい！と家事の合間に視聴していたのが、「Webの神様」の動画。

今更ながら、模写コーディングやレスポンシブの動画を見て、すごく勉強になりました。隙間時間の学習に、おすすめです。

サムネイルが統一されてて見やすいので、動画一覧から、見たい動画を選びやすいです。

この「Webの神様」のなつこさんも、「HTLMの構成を考えるのが一番時間がかかります」とおっしゃっていました。

私は、「HTLMは結構簡単で、CSSは難しいな」と思っていたのですが、実は逆で、レスポンシブや後のことを考えると、HTMLの組み方というのは非常に重要です。あとで書き直しが発生しないために、色々考えておくことがあるのですね。

かたやCSSは、HTMLさえ決まってしまえば、ある程度はパターン化されてくるので、それほど難しくはないとのこと。私も早くその境地に辿り着きたい・・・。

はぁ〜、しょーごさんの「初級DX」当初の予定では先週提出する予定だったのですが、まだまだかかりそうです・・・。

頑張るぞ。