feat: add styles in /ja/09.workspace/01.todo-list (#286)

Author: splendente

content/ja/09.workspace/01.todo-list/02.reactivity-1/index.md

@@ -98,6 +98,6 @@ userNameを`ref`を使ってリアクティブな値にし、値の変化を検
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 ref を使い、データの変更が自動的に画面に反映されるようになりました！

content/ja/09.workspace/01.todo-list/03.list-rendering/index.md

@@ -61,6 +61,6 @@ Vueでは `v-for` ディレクティブを使って配列に基づいて項目
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 `v-for` を使うことで動的なデータ表示がとても簡単になりましたね！

content/ja/09.workspace/01.todo-list/04.conditional/index.md

@@ -71,6 +71,6 @@ Vueでは `v-if` ディレクティブを使って、ブロックを条件に応
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 `v-if` と `v-else` を使うことで、状態に応じた柔軟なUIが実現できます！

content/ja/09.workspace/01.todo-list/05.componentization-1/index.md

@@ -44,7 +44,7 @@ import Child from './Child.vue'
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 app.vueがすっきりとしました。
 

content/ja/09.workspace/01.todo-list/05.componentization-2/index.md

@@ -149,6 +149,6 @@ const emit = defineEmits<{
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 コンポーネント化され、メンテナンスしやすいスッキリした構造になりました！

content/ja/09.workspace/01.todo-list/06.v-model/index.md

@@ -118,7 +118,7 @@ const showUnDoneOnly = ref(false)
 そうすることで、 `v-model` だけで、バインドとイベント監視の指定がなくても、値が自動的に同期されるようになります。
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 ## 実装後の効果
 

content/ja/09.workspace/01.todo-list/07.reactivity-2/index.md

@@ -128,7 +128,7 @@ const doubled = computed({
    1,2 で実装した `filteredTodos` を `TodoList` コンポーネントの `todos` propsに渡してみましょう。
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
-:ButtonShowSolution
+::ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 ## 実装後の効果
 

content/ja/09.workspace/01.todo-list/08.componentization-3/index.md

@@ -240,6 +240,6 @@ TODOリストに、新規タスクを追加するために、
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 親・子コンポーネント間で `isCreateModalOpen` を双方向に同期できるようになりました！

content/ja/09.workspace/01.todo-list/09.slot/index.md

@@ -250,6 +250,6 @@ ogImage: true
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+::ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 これで、コンポーネントの任意の箇所に、HTMLやコンポーネント等を差し込むことができました！

content/ja/09.workspace/01.todo-list/10.retrospective/index.md

@@ -51,7 +51,7 @@ function handleSubmit(e: Event) {
 
 もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。
 
-:ButtonShowSolution
+:ButtonShowSolution{.bg-faded.px4.py2.mb3.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 ---