【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【Vuetify】ボタンの表示位置(左寄せ・中央・右寄せ)を指定する

こんにちは、ryohei(@ityryohei)です!

本記事では、Vuetifyでボタンの表示位置(左寄せ・中央・右寄せ)を指定する方法をご紹介しています。

Vuetifyでボタンの位置を指定したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

ボタンの表示位置を指定する方法

Vuetifyでボタンの表示位置を指定する方法はいくつかあると思いますが、個人的に扱いやすいのは下記の方法です。

  • 親要素にjustify-contentを指定する
  • スペーシングヘルパーを使用する
  • Propsのleftとrightを使用する

それぞれ詳しくご紹介していきます。

親要素にjustify-contentを指定する

表示位置を指定するボタンの親要素にFlexプロパティのjustify-contentを指定します。

VuetifyにはPropsとClassが用意されていますので、両方のパターンのサンプルを用意しています。v-rowには予めflexが設定されていますが、v-col等でボタンをラップする場合は別途flexを指定する必要があります。

Props

<v-app id="app">
    <v-row justify="start">
        <v-btn>Left</v-btn>
    </v-row>
    <v-row justify="center">
        <v-btn>Center</v-btn>
    </v-row>
    <v-row justify="end">
        <v-btn>Right</v-btn>
    </v-row>
</v-app>

Class

<v-app id="app">
    <v-row class="justify-start">
        <v-btn>Left</v-btn>
    </v-row>
    <v-row class="justify-center">
        <v-btn>Center</v-btn>
    </v-row>
    <v-row class="justify-end">
        <v-btn>Right</v-btn>
    </v-row>
</v-app>

実行結果は下記のようになります。ボタンが指定位置に表示されています。

See the Pen by ryohei (@intotheprogram) on CodePen.

https://vuetifyjs.com/ja/styles/flex/

スペーシングヘルパーを使用する

スペーシングヘルパーを使用してmarginを指定します。marginで要素の位置を調整するのはCSSでもよくやる手法ですね。それぞれ下記のように指定します。

  • 左寄せ:margin-right: auto
  • 中央寄せ:margin-left: auto、margin-right: auto
  • 右寄せ:margin-left: auto

Vuetifyのスペーシングヘルパーを使って指定してみます。

<v-app id="app">
    <v-row>
        <v-btn class="mr-auto">Left</v-btn>
    </v-row>
    <v-row>
        <v-btn class="mx-auto">Center</v-btn>
    </v-row>
    <v-row>
        <v-btn class="ml-auto">Right</v-btn>
    </v-row>
</v-app>

実行結果はこちら。

See the Pen 7123-2 by ryohei (@intotheprogram) on CodePen.

指定した位置に要素が表示されていますね。スペーシングヘルパーの詳細については下記をご参照ください。慣れると戻れなくなるくらい楽に指定できます。

https://vuetifyjs.com/ja/styles/spacing/

Propsのleftとrightを使用する

v-btnのPropsで表示位置を左寄せ・右寄せにします。Propsを使用する場合、前提としてv-btnpositionabsolutefixedが設定されている必要があります。中央寄せにはできないですが、positionで調整する場合に便利です。

<v-app id="app">
    <v-row>
        <v-btn absolute left>Left</v-btn>
    </v-row>
    <v-row>
        <v-btn absolute right>Right</v-btn>
    </v-row>
</v-app>

実行結果はこちら。

See the Pen 7123-3 by ryohei (@intotheprogram) on CodePen.

要素が浮いてしまっていますが、指定した位置にボタンが表示されています。

v-btnのPropsについては下記をご参照ください。

https://vuetifyjs.com/ja/api/v-btn/

最後に

本記事の内容は、ボタン要素はもちろんですがHTMLの要素全般に使うことができる表示位置の調整方法です。最近はFlexboxでレイアウトを組む例が多いので、justify-contentの指定方法は覚えておくとコーディングが捗るのでおすすめです!

以上、Vuetifyでボタンの表示位置(左寄せ・中央・右寄せ)を指定する方法のご紹介でした!

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