「ヘルプ:CSS」の版間の差分

削除された内容追加された内容

インライン

2024年2月25日 (日) 07:25時点における版

註：このページを読む前に、Help:編集の仕方、Help:WikivoyageにおけるHTML、Wikivoyage:利用者ページを読むことをお勧めします。

日本語版ウィキボヤージュをはじめとする、MediaWikiのマークアップ記法を使っているウィキでは、ほかのWebサイト同様にCSS（Cascading Style Sheets）を使うことができます。ここでは、そもそもCSSが何で、どこでどのように使用できるのかを解説します。

CSSとは

詳細は「w:Cascading Style Sheets」を参照

CSS（正式名称：Cascading Style Sheets）は、HTML^{(これは何?)}で書かれた文章に色を付けたり太さを変えたりするために使われます。MediaWikiのマークアップ記法を使用しているウィキでは、CSSが適用できるようになっており（例外あり）、文字の色や太さなどの見た目を変えることができます。

MediaWiki上でのCSS

ここでは、CSSを記述する具体的な場所について説明します。

なお、CSSのページは、拡張子.cssで終わるものである必要があります^{[註 1]}。

MediaWiki名前空間に記述

註：MediaWiki名前空間は、インターフェース管理者の権限を持つ利用者のみが編集できます。

MediaWiki名前空間にCSSを記述する場合、以下のページにCSSを記述すると、そのウィキを見る全ての利用者（非ログイン利用者も含む）に対して適用されます。

MediaWiki:Common.css - サイト全体に適用されます。
MediaWiki:Print.css - 記事を印刷する際に適用されます。
MediaWiki:Mobile.css - モバイル版で適用されます。
MediaWiki:Vector.css - ベクタースキンで表示した際に適用されます。
MediaWiki:Minerva.css - MinervaNeueスキンで表示した際に適用されます。
MediaWiki:Modern.css - モダンスキンで表示した際に適用されます。
MediaWiki:Monobook.css - モノブックスキンで表示した際に適用されます。
MediaWiki:Timeless.css - Timelessスキンで表示した際に適用されます。

このほかに、ガジェットに付属するCSSなどもMediaWiki名前空間に保存されています。

利用者サブページに記述

ログイン利用者は、利用者:（利用者名）/common.css（サブページ名は小文字です）というページに記述することで、独自のCSSを自分だけに適用することができます。

なお、サブページ名は、利用者:（利用者名）/common.cssなら全体に、利用者:（利用者名）/print.cssなら印刷時になど、MediaWiki名前空間に記述する場合と同様です。

タグのstyle属性

先述の2つは、一つのページを丸ごとCSSのファイルとするものでしたが、ここで紹介するのは記事のHTMLタグに直接CSSを書く方法です（通常のHTMLと同様）。

<タグ名 style="ここにCSS">ほげほげ</タグ名>のようにすることで、HTMLタグのstyle属性にCSSを設定できます。

例
コード	出力
<div style="border:lightgray 2px solid; background-color:aliceblue;"> <span style="color:red;">あ</span>いうえお </div>	あいうえお

TemplateStyles

詳細は「MediaWikiでの説明文書」を参照

TemplateStyles拡張機能は、テンプレートにCSSを適用するための拡張機能で、日本語版ウィキボヤージュでは利用することができます。

TemplateStyles機能で呼び出すCSSは、通常は呼び出す側のテンプレートのサブページに置くべきです。また、サブページ名はstyles.cssが推奨されます。

CSSを呼び出す方法は、以下のとおりです。

CSS用のページを作成します。
呼び出す側のテンプレートで、<templatestyles src="（CSSのページ名）"/>と記述します。

コンテンツモデルの変更

.cssを最後に付けたファイルを作って、templatestylesで読み込んだのに、「ページにはTemplateStylesに対応するコンテンツモデルとして「サニタイズCSS」が必須です」と表示され、つまづくケースがあります。MediaWikiには、ページのコンテンツモデルという設定が存在し、そのページが普通のページなのかLuaで書かれているのかCSSで書かれているのか、という判別ができるようになっています。

実はCSSに関するコンテンツモデルは2種類あります。それが、「CSS」と「サニタイズCSS」です。templatestylesで読み込むためには「サニタイズCSS」の設定でなければなりませんが、利用者ページなどで.cssのファイルを作成すると、「CSS」の設定になります。こちらは、主にユーザーがページを表示する際に読み込むファイル、という設定です。そのため、もしもCSSではなくサニタイズCSSにしたい、あるいはその逆なのであれば、コンテンツモデルの変更を行う必要があります。Wikivoyageではコンテンツモデルを変更できるのは管理者だけであるため、管理者伝言板で申請をしましょう。

書き方

ここでは、CSSの書き方について解説します。

CSSは、セレクタ・プロパティ・値の3つで構成されています。例として、下に最も簡単なCSSの例を書いてみます。

span {
	color: blue;
}

この例ではspanの部分がセレクタ、中括弧の中で:より前（上記例におけるcolor）がプロパティ、後（上記例におけるblue）は値です。また、中括弧に囲まれた部分（中括弧を含む）を宣言ブロックと言い、宣言ブロックとセレクタを合わせたものを規則集合、中括弧に囲まれた中身を宣言と言います。

セレクタはスタイルを適用する場所を指定します。例えば、上の例では<span>というタグで囲まれた全ての場所を指定しています。適用するスタイルの具体的な内容は、宣言に書きます。宣言では、プロパティは「何を変更するか」を、値はプロパティの内容を「何にするか」をそれぞれ指定します。上記例ではcolor（プロパティ、色を変更する）をblue（値、青色にする）にしています。よって、上の例でやっていることをまとめると、「spanタグに囲まれた部分の色（color）を青色（blue）にする」となります。

