Manual:CSS/ja

From Linux Web Expert

"CSS" redirects here. For the extension, see Extension:CSS.

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

MediaWikiのスクリーン表示の外装(見た目)を変更するために、MediaWiki:Common.cssにCSSを書くことができます。 このファイルはお使いのウィキに存在するファイルであり、index.php や load.php などのファイルとは所在が異なるためサーバのディレクトリ構造を調べても見つからないし、初期設定ではメインページにも他のページにもリンクもしていません。 当該のページは基本的に1行のみのコメントで構成されます。 検出するにはお使いのウィキのメインページで検索窓に MediaWiki:Common.css と記入します。 表示は https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css などのアドレスを備えたファイルとなります。 （編集には以下の権限が必要："interface administrator"）

MediaWiki:Common.css に追加されたコードがすぐに有効にならない場合は、ハード リフレッシュする必要があるかもしれません。

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

CSS は固有のウィキのたとえば背景色を変えるなど全体のスタイルを変更するために使ったり、インラインの CSS ならお使いのウィキの個別の文字列のみ書式変更することができます。 一例として 文字を緑にするには <span style="color:green">green text</span> を指定。 全てのテキストを大きくしたい場合、MediaWiki:Common.cssにbody { font-size: larger; }を追加してください。 モバイル版はMediaWiki:Mobile.cssを使用してください。

$wgAllowUserCss をウィキで有効にすると、個別の利用者は Special:MyPage/<外装名>.css として自分専用にカスタム化したスタイルシートを書くことができます（たとえば）ベクター外装を使う場合ならSpecial:MyPage/vector.css。） Special:MyPage/common.cssにCSS書いた場合、すべての外装に個人用スタイルシートを適用できます。

MediaWiki 用のカスタム外装を作成することもできます。

ヘルプ

CSSは構文・属性・値が正しくなければ正常に動作しません。 World Wide Web 協議会 （W3C）は CSS を直接、基本要件に基づいて書き上げる場合の優秀な参照先です。

ウィキペディアに、CSS の概要が載っています。

CSS 機能の操作説明と同時に誰でも使える参考情報を提供する場合は、MDN CSS リファレンスで「常に更新してある」 ガイドを提供、構文やさまざまな要素の基本的な使い方を提供できます。

注意

意味不明なマークアップをしないでください。 意味を表現するのにスタイル設定に頼るのは悪習です。（例＝検索エンジンや文字音声化のスクリーンリーダーや文字ブラウザなど機械可読性を求めるものに非対応だから）

If necessary, custom style sheets can temporarily be deactivated using the safemode=1 URL parameter.

規準 CSS

今日の CSS の中には、ブラウザが変わっても同じ動作をするように、「リセット」または「規準化」CSS に依拠するものが大多数です。 現状、MediaWiki にはリセット機能がないとは言え、ビルトインのスタイルシートには common/commonElements.css、common/commonContent.css、common/commonInterface.css、 MediaWiki:Common.cssなどがあります。

If you copy CSS をコピペした場合は、それが他の CSS に依存していないかチェックしてください。

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

jsfiddleにはCSSをインポートする機能があります。 英語版ウィキペディアで Vector （ベクター外装）をテストする場合は、以下の順序を守ってプライマリシートを書きます。

他の WMF ウィキに対しては、URL アドレス内のドメイン名を変えてください。 これらをインポートすると WMF のウィキ群で自作の CSS が既定の CSS とどのように影響し合うか少しは理解できるはずです。

Special:利用者ログイン、Special:個人設定でスタイル設定が無効？

サイト CSS のカスタム化（MediaWiki:Common.css）は既定では ログイン手順と個人設定のページで無効にしてあります。 これはログイン手続きでセキュリティを保つ措置であり、利用者が煩雑だと感じるカスタム要素を除去できるようにします。 セキュリティのリスクを心配する必要がないときは、カスタムの CSS をこれらのページで有効にするには、$wgAllowSiteCSSOnRestrictedPages 設定を使う選択肢があります。

Using the url() function

For privacy reasons, Wikimedia sites are configured to reject loading resources from external servers using the url() CSS function. This includes resources encoded in data URLs.

However, you can load resources that are hosted in the Wikimedia servers. For example, you can load an image from Wikimedia Commons and use it as a background image via CSS: 

.my-class {
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}

You can also use a custom 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);
}

カスタムのフォントを使いたい場合は、利用者個人のシステムにインストールしてください。

関連項目

Retrieved from "https://www.linuxwebexpert.com/wiki/index.php?title=Manual:CSS/ja&oldid=15224"