【模写】レスポンシブで初心者がつまずいた点と解決策まとめ【day70】

HTML/CSS

プログラミング独学day70で、得たことや気づきを教えて!

今日は

・【模写】レスポンシブで初心者がつまずいた点と解決策まとめ

をアウトプットします!

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜1時に独学しています!

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

【模写】レスポンシブで初心者がつまずいた点と解決策まとめ

現在、クリ★スタさん(@cresta_design)のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)

初級編からはじめていますが、すでに「なるほど〜こうすればいいのか」と思うことが溜まってきたので、解決策をシェアします。

同じところで詰まっている方の参考になったら嬉しいです。

① 縦並びにしつつ、要素の順番を入れ替える

下記のようなdisplay: flex;を使った横並びの要素。(クリ★スタさんの模写教材)

これを、レスポンシブ対応にしていきます。

画面サイズをスマホサイズにしてみると、見栄えが悪く見づらくなってしまいました。↓

 

今回は、デザインカンプにしたがって、要素の順番を変更してみます。
下記の①→②の順番を、②→①に変更します。

display: flex; の対象となっている子<div>に対してコードを追加します。

order: 1;

今回は、①の画像の親要素<div>にコードを追加しました。

 

order: 0; が初期値なので、1に設定することで「2番目」に順番を変えることができる。

 

こうなりました。

 

ここから、要素を縦並びにしていきます。

もともと、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はこちら

タイトルとURLをコピーしました