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

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

Before you start, please also read our article Customization policy.

ガイドライン[編集 | ソースを編集]

テーマデザイナーを使おう![編集 | ソースを編集]

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.
  • 画面に表示されるものはあまり小さくしすぎないようにし、主要なテキストが表示される領域については標準のフォントサイズを下回らないようご注意ください。

Fonts[編集 | ソースを編集]

  • Custom fonts are welcome, but less is often more. Avoid a strain on the eyes. 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.

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

読みやすいコードを書く[編集 | ソースを編集]

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

ポイント:

  • 簡潔なコメントで注釈を付けましょう――コメントは、文章を /* と */ で囲むことで追加できます。例:/* This code does x, y and z */ (コードに詳しくない人でも、そのコードの役割が分かるようにしておきましょう。)
  • give your custom classes and IDs understandable names. If it makes a box around something, consider calling it .box, not .tlk328
  • add in spacing and indentation to your community's tastes — but pick one format and stick with it
  • organize the code logically, keeping code that affects the same part of the wiki together.

関連情報[編集 | ソースを編集]

その他のヘルプとフィードバック[編集 | ソースを編集]

特に記載のない限り、コミュニティのコンテンツはCC-BY-SAライセンスの下で利用可能です。