プログラミング独学day70で、得たことや気づきを教えて！
今日は
・【模写】レスポンシブで初心者がつまずいた点と解決策まとめ
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【模写】レスポンシブで初心者がつまずいた点と解決策まとめ
現在、クリ★スタさん（@cresta_design）のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)
初級編からはじめていますが、すでに「なるほど〜こうすればいいのか」と思うことが溜まってきたので、解決策をシェアします。
同じところで詰まっている方の参考になったら嬉しいです。
① 縦並びにしつつ、要素の順番を入れ替える
下記のようなdisplay: flex;を使った横並びの要素。(クリ★スタさんの模写教材)
これを、レスポンシブ対応にしていきます。
画面サイズをスマホサイズにしてみると、見栄えが悪く見づらくなってしまいました。↓
今回は、デザインカンプにしたがって、要素の順番を変更してみます。
下記の①→②の順番を、②→①に変更します。
display: flex; の対象となっている子<div>に対してコードを追加します。
order: １;
今回は、①の画像の親要素<div>にコードを追加しました。
こうなりました。
ここから、要素を縦並びにしていきます。
もともと、display: flex; を指定していた要素に、追加↓
flex-direction: column;
これを設定することで、フレックスのコンテナーを横並び→縦並びに変更できる。
下記のようになる↓
みやすくなりました！
！ちなみに…なぜ要素を縦並びにするときに「display: block;」を使わないのか？
について解説します。
確かに、要素を縦並びにするときにdispley: blockを使うことも可能です。
しかし、display: block; と order: 1; を兼用すると…
このように、order: 1; が効きません。（本当は、画像を文字の下に変えたいのでした。）
order: 1; はflexのコンテナーに対して働くものだからです。
orderを使いたい時は、flex-direction: column;を使います。
② 画面サイズを小さくしても、文字を折り返さない
PC版
relative位置の画像に、absolute位置の文字が重なったファーストビューです。
「Cresta Design.」の文字ですが、スマホの画面サイズにすると、
上図のように、文字が画面サイズに押しつぶされて折り返されてしまいます。
そこで、Cresta Design.の<p>に対して
white-space: nowrap;
とすることで、文字の折り返しをしない設定に変更できます。
完成↓
③画面サイズによって、使用する画像を切り替える
PC版とスマホ版で別の画像をつかいたいときは、HTMLで設定できる<picture>という便利なタグがあります。
たとえば、<picture></picture>のなかに切り替えしたい画像を2つ設定してみます。
<picture> <source media="(max-width: 767px)" srcset="img-pc.jpg"> <img src="img-sp.jpg"> </picture>
上の<source>にmax-width: 767pxと設定することで、指定の画像はスマホので表示されます。
下は、PCで表示させるデフォルトの画像です。
このpictureタグを使うことで、CSSの設定いらずで簡単に画像の切り替えができます。
あとがき
模写は2度目かつ、初心者向けのものを選んでいるため
コーディングで詰まるというより、レスポンシブで悩みました(;´д｀)
次の模写で使えるTIPSを増やせるように、積み上げていきます。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
