Manual:CSS/ja

Cascading style sheet(CSS)はMediaWikiの外装のほとんどを設定できます : フォントサイズ、色、間隔、ロゴと背景画像、サイトのコンテンツの表示/非表示などなど.

MediaWikiのスクリーン表示の外装(見た目)を変更するために、にCSSを書くことができます. This file is a page in your wiki, not a file like index.php or load.php, so you cannot find it by looking at the directory structure on your server, nor is it linked to your Main Page or any other page initially. The page initially consists of just a one-line comment. To find it, type MediaWiki:Common.css in the search box on the main page of your wiki. It will appear as a file with an address something like https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css.

ページの印刷の際の外装を変更するためには、WikiのMediaWiki:Print.cssにCSSを記述してください.

CSS can be used to change the style of the entire wiki, for example to make the background a different color, or you can use inline CSS to style specific pieces of text in your wiki. For example green text can be accomplished by doing. 全てのテキストを大きくしたい場合、MediaWiki:Common.cssにを追加してください. モバイル版はMediaWiki:Mobile.cssを使用してください.

If enabled on your wiki, individual users can create custom stylesheets just for themselves at Special:MyPage/&lt;skin_name&gt;.css (for example Special:MyPage/vector.css if they are using the vector skin). Special:MyPage/common.cssにCSS書いた場合、すべてのスキンに個人用スタイルシートを適用させることができます.

MediaWiki 用のカスタム外装 (スキン) を作成することもできます.

ヘルプ
CSSは構文・属性・値が正しくなければ正常に動作しません. World Wide Web Consortium (W3C) is an excellent reference for checking how to write CSS correctly directly from the standards:


 * https://www.w3.org/TR/CSS21/propidx.html - CSS 2.1プロパティのインデックス '&larr; 参考
 * http://www.w3.org/TR/CSS21/indexlist.html - CSS 2.1 Index of everything
 * http://www.w3.org/TR/CSS21/cover.html#minitoc - CSS 2.1 Table of Contents

Wikipediaに、CSSの概要が載っています.

If you prefer an easily consumable reference alongside demos of CSS features Mozilla Developer Network CSS Reference will provide you an "up-to-date" guide to syntax and basic usage of the various elements.


 * Mozilla Developer Network CSS Reference

注意
意味不明なマークアップをしないでください. Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).

Normalized CSS
Much CSS today relies on a "reset" or "normalize" CSS to make all browsers work the same. MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and.

If you copy CSS, watch if it depends on additional CSS.

一例として jsFiddle には「規準 CSS 」チェックボックスがあります. これは s を   にセットし、要求したリストの数をリセットします. 規準 CSS は MediaWiki サイトでまったく走らないため、 MediaWiki 関連のコードのテストには使用禁止です.

jsfiddleにはCSSをインポートする機能があります. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):


 * [/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector Legacy general (all skins that use CSS) CSS built in to core ]
 * [/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector General and Vector CSS built-in to core ]
 * [/load.php?debug=true&lang=en&modules=site&only=styles&skin=vector Site CSS (MediaWiki namespace) ]
 * [/load.php?debug=true&lang=en&modules=ext.gadget.site-styles&only=styles&skin=vector CSS for all skins (for all users) on MediaWiki.org (MediaWiki namespace) ]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector skin CSS (MediaWiki namespace) ]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector skin CSS (MediaWiki namespace) ]

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?
By default, site CSS customizations (e.g. MediaWiki:Common.css) do not take effect on the login and preferences pages. This is to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with. If you are not concerned about the security risks, you can use the configuration setting to allow custom CSS to work on these pages.

Custom fonts versus privacy
On Wikimedia sites, do not load custom fonts from external third-party servers. On Wikimedia wikis, you can load a font family provided by Wikimedia's Universal Language Selector extension (see the list of fonts available on Wikimedia wikis).

Example CSS to load the Gochi Hand font: @font-face { font-family: 'GochiHand'; src: local("Gochi Hand"), url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2); }