プログラミング学習

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

プログラミング学習

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

体験談:個人開発におすすめで安いVPSサーバー!コスパよしXserver VPS!

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>
  • Extra small (xs) <576px
  • Small (sm) ≥576px
  • Medium (md) ≥768px 1カラム62.5px(左右15pxを含む
  • Large (lg) ≥992px 1カラム80.8…px(左右15pxを含む)
  • Extra large (xl) ≥1200px 1カラム97.5px(左右15pxを含む)

サイドバーは大きな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列にしてみましょう。

Coming Soon
shoelace.io

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って面倒です。

余計なことはせず全部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ではレイアウトの分岐はメディアクエリを使う!?

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

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

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

次の理由により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の記事はこちらです。各要素を調整するのに便利です。

clampのCSSの使い方(レスポンシブWebデザイン可変レイアウト)
ebookbrain.net
スポンサーリンク

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました