もしかして・・・私の認識が間違ってるのかな？

だったらごめんなさい。


パーツがそろったところで、レイアウトしていきましょう！

そうだ、flexbox！

これは、かなり以前からありました。
当時は、うまく実装できなかったやつでしょ？

いつのまにか、メジャーになってたんですね。
もう、float left なんて使わなくていいんですね！
clear fix なんてしなくていいんですね！！


うれしい！！！


flexbox に入れると並ぶではないですかー！



と感激していました。


そこで、子要素をくくって、
ちょっと配置をいろいろしようと思いました。

SliderPro の要素を div で囲むと・・・。

ぎょっ？

なんで、縮んじゃう？？

width 付けてるのに？？？

ただ囲んだだけなのに？？？？

あたりまえだけど、flexbox に入ってなければ縮まないです。
flexbox の外を囲んでも当然大丈夫。

一緒に普通の box を囲んでみたら、そっちは縮んだ分伸びちゃう。

そりゃそうだ。


SliderPro の幅は、script で付ける仕組みです。
試しに css で幅を付けても反映されませんでした。

えー・・・どうしよう？

そこで、SliderPro だけを囲んだ div に width を付けたら広がった！

そうでしょうとも。
そうか、grow か basis で幅を指定しちゃうのね？

でも、これってどうなのよ？
気になるのは、SliderPro の responsive 。

で、ブラウザーを縮めてみると・・・。

その中で responsive する！

ということは、div のなかで寄っちゃたりしてかっこ悪いのでした。


これは・・・そうかぁ。


ちょっと複雑に flexbox の中に組み込もうとした場合、
responsive させずに、メディアクエリにしたほうがいいかもですね。

まあ結局、スマホでは縦並びになるからいいんだけど。

今回は、flexboxを使ったなるべく単純なソースで、
PC や タブレット でもかっこ悪くないものを目指してるのです。


ということで、妥協点でおさめることにしました。

ふぅー。 なんとかできたかな？




よしよし、Safari でも Chrome でも Firefox でも大丈夫！
iPhone でも Android でも大丈夫！！


っん？ そーいえば、IE って？？


はっきりいって、もう過去の IE は無視しようと思ってます。
以前の IE で見てくださってる方ごめんなさい。
Firefox か Chrome でお願いします。


でも、やっぱり現行の IE は確認しないと。

いくらなんでもこんな単純なソース、問題のありようがないでしょ？


って・・・さすが、我らが IE です。


一人、独自の flex 。 幅が変。

縦並びになるんだったらいいけど。

モニターの全画面表示で、画面外にはみ出るってなんですか！

横スクロールもできないって、なんですか？！


もしかしたら、私の書き方が根本的に間違ってるのかしら？
でも、IE 以外だったら大丈夫だしなぁ？？

可変要素がある折り返しでへんてこになっちゃうようでした。


気をとり直して、ちまちまと修正。
結局、ほとんどの要素の幅を一定に。


見やすいからいいことにしよう！


やっと、基本レイアウトが完成しました！



としたところで、ハタと気づいた。


お店の大画面の iMac で確認してないじゃん。
えっ？ どう見えるんだろうか？？


「ちょっと、確認させてください。思いっきり全画面表示で！」


うわぁ！ でかい！！

すっごい横に並んじゃう。
並んでほしくないキャプションまで並んじゃう！


全画面でみる人なんていないと思うけど・・・

・・・いるかもしれない。


max-width を指定でいいかしら？ いいよね？？

また、ちまちまと修正、修正。


あぶないところだった・・・やっぱり確認は必要ですね。


実は今回もう一つ、すっかり Retina のことを忘れていて、
画像を大きくしてなかったのでした。

いや、前回のはちゃんと大きくしていたのに、
新しく書き出しで、うっかりリサイズしてしまったんですよ。


iPhone でなんでボケるんだろう？

・・・すべて再リサイズ。


ボケてるのは、私だった！

関連記事

• リニューアルしなければ！vol.05 【ボタンエフェクト】
• リニューアルしなければ！vol.04 【flexboxで楽々？】
• リニューアルしなければ！vol.03 【スライダーどうする？】