Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ja): Update css-and-tailwind.mdx #2559

Merged
merged 4 commits into from
Nov 2, 2024
Merged

i18n(ja): Update css-and-tailwind.mdx #2559

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a00eb8
7dc503ea7993123a4aeff453d08de41cac887353
morinokami Nov 2, 2024
37ae918
782def032190875cf65cf3b46ba813ed2474e3f8
morinokami Nov 2, 2024
3554aab
Revert pnpm-lock.yaml
morinokami Nov 2, 2024
e93a5c4
Merge branch 'main' into i18n-ja-css-and-tailwind-2
HiDeoo Nov 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions docs/src/content/docs/ja/guides/css-and-tailwind.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ StarlightのTailwindプラグインは、以下の設定を適用します。

`create astro`を使用して、Tailwind CSSが組み込まれた新しいStarlightプロジェクトを開始します。

<Tabs>
<Tabs syncKey="pkg">
<TabItem label="npm">

```sh
Expand Down Expand Up @@ -93,7 +93,7 @@ yarn create astro --template starlight/tailwind

1. AstroのTailwindインテグレーションを追加します。

<Tabs>
<Tabs syncKey="pkg">

<TabItem label="npm">

Expand Down Expand Up @@ -123,7 +123,7 @@ yarn create astro --template starlight/tailwind

2. StarlightのTailwindプラグインをインストールします。

<Tabs>
<Tabs syncKey="pkg">

<TabItem label="npm">

Expand Down Expand Up @@ -247,6 +247,8 @@ Starlightのカラーテーマは、デフォルトのカスタムプロパテ

以下のスライダーを使用して、Starlightのアクセントカラーとグレーカラーのパレットを変更してみましょう。ダークとライトのプレビューエリアには、結果となる色の組み合わせが表示されます。また、このページ自体も合わせて更新されるため、変更内容をプレビューできます。

コントラストレベルオプションで、WCAGによる[色のコントラスト基準](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)から満たしたいものを指定します。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the linked document doesn't have a Japanese translation, I intentionally did not alter this URL.


変更内容に満足できたら、以下のCSSまたはTailwindコードをコピーしてプロジェクトで使用します。

import ThemeDesigner from '~/components/theme-designer.astro';
Expand All @@ -262,6 +264,9 @@ import ThemeDesigner from '~/components/theme-designer.astro';
default: 'デフォルト',
random: 'ランダム',
},
contrast: {
label: 'コントラストレベル',
},
editor: {
accentColor: 'アクセント',
grayColor: 'グレー',
Expand Down
Loading