bootstrapのスマホ/レスポンシブ対応(marginやpaddingを削除)

bootstrapのレスポンシブやモバイル対応の覚書です。bootstrapvueを使っていますが、vuetifyもだいたい一緒でしょう。

bootstrap-vueのグリットシステムをレスポンティブデザインに対応する

普通の書き方ではレスポンシブになりません。

<b-col cols="6"></b-col>
<b-col cols="6"></b-col>

次の書き方をするとブラウザの幅を変えるとレスポンティブデザインになります。

<b-col md="6"></b-col>
<b-col md="6"></b-col>

サイドバーは大きなiPadなどを考えてlg、コンテンツ内の要素はmdが個人的な好みですが、お好みでどうぞ。ただ、bootstrapのグリットシステムは合計12にします。12以上は2行になります。

xsは仕様変更があり効かないです。colsと書きます。

モバイル(スマホ)とタブレットとPCを分ける

モバイル(スマホ)2列(cols)、タブレット3列(sm)、PC6列(md)に分ける場合はこうなります。2*6は12掛け算するとどれも12になります。

<b-col md="2" sm="4" cols="6">
</b-col>

ツールを使うとわかりやすいです。colでスマホを2列、タブレット3列、PC6列にしてみましょう。

iPad Pro11の横幅が1194px。そこで1200px以上を6列にする場合、次のようになります。

<b-col lg="2" sm="4" cols="6">
</b-col>

b-colないに文章が入る場合は6列はきついので、3列と2列だけにすることが多いです。4列、3列、2列で運営しているサイトもありました。

<b-col sm="4" cols="6">
</b-col>

v-forでレスポンティブデザイン

要素で回す場合も少なくないのではないでしょうか。

<div v-for="l in list" :key="l.key" class="col-xl-2 col-sm-4 col-6">
    <span>{{ l.name }}</span>
</div>

divに入れちゃいます。

3列の場合を多くするならこうなります。3列、2列、1列と変化します。

class="col-lg-4 col-sm-6 col-12"

スマホやモバイルのみ余白(margin/padding)を削除

bootstrapって面倒です。

Bootstrapの余白って

container に padding 15px
row に margin -15px
col に padding 15px

が左右にもともと設定されてるんですね💡
今までなんとなくで調整してました
そう、僕はまだまだこんな感じです😅

また明日もがんばろ
おやすみなさい💤#プログラミング初心者

— ゆうすけ@アラ50でもWEB制作者目指してます (@dj_kenbishi) September 7, 2020

余計なことはせず全部0にしておいてほしいと思ってしまいます。。

rowにpx-5と指定してもmargin分外に引っ張れれるんですよね。px-5とmx-5は本来同じ長さですが、位置が揃いません。。

スマホの場合、PCと同じmarginやpaddingにすると邪魔になる場合が多々ありました。

一般的かどうかわかりませんけど、m-mobileというclassを作成して書き換えました。直接、rowを書き換えると影響が大きそうだったので。

@media (max-width: 480px) {
  /* mx-5がモバイルでレイアウト崩れの原因になる解除 */
  .m-mobile {
    margin: 0 !important;
  }

  /* px-5がモバイルでレイアウト崩れの原因になる解除 */
  .p-mobile {
    padding: 10px !important;
  }
}

モバイルで端から端まで使うコンテンツ

上記の対策だと481pxのスマホで微妙に右にずれたことがあります。marginが悪さしていました。

その場合はmax-widthを変更する方法もありますが、中央あわせできるコンテンツはすべてマージンを取ったことがあります。

<b-row class="mx-0 my-0 py-5 px-0">
  <b-col cols="12" class="px-0">
  </b-col>
</b-row>

b-colのpaddingが邪魔

b-colもデフォルトでpaddingが入っていますね。b-rowのpaddingを減らしても、モバイル対応で邪魔になることがあります。15pxあるため左右だけで30pxです。2つ並べると60pxです。大きすぎます。

<b-col cols="12" class="px-0"></b-col>

bootstrapのスマホ/レスポンシブ対応Tips

justify-content: start;を使うと余白が偏る

レスポンシブデザインで複数行にするとき(動的にコンテンツが増えるもの)、左寄せにするためjustify-content: start;を使います。しかし、左右の余白のでき方が違う場合はあります。

この問題は単純に割り切れないため、余りがでるっぽいです。そのためだいたい割り切れるように手動で調整する必要があります。

bootstrapvueではレイアウトの分岐はメディアクエリを使う!?

公式サイトに記載がないっぽいようですが、どうやらメディアクエリを使って対応している人が多いようです。

レスポンシブデザインのブレイクポイント

