コミュニティセントラル
探索
メインページ
ディスカッション
全ページ
コミュニティ
インタラクティブな地図
最近のブログの投稿
最新情報
Fandomブログ
ヒントとコツ
コミュニティブログ
技術情報
コミュニティ
Fandomについて
Fandomを選ぶこと
コミュニティのガイドライン
スタッフ
管理者
SOAP
フォーラム
まずはここから聞いてみよう
技術的ヘルプ
デザインヘルプ
コミュニティ管理
ディスカッション全般
旧フォーラムのアーカイブ
雑談・告知
不具合・要望
ヘルプ・相談
コミュニティ・ポータル
ヘルプ
ヘルプページ
始めよう
投稿する
あなたのコミュニティの管理
技術をもっと磨く
あなたのコミュニティのデザイン
モバイル
すべてのトピックをチェック
Discord
リクエスト
ディスカッション・モデレーターサポート
お問い合わせ
活動停止中のコミュニティの管理者権限
アカウント名の変更
スタッフへのお問い合わせ
バグ・不具合の報告
ブロックに関するお問い合わせ
ウィキクリーンナップ
プロフィール違反を報告
スパムを報告
荒らしを報告
違反を報告
スパムフィルターの問題
プロモーション&デザイン
スポットライト
AWBボットスキャン (英語)
インターウィキ/言語間リンク
FANDOM
ゲーム
映画
テレビ
Wiki
Wikiを探索
コミュニティセントラル
Wikiを はじめよう
アカウントをお持ちでない場合
登録
ログイン
FANDOM
Explore
Current Wiki
Wikiを はじめよう
アカウントをお持ちでない場合
登録
ログイン
ログイン
登録
コミュニティセントラル
415
ページ
探索
メインページ
ディスカッション
全ページ
コミュニティ
インタラクティブな地図
最近のブログの投稿
最新情報
Fandomブログ
ヒントとコツ
コミュニティブログ
技術情報
コミュニティ
Fandomについて
Fandomを選ぶこと
コミュニティのガイドライン
スタッフ
管理者
SOAP
フォーラム
まずはここから聞いてみよう
技術的ヘルプ
デザインヘルプ
コミュニティ管理
ディスカッション全般
旧フォーラムのアーカイブ
雑談・告知
不具合・要望
ヘルプ・相談
コミュニティ・ポータル
ヘルプ
ヘルプページ
始めよう
投稿する
あなたのコミュニティの管理
技術をもっと磨く
あなたのコミュニティのデザイン
モバイル
すべてのトピックをチェック
Discord
リクエスト
ディスカッション・モデレーターサポート
お問い合わせ
活動停止中のコミュニティの管理者権限
アカウント名の変更
スタッフへのお問い合わせ
バグ・不具合の報告
ブロックに関するお問い合わせ
ウィキクリーンナップ
プロフィール違反を報告
スパムを報告
荒らしを報告
違反を報告
スパムフィルターの問題
プロモーション&デザイン
スポットライト
AWBボットスキャン (英語)
インターウィキ/言語間リンク
「
ヘルプ:CSSベストプラクティス
」を編集中
ページに戻る
編集
ソースを編集
履歴表示
トーク(0件)
ページの編集
ヘルプ:CSSベストプラクティス
警告:
ログインしていません。編集を行うと、あなたの IP アドレスが公開されます。
ログイン
または
アカウントを作成
すれば、あなたの編集はその利用者名とともに表示されるほか、その他の利点もあります。
中間の版での編集と競合したため、取り消せませんでした。
スパム攻撃防止用のチェックです。 けっして、ここには、値の入力は
しない
でください!
{{Untranslated help|w:help:CSS best practices}} {{Tocright}} このヘルプは、[[ヘルプ:CSSとJavaScriptのカスタマイゼーション|CSS]]を使用してWikiのカスタマイズを行いたい方向けのガイドラインです。 始める前に、[[Help:Customization_policy|Customization policy]]の記事もお読みください。 == ガイドライン == === テーマデザイナーを使おう! === [[File:Theme designer.png|right|thumb|200px|Start with the [[Help:Theme Designer|theme designer]] ''before'' writing any CSS.]] サイトに対して随時行われるレイアウトの調整を生かしながらWikiのカスタマイズを行う最も簡単な方法は、Fandomの[[ヘルプ:テーマデザイナー|テーマデザイナー]]機能を使うことです。 * テーマデザイナーは、Wikiの基本色や[[Help:Wordmark|ロゴ]]、[[Help:Favicon|ファビコン]]、[[Help:Background|背景]]の変更を手っ取り早く簡単に行えるようにしたものです。 === 色調 === [[Help:Contrast|コントラスト比]]が低すぎないようにするとともに、調和のとれない[[Help:Color|色]]やどぎつい色を避けましょう――特に、コンテンツが表示される領域では気をつけてください。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 [https://contrastchecker.com/ WCAG Contrast Checker] to check whether you're using a good contrast. ポイント: * すべての人の視力や色覚が、あなたと同じというわけではなく、低視力であったり[[ヘルプ:色覚多様性に対応したWiki|色覚異常]]であったりする人は少なくありません。 * デバイス画面が異なればその振る舞いも異なります - あなたが使用しているデバイスで見た色が、他の人のデバイスでは異なって表示されることもあります。 * 文字と背景との間の[[ヘルプ:コントラスト|コントラスト]]が良くなるようにする - たとえば、明るい背景に暗い文字といった組み合わせです。 * 背景画像を設定するのは良いことですが、画像の上に表示される文字が読めなくなっていないかにご注意ください。テーマデザイナーでは、画面全体に背景を表示させたい方向けに、透過率を簡単に変更できる機能があります。また、背景色として適切な色合いの画像を選びましょう。 * Try to <u>avoid</u> busy backgrounds. * 画面に表示されるものはあまり小さくしすぎないようにし、主要なテキストが表示される領域については標準のフォントサイズを下回らないようご注意ください。 ===フォント=== * カスタムフォントも良いですが、あまり多いと読みにくくなってしまいます。 目への負担を減らしましょう。Watch out where you are allowed to change the font type: [[Help:Customization_policy|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 [https://fonts.google.com/ Google Fonts]. If you need help, please follow this guide: [[Help:How_to_import_Google_Fonts|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. * 必要な場合に<u>のみ</u>、カスタムフォントを使用するようにしてください。 * 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では流動的な横幅を採用していることを忘れないでください - あなたの画面と、異なるサイズの画面を使用している他の人とでは、同じ内容でも'''異なって表示される'''場合があります。たとえば、幅を指定するとき、絶対値ではなくパーセントで指定すると、コンテンツ同士に大きな隙間ができたり重なりができたりする可能性を減らせます。可能であれば、パソコンだけではなく、タブレットでのデザインも確かめてみましょう。 === 読みやすいコードを書く === コードを書く際は、他の人にとっても'''読みやすく、理解しやすい'''ように心がけましょう。 ポイント: * 簡潔なコメントで'''注釈'''を付けましょう――コメントは、文章を <nowiki>/*</nowiki> と <nowiki>*/</nowiki> で囲むことで追加できます。例:<code>/* This code does x, y and z */ </code> (コードに詳しくない人でも、そのコードの役割が分かるようにしておきましょう。) * give your custom classes and IDs '''understandable names'''. If it makes a box around something, consider calling it <code>.box</code>, not <code>.tlk328</code> * add in '''spacing and indentation''' to your community's tastes — but [https://css-tricks.com/different-ways-to-format-css/ pick '''''one''''' format] and stick with it * '''organize''' the code logically, keeping code that affects the same part of the wiki together. == 関連情報 == * [[ヘルプ:カスタマイゼーション・ポリシー]] - 認められているカスタマゼーションに関するFandomのポリシー * [[ヘルプ:色覚多様性に対応したWiki]] * [[ヘルプ:コントラスト]] * [http://www.w3schools.com/css/ W3Schools] - CSS のオンライン・ガイド * [https://developer.mozilla.org/en-US/docs/Web/CSS Mozilla Developer Network] - an online CSS documentation * [https://css-tricks.com/almanac/properties/ CSS-Tricks] - an online CSS code library of supported codes * [https://caniuse.com/ CanIuse] - tables for support of front-end web technologies on desktop and mobile web browsers. * [https://html-color-codes.info/ HTML Color Codes] * [http://jigsaw.w3.org/css-validator/ The W3C CSS Validation Service] - [[ヘルプ:コミュニティのCSSとJavaScript|特別:CSS]]に似た、コードのエラーの確認に有用なものです * [[w:c:dev:Bootstrap|Fandom Open Source Library のBootstrap拡張機能]] - Fandomで[https://getbootstrap.com/ Bootstrap]を利用する == その他のヘルプとフィードバック == {{Help and feedback section}} {{DEFAULTSORT:CSSへすとふらくていす}} [[de:Hilfe:Beste CSS-Praktiken]] [[en:Help:CSS best practices]] [[es:Ayuda:Mejores prácticas en CSS]] [[fi:Ohje:CSS:n parhaat käytännöt]] [[fr:Aide:Bonnes pratiques du CSS]] [[pl:Pomoc:Najlepsze praktyki w CSS]] [[pt:Ajuda:Melhores práticas de CSS]] [[ru:Справка:Советы по использованию CSS]] [[tr:Yardım:En iyi CSS uygulamaları]] [[uk:Довідка:Поради щодо використання CSS]] [[vi:Trợ giúp:Thực hành CSS tốt nhất]] [[zh:Help:CSS 最佳實踐]] [[カテゴリ:ヘルプ]] [[カテゴリ:CSS]] [[Category:Advanced customization]]
編集内容の要約:
コミュニティセントラルへの投稿はすべて、「CC-BY-SA」に従って公開されるものとしてみなされます
編集を中止
編集の仕方
(新しいウィンドウで開きます)
このページで使用されているテンプレート:
テンプレート:Help and feedback section
(
ソースを閲覧
)
テンプレート:Tocright
(
ソースを閲覧
)
テンプレート:Untranslated help
(
ソースを閲覧
)
このページは 1 個の隠しカテゴリに属しています:
カテゴリ:未翻訳ヘルプ
Follow on IG
TikTok
Join Fan Lab