span {
	color: blue;
}

span {
	font-size: 15px;
}

この例では、どちらの規則集合でもspanという要素に対する指定をしています。この場合、これらはまとめて1つの宣言ブロックの中に書くことができます :

span {
	color: blue;
    font-size: 15px;
}

CSSには優先順位というものがあり、複数の場所で同じ要素にスタイルが指定された場合にこの優先順位が適用されます。MediaWikiのシステムでは、CSSの優先順位は以下のようになっています。

HTMLタグに直接書かれたもの
利用者サブページに書かれたもの
MediaWiki名前空間に書かれたもの
サイトのデフォルトのもの

セレクタ

プロパティ

コーディング規約

WikivoyageをはじめとしたWikimediaのサイトでCSSを書く際には、コーディング規約というルールに則る必要があります。コーディング規約はMediaWikiのサイトに載っています。

クラスの命名について、MediaWikiのシステムに関連するクラスはmw-で、拡張機能に関連するクラスはext-で、スキンに関連するクラスはskin-でそれぞれ始めます。セレクタは1行に1つが原則で、大括弧（[、]）とその中身の間やセレクタの後、そしてコロンの後にはスペースを入れます。

CSSを書いている際に、まだ草案段階の機能を使い、ベンダープレフィックス（例えば-webkit-で始まるもの）を併記する場合には、ベンダープリフィックスつきの行を先に書いてください。これはいくつかの問題を修正します：https://css-tricks.com/ordering-css3-properties/

使用例

ここでは、いくつか使用例を挙げます。導入する際は「導入」にある「コード」の内容をcommon.jsに追加するか「スタイルシート」にあるCSSをcommon.cssに追加することで実際に使用することができます。また、「コード」の内容をメタのglobal.jsに追加すれば（或いは「スタイルシート」の内容をglobal.cssに追加すれば）、全てのウィキメディア・プロジェクトのウィキで使用することができます。

旗を隠す

説明 : Listingテンプレートで表示される旗（例 : ベネルクス#主要都市）を非表示にします。
スタイルシート :

.vcard image {
    display: none;
}

「印刷/書き出し」を非表示に

説明 : サイドバーで表示される「印刷/書き出し」を非表示にします。
スタイルシート :

#p-coll-print_export {
	display: none;
}

サイドバーの固定

説明 : サイドバーを固定し、ページをスクロールしてもサイドバーが動かなくなります。また、pre要素についても高さが一定になります。なお、ベクタースキン用です。
スタイルシート :

/* Fix sidebar */
div#mw-panel { position: fixed;
	overflow: auto;
	top: 0px;
	bottom: 0px;
	height: 100%;
	/* Prevent content overlay when sidewards scrolling */
	background-color: #F6F6F6;
	border-right: 1px solid #A7D7F9;
}

/* Prevent sidewards scrolling in pre elements */
pre {
	overflow: auto;
	max-height: 25em;
}

フランス語版外装

説明 : フランス語版で採用されている、水色基調の表をはじめとしたいくつかの外装を、日本語版で実施します。
スタイルシート :

.ns-0 .pp_Column td {
	background-color:#effafa;
	font-size:90%;
	border:1px solid #44718a !important;
	border-radius: 0.45em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.ns-0 .wikitable {
	border: 1px solid #6cc8f3;
	margin: 0 0 1em;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
}

.ns-0 .wikitable tr:first-child th {
	text-align: center;
	color: #004f80;
	padding: 0.3em 0.35em;
	font-size: 1.2em;
	background: #f0f0f0;
	border-top: 1px solid #c0c0c0;
	border-top: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-khtml-border-radius-topleft: 5px;
	-khtml-border-radius-topright: 5px;
}

.ns-0 .wikitable td {
	padding: 2px 0.4em;
	vertical-align: baseline;
}

.ns-0 #region_list > .content-table-wrapper tr td:last-child {
	background-color: #F8F8F8;
}

外装変更

説明 : 外装を変更します。具体的には、ページのコンテンツを枠で囲み、ページの頭の部分に半透明の背景を付け、フォントを游ゴシックに変更します。

#content {
	background-image: url("//upload.wikimedia.org/wikipedia/commons/c/c9/Bluemarble_banner_RTL_%28cropped%29.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-color: rgba(255,255,255,0.9);
	background-blend-mode: screen;
	background-size: 100% auto;
	background-origin: content-box;
	background-attachment: local;
	background-clip: border-box;
	-webkit-background-clip: border-box;
	border: solid 1px transparent;
	border-top: solid 3px transparent;
	border-image: linear-gradient(-68deg, #000080, #00008B, #33F, #4B0082, #8A2BE2);
	border-image-slice: 1;
	border-image-repeat: stretch;
	border-image-source: linear-gradient(-68deg, rgb(0, 0, 128), rgb(0, 0, 139), rgb(51, 51, 255), rgb(75, 0, 130), rgb(138, 43, 226));
	color: #444 !important;
	font-family: "Yu Gothic", 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
	-webkit-touch-callout: none;
	animation-duration: 2s;
	animation-name: backgroundAnimation;
	line-height: 1.5;
	letter-spacing: 0;
	tab-size: 4;
	padding: 1px 4px;
}

::placeholder {
	font-family: "Yu Gothic", 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
}

脚注

註釈

↑ 例外あり。詳しくはヘルプ:コンテンツモデルの変更・特別:コンテンツモデルの変更を参照。

@@ 1行目: / 1行目: @@
+{{Helpbanner}}
 <div class="mw-highlight">
 <div style="font-style:italic;">