CSS書いている人に質問

レスポンシブ対応のブレイクポイントは…

— TAK (@tak_dcxi) January 27, 2021

端末によって決めている人(520px.960px)もいるようですが、Bootstrapを使う時点でそれにならって定数を決めた方がよさそうです。Bootstrapを使わなくても1つに決めたいので基本その値ですね。

「俺流レスポンシブコーディング」について記事を書きました。

俺流レスポンシブコーディング｜TAK https://t.co/B2OiSUujtv #zenn

— TAK (@tak_dcxi) February 15, 2021

次の理由によりmin-widthを使う方がよさそうです。

• 端末が大きくなるほど記述量が増える
• PCからモバイルだと上書きが増えるが、モバイル→PCだと上書きする必要がなくなる。
• mix-widthは「未満」にするため1減らすから面倒。

row colを使うメリット

row colなどを利用する、いわゆるグリットデザインの中身は、display:flex;です。

display:flex;はwidthの固定や%指定だけの構成と比べ、異なるデバイスでカラム落ちさせるポイントをうまく決めやすいです、

また全体の統一感や後から調整しやすいため、全部グリット内におさめるのが楽な気がします。

ただ現在、bootstrapを使っていますが、使うことにやや疑問をもっています。デフォルトのpaddingなどが邪魔だからです。。次のプロジェクトがあったら普通にflexを使うかもしれません。。

mx-5とpx-5の使いわけ。marginとpaddingはどっちでもいいわけがない!?

少しだけ基本を。

統一感がなくなくため、どっちでもよくないです。後から置換などする際にも不便です。

mxはmarginのxという意味です。

pxはmarginのxという意味です。

marginの意味は余白です。親子の距離です。

paddingの意味は詰め物です。兄弟の距離です(兄弟がいなくても兄弟ができる可能性があるもの)。paddingは境界線を描いたり影をつけたり色で塗りつぶしたり変にならないことを意識します。

給食のトレイがたくさん並んでいるイメージをしたらいいとどっかで見たことがあります。

トレイの内側がpadding、外側がmarginです。

本当にどっちでもよさそうな場合はあるかもです。その場合は塗りつぶししなさそうなものであり、marginを優先して使うことにしています。

bootstrapとclampでレスポンシブを仕上げる

clampの記事はこちらです。各要素を調整するのに便利です。

ebookbrain

clampのCSSの使い方(レスポンシブWebデザイン可変レイアウト) レスポンシブWebデザインのCSSの覚書です。clamp編です。 min-widthとclampのminの違いは? width: 30vw; min-width: 300px; height: 30vw; min-height: 300px

bootstrap-vueの使い所はどこまで

bootstrapvueというか、元のbootstrapが中途半端な気がします。

とくに、デザインとして見た場合、たとえば、角丸30%が好きなのですが、できません。決まったフォーマットしか選べません。

またグラデーションもないっぽいです、結局、ボタンはcssで書いた方が早いですね。CSSで書けばあっさりとかけるのに、返って余計な時間を使ってしまいました。。

チェックボックスもデザインにこる場合は、普通に書いた方がいい気がしますね。

前も言った気がするけど

Web制作会社への就職を目指す人はBootstrap勉強する必要ないですよ。
使う現場はほぼないです。

デザイナーが作ったデザインをコーディングすることがほとんどだから、bootstrapは使いません。

それより自分で考えてコーディングできるスキルのが必要です。

— あや🐈 (@ayaweb3) February 25, 2020

エンジニア寄り
jQueryはオワコン
WordPressはオワコン
CSSわからん
Bootstrap便利ですわ
Web開発

デザイナー寄り
jQueryは現役
WordPressは現役
JavaScriptわからん
Bootstrapなんて使わない
Web制作

多分こんな感じ

— あきぞー@プログラミング (@akizo110) May 21, 2020

Bootstrapはinput系などデザインにこると、逆にその制約が邪魔になりますかね。

この仕様だと、デザイナーさんは積極的に使いたいとは思わないんじゃないかな。bootstrapを勉強するなら、デッサンするか、typescriptとか勉強した方がよい。#bootstrap #プログラミング勉強中 #webデザイン勉強中

— 個人開発作家 まったりんneru (@neruplan) December 25, 2021

僕は美術学生だったので、基本デザインよりの意見だと思ってください。

仮のレイアウトを作るのならいいかもしれませんが、デザインをしっかりとしたい人には中途半端かもしれません。bootstrapは使い所を絞ってグリットのレイアウトに使うぐらいですかね。何でもbootstrapでできると思わず、絞ってコンパクトに使うといい感じじゃないかもという気がします。