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

vue

こんにちは、コウジです

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

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

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

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

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

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

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

<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>

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

ページでの使用例

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

<template>
<layout-content>
<div>ページに関係するコンテンツ</div>
</layout-content>
</template>
<script>
import LayoutContent from '~/components/LayoutContent' // パスは適宜変更
export default {
components: {
LayoutContent
}
}
</script>

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

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

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

<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を使っていてページ上下のマージンをどういう風につけるか悩んでいる人は特に試してみてください!

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.