初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！

皆さんこんにちは！

サイト制作って１から作ると大変ですよね。

今は、便利な世の中になっていて、ネットで検索すればテンプレートが出てきます。

例えば、BootstrapやVuetifyなどその他もろもろあると思います。

ただ、僕個人が思っていることは、BootstrapやVuetifyって他の要素にもCSSが適用されるなんて思ったことありませんか？

技術がある人はこれを回避できると思うのですが、僕にはそんな技術がないので何とかならないかなと思っていたところに「Buefy」に出会ったわけです。

Buefyの特徴はとにかく軽い、他の要素に影響をほぼ与えないというのが特徴です。

また、公式のドキュメントは日本語が対応していないものの、ソースコードが分かりやすく、Chormeの翻訳機能を使えばどうってことないです。

これらの特徴から、最近Buefyを愛用しています。

今回は、Buefyの「モーダルウィンドウ」をご紹介したいと思います。

モーダルウィンドウも１から自分で作ると、作れくなくはないものの時間はかかりますよね？

ただ、Buefyを使えばソースコードをコピペするだけで実装することができます！！

びっくりするくらい簡単です！！！

それでは、導入から実装までの順序を一緒に見ていきましょう！

Buefyのインストール#

npm i Buefy
yarn

Buefyのインストールを終えたら、main.jsに以下の設定を加えます。

main.js

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

これで、Buefyの下準備は整いました！

あとは公式ドキュメントからソースコードをコピペするだけ！！

ソースコードコピペ#

こちらのリンクから公式ドキュメントにアクセスしてください。

先ほども述べたように、今回は「モーダルウィンドウ」を使います。

どれでもいいので、コードをコピペします。

App.vue

<template>
    <section>
        <div class="buttons">
            <button class="button is-primary is-medium"
                @click="isImageModalActive = true">
                Launch image modal
            </button>
        </div>
        <b-modal v-model="isImageModalActive">
            <!-- 表示したいコンポーネント -->
        </b-modal>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isImageModalActive: false
            }
        }
    }
</script>

これで、モーダルウィンドウを実施することができます！

これだけです！めちゃめちゃ簡単！！

サイト制作って表面的な部分に時間をかけてしまうと、バックエンドの方に時間が割けなくなってくるので、どれだけ効率よく表面的な部分を完成させることができるかがカギとなってきます。

なので、ぜひBuefyを使って効率よくサイト制作を行ってください！

以上、「初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading