フリーランスが営業なしで受注する方法5つ

レスポンシブにならない?初心者がよく間違えがちなミス5選【コピペ5分】

レスポンシブコーディングをしていると、「レスポンシブににならない!」と悩む初心者は多いのではないでしょうか?

わたしがprogate卒業後の状態でよく犯した間違え5選と解決策をコピペOKな状態でお伝えします。

レスポンシブにならない?初心者がよく間違えがちなミス5選【コピペ5分】

レスポンシブにならない1.背景画像を常に真ん中に固定したい。

レスポンシブで画面サイズを伸縮すると、背景画像がずれてしまう。背景画像を常に画面の真ん中に固定したい!

background-position:center;を設定する。

HTML

CSS

 

レスポンシブにならない2.font-sizeを最小値にしても小さくならない

font-sizeが小さくならない、効かない場合の対処法

 

レスポンシブにならない3.背景画像がレスポンシブで画面内に表示されない

背景画像を縮めた時、背景画像がほとんど見えなくなってしまう場合の対処法です。

1.background-size:contain;やbackground-size:100% auto;を試す

background-sizeには色々な設定方法があります。必要に応じて変えてみてください。

2.画像をスマホ用のものに変える(サイズや見え方が違うものを使う)

左はPCやタブレット用、右はスマホ用の画像です。

スマホ用でも写真のコンテンツを全て見せたい場合は以下のように縮尺や大きさの異なる画像を使いましょう。

progate卒業

 

レスポンシブにならない4.複数の要素をfloatで横並びにした場合に高さが揃わない

例えば3つの要素を横並びにした場合、ある要素だけ高さが短い場合の対処法です。これはコンテンツの中身に大きさ(多さ)によって高さが決まっているために起こる現象です。

floatで複数要素の高さがずれる場合に揃える方法はdisplay:table;

 

レスポンシブにならない5.divでimgを囲んでいるとき下に余白ができる

divがimgコンテンツを囲っているとき、imgはinline要素で高さがないため余白ができてしまいます。

margin,paddingを指定していないことを前提とします。

1.pxなどで特定のheightを指定しない

2.object-fitinherit;でコンテンツの高さをいっぱいにする

3.display:block;にする

imgがinline要素で高さがないため、高さをつけましょう