フリーランスが会社員収入を継続して得られないパターン7つ

progate卒業したばかりの初心者が間違えやすいポイント(レスポンシブ編)

バンコクのエンジニア講座であるisara3期課題を通して間違えたポイントと解決策を紹介します。

1.レスポンシブで背景画像がずれる。常に真ん中に固定したい。

問題

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

解決策

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

HTML

CSS

2.font-sizeを最小値にしても文字サイズが正常のものと比較して大きくなってしまう

問題

google画面で反映される最小のfont-sizeは10pxです。

これを下記のように10pxに設定しても反映されない(文字サイズが10px以上になっている)場合があります。

解決策

1.<head></head>内のファイルに原因がないか確認する。例としては以下のような記載のbootstrapファイルが原因なこともあります。

2.bootstrapファイルや他のファイルの表記を変える

Google Chromeの検証機能で、対象のfontがbootstrapファイルで指定されていたり、他のファイルで指定されていることがあります。その場合は、対象ファイルのfont-size表記を変えましょう。

3.ファイルごと変える

上記を変えてもダメ、もしくは1つ1つどのbootstrapファイルが影響を与えているか調べるのが面倒な場合は新たなファイルを作成して作りましょう。

少し怖いですが、私はこれで直りました。

4.font-sizeを最小サイズの10px以下にする

font-sizeを規定しているclassに以下4つを記載しましょう。下記のコードの(0.4)を変更することでサイズを変更できます。ただ周辺のコンテンツとの間に幅が出来てしまうのが難点です。

CSS

 

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

問題

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

解決策

1.以下で紹介されているbackground-size:contain;やbackground-size:100% 100%;を試す

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

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

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

progate卒業

 

4.複数の要素をfloatで横並びにした場合に高さが揃わない

問題

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

progate卒業

解決策

1.display:table;、display: table-cell;を使う

HTML

全体を加工要素にdisplay:table;を、高さを同じにしたい中身の要素にdisplay: table-cell;というCSSプロパティを使いましょう。

float-leftにするとdisplay:block;やdisplay:inline-block;が外れてしまい高さが出なくなることもdisplay:tableを使うのが有益な理由です。

CSS

2.heightをコンテンツごとに%で変える

原始的な方法ですが、heightをコンテンツの大きさに応じて変えて横並びの要素それぞれが同じ高さになるようにしましょう。

HTML

CSS

 

5.div要素がimgを囲んでいるとき下に余白ができる

問題

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

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

解決策

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

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

3.display:block;にする

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