しょーごさんコーディング課題「初級EX」のスマホ用レスポンシブデザインができました！！
スマホとタブレット用に関しては、柔軟にデザインして良いとのことで、カンプは提供されていません。なので逆に、「この配置どうしよう？」「やってみたけどなんか変だからやっぱりこう・・・」とかやっているうちに、どんどん時間が経っていきます・・・。
自分のスキルが未熟なために、本当はここはこうしたいけど、できないからコレでいいや的なところもありました。（本当は最後まで粘るべきなんでしょうけど。）
いまだに分からないカンプの読み取り方
非常に基本的なことなのですが、いまだにデザインカンプの、特に文字周りについて、分からないことが多いです。
デザインカンプの文字のところをクリックすると、右側のメニューのところにフォント周りの情報が出てくるので、それを元にline-heightを計算して、そのままCSSに記述しています。
ですが、カンプを見ると、文字の周りを囲っている青いラインって、指定されているline-heightの幅と違いますよね？？？余白がほぼ無いというか。
でも、余白は、その青いラインを元に記入されている・・・。なので、余白の数字をそのままCSSに記述すると、カンプの数値よりも合計の余白が多くなってしまうことが多いです。私のカンプの捉え方が間違っているのか、いまだによく理解できないので、迷いながらやっているところも、時間がかかっている原因です。
そして、今日は色々修正している間に、緑の下線がぐいーんと下に離れちゃったり、、、直すのに時間がかかりました〜・・・。
flexboxを使用した時の、要素の順番の入れ替え
もう一つ苦しんだのがですね、、レスポンシブ対応した時の、要素の表示順の入れ替えです。
PC用だと、左に地図があって、右にロゴや診療時間の表があるので、それをdisplay:flex;で横並びにしました。
footerは、地図の下のラインに合わせたかったので、診療時間の表のdivの中に記述したのですが、これをレスポンシブで縦並びにした時の、表示順の入れ替えができない！！！
まずは、検索したらヒットしたこちらのサイトを参考に、表示順の入れ替えをやってみたのですが、うまく行きません。。。
単純にflex-direction:column;の後に、子要素であるdivに「order: 1;」とか順番をつけて表示すれば良いらしいのですが、そもそも、このデザインって、左側は「地図」だけ、右側は「診療時間の表」と「フッター」の二つが入っています。
この、左にひとつ、右にふたつの要素の時の、並び順の入れ替えがうまくいかず。。。結果、地図より上にfooterがきてしまっています。
いやいや、footerは一番下じゃないとダメやろーーーー。。。
これは、提出するまでになんとか修正したいのですが、とりあえず次は、先に「タブレット用」デザインを組んでみたいと思います。
まだまだ道のりは長い・・・。
コメント