プログラミング独学day81のアウトプットは？
今日は
・クリ★スタ模写・中級でつまずいたところ②
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
クリ★スタ模写・中級でつまずいたところ②
現在、クリ★スタさん（@cresta_design）のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)
つまずく→解決がたまってきたのでシェアします。
模写コーディングで同じくつまずいている方の参考になればうれしいです。
①PCとスマホで改行を変える
レスポンシブ対応をするとき、PCとスマホで改行の位置を変える方法です。
下図のテキストの改行を、/の位置に変えてみます。
もともとPCで改行したい位置に<br>を付けていました。↓
スマホでは、この位置の改行をやめたいのでclass名を付けてCSSの指定ができるようにします。
また、スマホ版で改行を入れたいところにも<br>を入れます。↓
※それぞれのclass名は、”br-sp” “br-pc”としました。
ここから、CSSで改行のレスポンシブ対応を指定していきます。↓
スマホのみ改行を入れる部分には、
スマホ→display: block;
を使うことで、スマホのときだけ<br>を機能させることができます。
PCのみ改行を入れる部分には、
スマホ→display: none;
を使うことで、PCのみの改行になります。
※今回は、PCファーストでCSSを書いているので、モバイルファーストで書いた場合は逆になります。
やっぱモバイルファーストで書けるようになるべきなんだろうなー。
②レスポンシブで背景画像のサイズを変更
完成物はこちら
メディアクエリの設定をしていないと、画面サイズを変えたときこんな表示になってしまいます。↓
①まず、画面を覆うサイズにbackground-imgを拡げます。
background-size: cover;
大きさはよいですが、背景の画像の位置がずれてよくわからない画像になっています。↓
②映る範囲を「画像の中心」に移動させます。
background-position-x: center;
positionをx軸方向に動かすプロパティを使います。→center
画像の位置も正しく表示されました↓
iPhone6/7/8の幅だと、画面いっぱいに表示されていますが、これをiPhoneXにしてみると下に隙間が空いてしまいます。
これを解決するために、
height: 100vh;
を指定します。これで、画面の縦幅いっぱいに表示されるはずです。
これで、fvのレスポンシブが完成です。
ここで指定した単位：vhについてはこちらをご覧ください。
③<img>にwidthを設定したときのレスポンシブ対応
<img>にwidthを設定する話は、コードレビューをしてもらったログで解説しました。
HTMLで<img>タグ内にwidth、heightを設定することでレンダリング時のレイアウトのがたつきを抑えられるのでした。
widthとheight属性をimgタグにつけるとモダンブラウザではレイアウトのガタつきが抑えられる。必須だなこれは https://t.co/9hHfu4CwlF
— フロントエンドエンジニア (@terrace_tech) June 27, 2020
先生のツイートで知りました。
PC版のときは問題なく指定できていたものの、レスポンシブ対応で画面幅が小さくなると画像がはみ出てしまいました。（innerからはみ出てしまいます）
このようなときは、CSSでimgに対してpaddingをつけることで解決します。
あんまり適当なこと言ってたらすみません。
自分ならpaddingやmarginで頑張るかもしれません。
imgタグにつけるか、
親のdivタグにつけるかは、
試しながらですかね。。。— Ba7 (@Ba7_Tech) August 1, 2020
深夜にご回答くださった Ba7さん(@Ba7_Tech)ありがとうございます！！
padding-right: 4vh;
を指定すると解決。きれいにinnerに収めることができました！↓
あとがき
最後の③は、imgやdivにwidth:100%をつけるなどいろいろ試してもダメで、レスポンシブ対応するなら<img>にwidthを使えないのかなとまで思っていました。
つぶやき程度だった深夜ツイートに対して、親切に回答してくださったBa7さんに感謝です。ありがたい…そんな親切なエンジニアになりたいと思った午前3時でした。
今日は、以上です。レスポンシブについてはもう少しアウトプットが必要です。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
