Help:TemplateStyles/ja

 は、インターフェイス管理者権限がなくてもテンプレートにおける複雑な装飾（スタイリング）を実行するツールです.

動作の仕組み
ページに というウィキテキストを挿入すると、  の記述がCSSとして解析され、置換した特殊文字を  タグの位置に読み込みます (ページ上で直接、またはそのページで使用されるテンプレート内で).

には必ずコンテントモデル  が必要です. このコンテントモデルは、ページ名が  で終わるテンプレート名前空間の下位ページにおいて既定です. 利用法は、 のスタイルを   のような下位ページに格納する方法が推奨されます.

に名前空間の接頭辞が付かない場合、既定でテンプレート名前空間を読み込みます. 従って例えば、 と書かれた場合、読み込まれるのは   です.

タグはテンプレートの最上部など装飾される本文の前に置くことで、ページの読み込み時に一部がレンダリングされ、装飾されていないページが出力される可能性を避ける必要があります.

解決される問題
今まで、テンプレート（やその他のコンテンツ）を装飾する方法は2通りありました. インライン・スタイル（ などHTMLコードを書いて直接、属性を追加）か、MediaWiki:Common.css など特別なシステムメッセージを用いるかでした. どちらの方法も完全には機能していません.

インライン・スタイルの場合:


 * 本文と体裁が分離されません. コンテントがテンプレート（記事の表など）に含まれている場合を除き、記事内にウィキテキストが表示され、ほとんどの編集者には理解できません.
 * 装飾とウィキテキストの混在が原因で、構文強調表示その他のCSSによる編集支援が困難または不可能になります.
 * 対象となるHTML要素一つひとつに装飾処理をする必要があり、結果として大量のコピー&ペーストやコードが記述されるせいで、読みにくくメンテナンスが困難になります.
 * style属性は、CSSのサブセットに限定されています. 最重要点は、レスポンシブデザインに必要な  規則が機能せず、多様な画面幅に対応するテンプレートの作成が不可能なことです. さらにインライン・スタイルは、CSSスタイルシートの装飾より優先されるため、ユーザー固有・スキン固有・機器固有のカスタマイズが、より困難になっています.
 * Since styles are mixed with wikitext, syntax highlighting and other forms of CSS editing support are difficult or impossible.
 * Styles have to be repeated for each HTML element they apply to, which results in lots of copy-pasting and code that is hard to read and maintain.
 * Style attributes are limited to a subset of CSS. Most importantly,  rules needed for responsive design do not work so it's impossible to make templates that work well over a wide range of screen sizes. Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.

システムページを使った場合:


 * 編集が管理者に限定されることは、参加の大きな障壁です.
 * 使用できるCSS規則を制限する方法が無いため、編集権限の引き下げができません. 読者のIPアドレスを追跡したり、古いブラウザではスクリプトを実行することすらできてしまうからです.
 * まず保存することが前提で、事前に変更のテストができません（）.
 * 全てのスタイルシートを（そのページを利用者が使うかどうかを問わず）あらゆるページに読み込む必要があり、帯域幅を無駄遣いし、装飾規則のデバックをより困難にしています.
 * Editing restrictions cannot be lifted as there is no way to limit what CSS rules can be used, and some of them could be abused to track readers' IP addresses or even execute scripts in some older browsers.
 * Changes are impossible to test without saving first.
 * All stylesheets must be loaded on all pages (whether they actually use the page or not), which wastes bandwidth and makes debugging style rules harder.

TemplateStyles の利用で利用者は装飾規則を特定のページに割り当てることができ、CSSスタイルシートを十分に機能させつつ危険な構築を除外して、さらに本来の機能としてプレビューやデバッグのツールと共存できます（例=テンプレートのサンドボックス）.

アクセスと管理維持の障壁を下げた効果として、将来的にテンプレートの視覚効果に新発想が増えたり、多種の表示画面（中でもウィキペディアのページ閲覧の過半数を占めるモバイル機器）に対応できることを期待しています.

安全性
安全です！ TemplateStyles は本格的なCSS解析器を含んでおり、CSSの読み込み、再シリアル化、全てのコードのエスケープ、ホワイトリストに合致しないCSS規則の除去ができます. この解析器の精度はローカルリソースのみ許可し、外部リソース（例えば背景画像）を拒否するには十分です. CSSセレクタは、記事コンテンツ外の要素を参照できないように書き直されます（絶対配置などを利用した記事の一部の配列改変によって、内容以外の領域の見え方を改変する手法は見送りました. ウィキテキストやインライン装飾でも既に同じ結果が出せるため、究極の解決策とはならないからです. ）

認識するCSS規則
現在、TemplateStyles は主流を含む複数のブラウザが推奨するCSS3プロパティ（2017年前期時点）のほとんどを受け付けます. 単純な規則に加えて@規則のうち と 、 と 及び と も推奨します（セキュリティ上の理由からフォントフェースは名称が で始まるものに限定）. 許可されたプロパティの包括的なリストについては、のStylePropertySanitizerコードの$propsの部分を参照してください.

