KJ DEV
Tips

Vue.jsでページ上下のマージンをあてるコンポーネントを用意しよう!

Vue.jsで開発するとページ単位のコンポーネントを作りますよね?

その時に用意しておくと便利なコンポーネントがあるので紹介します!

目次
  1. ページ上下のマージンを調整するコンポーネント
  2. ページでの使用例
  3. さいごに

ページ上下のマージンを調整するコンポーネント

Vue.jsでの開発に限ったことではありませんが、ページの上下にサイト共通のマージンをつけることありますよね?

完全に全ページ共通なら良いのですが、このページだけマージン無くしたいということってあると思うんですよ。

そんな時にも対応できる、コンテンツのマージン調整用のコンポーネントでラップしてページのコンポーネントを作成するとめちゃくちゃ便利です!

具体的には下記のようなコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div class="content" :class="{ 'content--top': top, 'content--bottom': bottom }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    top: {
      type: Boolean,
      default: true
    },
    bottom: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  &--top {
    margin-top: 20px;
  }

  &--bottom {
    margin-bottom: 20px;
  }
}
</style>


こういうコンポーネントを用意したら実際にページで使用してみます。

ページでの使用例

用意したコンポーネントにオプションをつけずに使用する場合は下記のようなコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<layout-content>
    	<div>ページに関係するコンテンツ</div>
    </layout-content>
</template>

<script>
import LayoutContent from '~/components/LayoutContent' // パスは適宜変更

export default {
	components: {
    	LayoutContent
    }
}
</script>

これでページの上下に20pxずつのマージンをつけることができます。

では次にページの上だけマージンいらないという場合です。
トップページなどヒーローエリアがあって、ヘッダーにぴったりくっつけたいって場合なんかにありがちなパターンですね。

そんな時はlayout-contentのtopのオプションとしてfalseを渡すことで、上の部分のマージンだけ取ることができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<layout-content :top="false">
    	<div>ページに関係するコンテンツ</div>
    </layout-content>
</template>

<script>
import LayoutContent from '~/components/LayoutContent' // パスは適宜変更

export default {
	components: {
    	LayoutContent
    }
}
</script>

さいごに

今回紹介したコンポーネントは本当に便利でVue.jsを使っているプロジェクトではいつも採用しています。

Vue.jsを使っていてページ上下のマージンをどのようにつけるか悩んでいる人は特に試してみてください!

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。