コンテンツへスキップ

現役Webデザイナーがおくる、Web系Tipsメディア

Vuetifyのサンプル_Slider&Carousel

Tribute to Vuetify

Wow, Good UI Framework 'Vuetify'!

スライダーのサンプル

カルーセル型スライダーのサンプル

人気の記事ランキングは毎日更新！

cssだけ！特定の文字に「一致」「含む」等の条件に当てはまる要素だけを選択する方法
Swiper使用時に、ウインドウをリサイズした際に動きが止まってしまうのを解決する方法
スムーススクロール時の遷移先を、cssだけで意図した位置に設定する方法[scroll-margin]
[Vuetify3]Vuetifyに存在する余白調整系のcssクラス群[Spacing helpers]
[Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]

新しい記事

tedateが、BASEオフィシャルパートナーとして認定されました！
【Mac版/Windows版】おぼえて便利！Figmaショートカット50選！
優れたJSライブラリを使い、3DモデルをWebサイトに表示する方法
滑らかな慣性スクロールを付与！[Lenis]で良質なスクロール体験をWebサイトに加える方法
現役デザイナー(歴15年以上)の視点からも魅力的に映る、Webデザイン・Web制作が学べるスクール[+AIスキルも！]

特集：Vuetify関連記事

Vue.js上で動作するUIフレームワーク、Vuetifyについての記事をご紹介しています。ぜひご覧ください。

Vuetify 3 系統のはじめかた

CDN経由での導入方法
CLI(Vite)経由での導入方法

Vuetify 2 系統のはじめかた

CDN経由での導入方法
CLI経由での導入方法

Vuetify 3 系統の記事一覧

[Vuetify3]v-forを使って、簡易スライドショーを表示する方法[v-window]
[Vuetify3]Vue.js3に対応したカルーセル(スライドショー)を使う方法[v-carousel]
[Vuetify3]Vue.js3に対応したcardを使う方法[v-card]
[Vuetify3]Vue.js3に対応したsnackbar(通知表示)を使う方法[v-snackbar]
[Vuetify3]Vue.js3に対応した綺麗なボタンを使う方法[v-btn]
[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]
[Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]
[Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]

Vuetify 2 系統の記事一覧

【第24回】Vuetifyで、画像にParallax（視差）効果を簡単に適用する方法[v-parallax]
【第23回】Vuetifyで、タグとしても使える小さなチップを表示する方法[v-chip]
【第22回】Vuetifyを用いて、サイドからスライドインするドロワーメニューを作る方法[v-navigation-drawer]
【第21回】v-speed-dialをVuetifyで簡単に扱ってみる方法[v-speed-dial]
【第20回】Vuetifyを用いて綺麗にスタイリングされたボタンを扱う方法[v-btn]
【第19回】チェックを入れる、テキストを入力など条件を満たしたら押せるボタンを作る方法[v-checkbox, v-text-field, v-btn]
【第18回】Vuetifyで文字数制限や削除機能の付いたテキストエリアを実装する方法[v-textarea]
【第17回】Vuetifyで汎用性のあるボトムシートを表示する方法[v-bottom-sheet]
【第16回】Vuetifyのラジオボタンをv-forで表示したりactive時にclassを付与したりする方法[v-radio]
【第15回】Vuetifyでシンプルかつ綺麗なチェックボックスを使用する方法[v-checkbox]
【第14回】Vuetifyでシンプルなトグル型スイッチを表示する方法[v-switch]
【第13回】Vuetifyで綺麗なセレクトボックスを簡単に実装する方法[v-select]
【第12回】Vuetifyでボトムナビゲーションを実装する方法[v-bottom-navigation]
【第11回】Vuetifyで数値入力用のスライダーを実装する方法[v-slider]
【第10回】Vuetifyで日付ピッカー(Date picker)を実装する方法[v-date-picker]
【第9回】Vuetifyでアコーディオン型のリストを実装する方法[v-expansion-panel]
【第8回】Vuetifyでタブ切り替え型のコンテンツを実装する方法[v-tabs]
【第7回】Vuetifyでユーザーアイコンへのバッジ通知を実装する方法[v-badge]
【第6回】文字数制限を持たせた綺麗なテキストフィールドをVuetifyで簡単に実装する方法[v-text-field]
【第5回】Vuetifyで汎用的なモーダル、ダイアログを表示する方法[v-dialog]
【第4回】Vuetifyで星型の5段階レーティングを実装する方法[v-rating]
【第3回】Vuetifyでツールチップとドロップダウンを使う方法[v-tooltip, v-menu]
【第2回】Vuetifyを使ってカード型UIとsnackbarを実装する方法[v-card, v-snackbar]
【第1回】Vuetifyを使ってスライダーとカルーセルを実装する方法[v-slide, v-carousel]
【はじめに】Vuetifyを導入して Material Design をスマートに取り入れる方法

カテゴリー

Alpine.js関連 (1)
Figma関連 (2)
Firebase関連 (4)
Grid.js関連 (6)
Ionic関連 (6)
JavaScript関連 (49)
Photoshop関連 (4)
Swiper関連 (8)
tedate Premium (6)
Vue.js関連 (70)
Webサイト構造化関連 (8)
Webデザイナーになるには (4)
Web一般 (73)
WordPress関連 (20)
XD関連 (1)
お知らせ (4)
コーディング関連 (73)
構造化データマークアップ (8)
生成AI関連 (1)

tedateはBASEオフィシャルパートナーです

国内において、圧倒的な支持率をほこるネットショップ作成サービス「BASE」。
tedateは、BASEオフィシャルパートナーに認定されました。
本件についての詳細はこちらの記事、お問い合わせはこちらよりご連絡ください。

このサイトの管理者

tedate.jp owner

tedate.jp を運営しています。都内在住。
Webデザイナー/グラフィックデザイナーになって、通算15年程になります。皆さまがWeb制作をもっと楽しめるように。私から良い情報を発信できるように。そんな想いで、日々記事を書いています。
tedate.jpスタッフに直接、Web制作の相談をご希望の方はこちらよりご連絡ください。

ライター

momo

こんにちは！momo（もも）と申します！ tedate.jp で記事を書かせていただくことになりました。都内でWebデザイナーをしています。私の書いた記事が、皆さんのお役に立てると幸いです。X(旧twitter)アカウント

当サイトはWebサイト改善を目的としてCookieを用いたアクセス解析等を使用しております。当サイトを利用する事で、当サイトが定める利用規約・プライバシーポリシーに同意頂いた事となります。また当サイトの一部にはプロモーションが含まれる事があります。

プライバシーポリシー・利用規約はこちら | This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

© Copyright 2025 tedate.jp - all rights reserved. プライバシーポリシー・利用規約 | お問い合わせ | This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.