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

ヘルプ

トップページ · 目次 · 索引

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

原文 : w:help:CSS best practices。

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

ガイドライン

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

実行中のテーマデザイナー

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

• テーマデザイナーは、Wikiのロゴ、色、背景の変更を手っ取り早く簡単に行えるようにしたものです。
• テーマデザイナーの詳細についてはヘルプ:テーマデザイナーやSpecial:ThemeDesignerをご覧ください。

調和のとれない色やどぎつい色を避ける

これは、コンテンツが表示される領域で特に気をつけてください。

• すべての人の視力や色覚が、あなたと同じというわけではなく、低視力であったり色覚異常であったりする人は少なくありません。
• デバイス画面が異なればその振る舞いも異なります - あなたが使用しているデバイスで見た色が、他の人のデバイスでは異なって表示されることもあります。

とはいえ、どのようなテーマにすればよいのかを判断するのは簡単ではありません。そのような場合は、以下の基準にそってテーマを調整してみましょう。

• 文字と背景との間のコントラストが良くなるようにする - たとえば、明るい背景に暗い文字といった組み合わせです。
• 背景画像を設定するのは良いことですが、画像の上に表示される文字が読めなくなっていないかにご注意ください。テーマデザイナーでは、画面全体に背景を表示させたい方向けに、透過率を簡単に変更できる機能があります。
• 画面に表示されるものはあまり小さくしすぎないようにし、主要なテキストが表示される領域については特にご注意ください。

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

Wikiのデザインを変更するにあたって、アイコンやアニメーション、カラフルな色使いでいっぱいにしたくなることがあるかもしれません。しかし、そのようなデザインは、Wikiを訪れる人に良くない印象を与えることがあります。

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

読みやすいコードを書く

あなた1人だけがWikiをカスタマイズするわけではないことを忘れないでください。コードを書く際は、他の人もそのコードを読んで理解できるようにすることを心がけましょう。

さらに、そのコードが何をするものなのか、コードを見ただけでは容易にはわからないところには、コメントを追加しましょう。コメントの追加は、文章を /* と */ で囲むことで行えます。例:

/* これはコメントです */

関連情報

• ヘルプ:カスタマイゼーション・ポリシー - 認められているカスタマゼーションに関するFandomのポリシー
• ヘルプ:色覚多様性に対応したWiki
• ヘルプ:コントラスト

• W3Schools - CSS のオンライン・ガイド
• HTML Color Codes
• The W3C CSS Validation Service - 特別:CSSに似た、コードのエラーの確認に有用なものです
• Fandom Open Source Library のBootstrap拡張機能 - FandomでBootstrapを利用する

その他のヘルプとフィードバック

• ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
• 最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
• この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
• このヘルプはコミュニティセントラル内にて管理されています。