現在、標準外のプロパティ (ベンダー接頭辞を含む) は非推奨です. 今後の計画については を参照してください.

モバイル版・デスクトップ版の解像度の設定は?
メディアクエリではモバイル版とデスクトップ版で、解像度の要素を指定できます. 装飾の仕様はモバイル版に適合させるのが既定で、メディアクエリでデスクトップ向けにラッピングすればよいと教える人がいます. しかしながらMediaWikiではタブレット版とデスクトップ版の表示を720px×1000px ブレークポイントを標準としている点にご留意ください.

特定の外装限定仕様を作るには？
MediaWikiでは ならびに 要素に多種のクラスを提供し、どの外装を使用しているか示すものもこれに含まれます. . これらをターゲット設定するには、必要なクラスを含む または 要素に空白スペース（またはCSS用語では子孫コンビネータ）を続けて簡略なセレクタを指定します.

通常はモバイル版やデスクトップ版を区別して考慮するのではなく、この技術を用いてデザイン面の一貫性を保つべきです. どちらの版でもすべての外装を使用できるため、採用する解像度も適合させる必要があります. #モバイル版・デスクトップ版の解像度の設定は？も合わせて参照してください.

MediaWikiメッセージでスタイルを使用するにはどうすればよいですか？
To prevent a malicious user from messing with the parts of the document outside the main content area, all CSS rules automatically get prefixed by the  CSS class. If you use a TemplateStyles-based template outside of the content area (e.g. in the sitenotice), you need to provide that class yourself, by wrapping the template in something like.

CSS装飾はどの順で上書きされるか？
どの CSS 規則が効果を発揮するかは詳細度で決まります. (大ざっぱに説明するとセレクターの複雑さです. 例えば  は   よりも詳細です. ) 特異性が同等であれば、文書に後から出現するCSSスタイルを採用します.

MediaWiki:Commons.css やその他のサイトスクリプト、利用者スクリプトやガジェットの読み込み先は、ページの 節です. TemplateStyles のスタイルシートは に読み込まれ、サイトまたは利用者スクリプトあるいはガジェットの規則と同等の重さを与えられるため、TemplateStyles 2件を充当すると2番目の指定が優先されます. （注意事項として、TemplateStyles 規則は不転写です. 同一のスタイルシートを特定のページで複数回指定されても、最初の位置にしか追加されません. また「後から」とは文中の位置であり、読み込みの順位ではありません. ガジェットがすべて読み込まれるとJavaScriptを使ってページを操作し、固有のCSSを追加します. 場合により、例えばボタンを押すなど利用者の特定の操作を待ってオンデマンドで追加します. しかしながら追加する位置が先頭の節であるため、特異性が同等の規則を本文に置いてあると、そちらが優先されます. ）

Luaモジュールはどうすればスタイルと相互作用できますか？
TemplateStyles を Lua モジュールから呼び出すには を使います.

コードのサンプルは以下の通りです.

不正行為対策機能の提供
CSSを別個のページに保存するというデザインの決定には、標準的な不正行為防止ツールセットとの融合を簡単に実現する目的もあります. TemplateStyles CSSページ固有の記述モデル（ ）に変更を加えると、不正行為フィルターで行う検知と管理に 変数を利用できます.

CSS の添付はテンプレート参照読み込みの場合と同様に監視が可能で、「」オプションで特定のスタイルシートが使われたページを、「」で（エディタによっては編集画面でも）どのスタイルシートが使われたかを、「」でページに影響を与えそうな最近の更新を、それぞれ把握できます.

テンプレート スタイルは HTML コードで識別できる情報を残します. 特定の規則の出どころ、ページのソースの閲覧、閉じる タグがあると例えば変数   を取り、123456 の部分がスタイルシートの版番号を示します (例えば差分表示を使用した場合).

TemplateStyles を制作する上での意思決定の方法
CSSをテンプレートに含める発想は、コメント募集（RfC）で受けた提案が承認されて始まりました. 技術面の詳細は2度目のRfCで詰め、ワークフローは ユーザとの協議で固めたものです.

TemplateStyles の製作者
TemplateStyles はもともと、 (それ以前にCorenがボランティアとして実験) のプロジェクトでした. 当時、Brad Jorsch (開発者)、Bryan Davis (マネージャー)、Gergő Tisza (開発者). 担当と責任は移動しました. 現在の所有者については、メンテナーのページを参照してください.

エラーの報告や要望の提案
PhabricatorのコンポーネントでTemplateStylesを選び、タスクを提出してください.

実際に使われる場所を見るには
あらかじめ選別したサンプルを閲覧できます.

この機能はウィキメディアの全サイトで有効です.

関連ページ

 * - 特に#Caveats節.