ヘルプ:CSSベストプラクティス

このヘルプには更新、または翻訳されていないコンテンツがあります。どなたでも翻訳にご協力いただくことができます。

原文 : w:help:CSS best practices。

このヘルプは、CSSを使用してWikiのカスタマイズを行いたい方向けのガイドラインです。

始める前に、Customization policyの記事もお読みください。

ガイドライン[]

テーマデザイナーを使おう！[]

Theme designer — Start with the theme designer *before* writing any CSS.

サイトに対して随時行われるレイアウトの調整を生かしながらWikiのカスタマイズを行う最も簡単な方法は、Fandomのテーマデザイナー機能を使うことです。

テーマデザイナーは、Wikiの基本色やロゴ、ファビコン、背景の変更を手っ取り早く簡単に行えるようにしたものです。

色調[]

コントラスト比が低すぎないようにするとともに、調和のとれない色やどぎつい色を避けましょう――特に、コンテンツが表示される領域では気をつけてください。You want people to be able to easily read your articles so that they'll stick around longer. You can use websites such as the WCAG Contrast Checker to check whether you're using a good contrast.

ポイント：

すべての人の視力や色覚が、あなたと同じというわけではなく、低視力であったり色覚異常であったりする人は少なくありません。
デバイス画面が異なればその振る舞いも異なります - あなたが使用しているデバイスで見た色が、他の人のデバイスでは異なって表示されることもあります。
文字と背景との間のコントラストが良くなるようにする - たとえば、明るい背景に暗い文字といった組み合わせです。
背景画像を設定するのは良いことですが、画像の上に表示される文字が読めなくなっていないかにご注意ください。テーマデザイナーでは、画面全体に背景を表示させたい方向けに、透過率を簡単に変更できる機能があります。また、背景色として適切な色合いの画像を選びましょう。
Try to avoid busy backgrounds.
画面に表示されるものはあまり小さくしすぎないようにし、主要なテキストが表示される領域については標準のフォントサイズを下回らないようご注意ください。

フォント[]

カスタムフォントも良いですが、あまり多いと読みにくくなってしまいます。目への負担を減らしましょう。Watch out where you are allowed to change the font type: Customization policy. It's best not to change the font of the page contents, because they need to be easily readable.
You can find many free fonts which allow commercial use. You might like to have a look at Google Fonts. If you need help, please follow this guide: Import Google Fonts.

デザインをシンプルに保つ[]

CSS offers you a cornucopia of possible effects to make a site really stand out. But you should not overdo it. The goal of CSS is to make the community broadly appealing, and your flashy custom cursor may be turning off new readers.

必要な場合にのみ、カスタムフォントを使用するようにしてください。
Avoid anything too "flashy" on the pages. You may add some hover effects e.g to make icons stand out, but keep in mind that wikis mostly are about information. The wiki of course should represent the topic you are writing about in a visually appealing way but also in a manner of reducing anything which could distract or repel the viewer.

レスポンシブ・デザイン[]

Fandomでは流動的な横幅を採用していることを忘れないでください - あなたの画面と、異なるサイズの画面を使用している他の人とでは、同じ内容でも異なって表示される場合があります。たとえば、幅を指定するとき、絶対値ではなくパーセントで指定すると、コンテンツ同士に大きな隙間ができたり重なりができたりする可能性を減らせます。可能であれば、パソコンだけではなく、タブレットでのデザインも確かめてみましょう。

読みやすいコードを書く[]

コードを書く際は、他の人にとっても読みやすく、理解しやすいように心がけましょう。