rightをクラスで指定する2021.07.23VuetifyBこんにちは、ryohei(@ityryohei)です!本記事では、Vuefityでテキストの配置位置を指定する方法をご紹介しています。上記の疑問にお答えします。本記事でやりたいことVuetifyには、標準で多くのクラスが用意されています。グリッドシステムに始まり背景やカラー、フォントサイズの変更など種類は豊富です。その中にはテキストの水平方向に対する配置位置を指定するクラスもあり、左寄せ、中央寄せ、右寄せと好きな値を指定することができます。本記事では、Vuetifyに用意されているクラスを用いてテキストの配置位置を自由自在に指定できるようになることがゴールです。やっていきましょう!テキストの配置位置を指定する方法Vuetifyには、テキストの配置を指定することができるクラスが用意されています。適用されるスタイルはtext-alignになります。構文は下記の通りです。text-{position}text-{size}-{position}{position}と{size}には下記の値を指定します。ビューポートサイズを指定sm、md、lg、xl{position}はtext-alignに指定する値と同様です。{size}にはビューポートを指定します。{size}を指定すると、ビューポートが指定したサイズ以上になった場合にテキストの配置位置が変更されます。指定方法がわかったところで、コードを書いて実践してみましょう。テキストの配置位置を変更するVuetifyで実際にテキストの配置を指定します。{size}で作成してみましょう。Program(xl)</p></v-app>実際の表示は下記のようになります。」からCodePenのサイトに移動してご確認ください。本記事でご紹介した内容は下記の公式ドキュメントで解説されていますので、より詳しい情報はリンク先を見ていただければと幸いです!https://vuetifyjs.com/ja/styles/text-and-typography/#text最後にVuetifyを使い始めて大体1ヵ月くらい経ちました。感覚的にはある程度は使えるようになったかなーという印象です。Vueの導入を検討していて、Bootstrapをかじったことがある人であれば違和感なく導入できると思いますので、ぜひ使ってみてくださいね!余談ですが、本記事から今まで避けるように生きてきたWordPressのブロックエディターを導入しました。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。