TIL

Today I Learned. 知ったこと、学んだことを書いていく

レスポンシブデザインで気にすること - HTML

C HTML レスポンシブデザイン

Progateに書いてあったことを自分なりにまとめてみる

  • 画面サイズによって横並びにするコンテンツ数を変更する
  • paddingとborderもwidthに含める
  • width: 100%;にする
  • floatの解除
  • フォントサイズもレスポンシブ化
  • 最大の横幅を指定する

画面サイズによって横並びにするコンテンツ数を変更する

例）通常時は4つ、1000px以下のときは2つ

通常時：25%
1000px時：50%

1000pxのときも25%にしてしまうと、小さくなってしまうため

/* 通常時 */
.item {
  width: 25%;
}

/* 〜1000px時 */
@media(max-width: 1000px) {
  .item {
    width: 50%;
  }
}

See the Pen 画面サイズによってコンテンツの横幅を変える by tamago (@tamago324) on CodePen.

paddingとborderもwidthに含める

コンテンツを横並びに敷きつめるときに、paddingとborderを設定する場合、コンテンツの合計の横幅が100%を超えてしまう
対処法として、box-sizingプロパティにborder-boxを指定する。こうすることで、要素のwidthにpaddingとborderが含まれるようになる

width = width + padding + border

※ marginは含まれないことに注意する

また、box-sizingをborder-boxにする場合、すべての要素に対してスタイルを適用すること
表示がおかしくなることがあるらしい

* {
  box-sizing: border-box;
}

box-sizingを指定しない場合

See the Pen レイアウト崩れ by tamago (@tamago324) on CodePen.

box-sizing: border-box;にした場合

おさまってる！！！

See the Pen レイアウト崩れの対処法(box-sizing: border-box) by tamago (@tamago324) on CodePen.

widht: 100%;にする

一番上の要素の横幅を100%にしておけば、画面サイズによって横幅が決まるようになる

.container {
  width: 100%;
}

floatの解除

すべての子要素にfloatが設定されていると、親要素の高さは0pxになってしまう。そのため、子要素の高さに合わせて親要素も設定してくれるようにfloatを解除しないといけない

float解除についてはここにかいた

親要素にdisplay: flow-root;をつけるのが簡単でいいかも

.contaienr {
  display: flow-root;
}

フォントもレスポンシブ化

フォントサイズもレスポンシブ化する必要がある

画面が小さくなったら、文字も小さくする

最大の横幅を指定

パソコンで2000pxとかの画面サイズで表示した場合、コンテンツを%で指定していると、横長になってしまう
横幅の最大値を設定しておけば、横長になりすぎることがなくなる！！

max-widthプロパティで指定できる

.container {
  max-width: 1200px;
}

参考文献