ヘルプ:ページスタイル

ページスタイル

姉妹プロジェクト：データ項目

校正機能を利用して掲載した作品にCSSを適用するために使用する方法の説明。

CSS"スタイルシート"をインデックスページに適用することで、その中のすべてのPage:名前空間のページが同じスタイルを共有できるようになります。このCSSは、<page/>タグを使用してページがトランスクルージョン（参照読み込み）されるときに、自動的にインクルードされます。

必ずしも、作品にCSSを使用しなければならないわけではありません。この機能は、作業を困難にするのではなく、容易にするために提供されています。

CSSの適用方法

CSSは、インデックスページの/styles.cssサブページから読み込まれます。このページが存在しない場合、ProofreadPage拡張によってデフォルトでスタイルを適用しません。

注:これは、インデックスページのCSS記入欄に記入するスタイルシートとは異なります。そのスタイルの指定は、Page名前空間にあるページにのみ適用され、トランスクルージョンされません。

/styles.cssを別のCSSページにリダイレクトすることはできますが（たとえば、一連の巻が同じスタイルを共有している場合）、リダイレクトページの「コンテンツモデル」を(「sanitized-css」から)「wikitext」に変更する必要があります。現在、この操作は管理者のみ行うことができます。^[1]

CSSが適用される場所

現在、インデックス固有の CSS は次の場所に自動的に適用されます。

そのインデックス内の Page 名前空間内
インデックスページ自体^[2]
<page/>タグを使用して、ページがトランスクルージョンされたの場合のトランスクルーディングページ。
- 注意:{{Page:XXXX.djvu}}構文または{{page}}を使用して直接トランスクルードした場合は適用されません。これらの構文を避けて<page/>タグを使用するか(推奨)、手動で<templatestyles src="Index:Foo.djvu/styles.css"/>を記入して呼び出す必要があります。

CSSの書き方

CSSは、TemplateStyles拡張によって提供される「sanitized CSS」と呼ばれる完全なCSSのサブセットです。通常のCSSと同じですが、特定のプロパティに制限があります。

一部の「まれな」CSSプロパティはまだサポートされていません。
データURLは許可されていません
Commons（またはWikisource）以外の画像URLは許可されていません。

CSSはページコンテンツにのみ適用されます（Wikisource UIの残りの部分には影響しません）。

クラスとID

CSSは「クラス」と「ID」で指定することができます。クラスはいくつでも要素に適用することができます（また、どの要素もスペースで区切っていくつでもクラスを持つことができます）。どの要素もIDを持つことができますが、持つことができるのは1つだけで、そのIDを持つページ上の唯一の要素でなければなりません。

クラスはドット接頭辞(.)を持つCSSルールで、IDはハッシュ(#)で指定します。

以下のspan要素にはクラスとIDを指定しています。

<span class="red bold">クラス: red と bold</span>
<span id="blue" class="bold">ID: blue、クラス: bold</span>
<span class="red">クラス: red (boldはない)</span>

次のCSSと組み合わせます。

.red {
    color: red;
}
.bold {
    font-weight: bold;
}
#blue {
    color: #00008B; /* dark blue */
}

結果は次のようになります。

クラス: red と bold ID: blue、クラス: bold クラス: red (boldはない)

継承

「子」セレクタと「子孫」セレクタを使用して、他の要素の子である要素をターゲットにできます。

parent_selector>child_selectorを持つターゲット直接の子
ancestor_selector descendant_selectorを持つすべての子孫(間にある任意の数の「世代」)をターゲットにします

たとえば、次のHTMLを生成するウィキコードがあるとします。

<div class="parent">親コンテンツ
  <div>子コンテンツ
    <span>孫のコンテンツ
        <span>曾孫コンテンツ</span>
    </span>
  </div>
</div>

すると次のようなCSSが作成できる

/*これにより、「子コンテンツ」ボックスの周囲にのみ境界が配置されます。*/
.parent > div {
    border: 1px solid blue;
}
/*これにより、孫と曾孫のボックスの周りに別々の緑のアウトラインが配置されます。
*(ただし、「子」ではありません。これはdivであり、spanではないためです*/
.parent span {
    outline: 1px solid blue;
}

カスケーディング

「CSS」の「C」はカスケーディング(cascading)を意味します。これは、ルールが明確に定義された順序で相互に上書きできることを意味します。各プロパティに対して、どのルールが適用されるかは次のように決定されます。

要素に直接設定されたスタイルが優先されます。
より「詳細な」スタイルが優先されます。
2つの規則が同じ「詳細度（specificity）」を持つ場合、最後に発生する規則が優先されます。

「詳細度」には特定の定義された意味がありますが、一般的には、セレクタがどの程度「明確」であるかの尺度です。たとえば、次のHTMLとCSSのようになります。

HTML	CSS
<div class="red">親 <div class="green">子</div> </div> <div class="green">子</div>	.green { color: green; } .red > .green { color: red; }

この場合、class="red"要素内のclass="green"要素では、より詳細なセレクタ.red>.greenが詳細度が低い.greenよりも"優先"され、要素のスタイルはcolor:red;になります。

CSSの使用目的

CSSは、非常に退屈で反復的または冗長なインラインスタイルを必要とするものを適用するのに理想的です。

章の見出しのサイズと間隔
ブロック引用符のサイズと周囲の間隔
リストの書式設定(箇条書きの調整など)

:nth-childのようなセレクタを使用できるため、テーブル内の肥大化したインラインスタイルを減らすのにも優れています。

意味論的（semantically）に有用である

CSSは、HTML(構造)とCSS(スタイル)によって提供される構造スタイルの関心の分離の半分です。CSSを最大限に活用するためには、「意味論的（semantically）に」使用する必要があります。つまり、コンテンツに意味を与え、その意味を使用してスタイルを適用します。

たとえば、これは意味論的に空です。

<span style="font-weight : bold;">オルシーノ公爵</span>: 音楽が愛の糧であるなら、演奏し続けよ、

これは最初の単語に意味を与えます

<span class="character">オルシーノ公爵</span>: 音楽が愛の糧であるなら、演奏し続けよ、

そして、他のすべてのキャラクターの名前とともに、次のCSSでターゲットにすることができます。

.character {
   	font-weight : bold;
}

また、CSSでターゲットにするために使用したい別のHTMLタグの省略形を提供するという理由だけで、ウィキコード構文を乱用すべきではありません。;と:は、それぞれ「説明リスト」の用語と説明を表す<dl><dt>と<dl><dd>要素を提供します。^[3]。意味がある場合（用語集や辞書など）にのみ使用してください。

リストがある場合は、通常、*（順序なし）または#(順序付き)が正しい選択です。

CSSを使うべきでない事例

以下を提供するためにインデックスベースのCSSを使用しないでください。

通常の段落間の空白の除去すること。たとえ原本に段落間の空白がなかったとしてもです(Wikisource:スタイルガイドを参照)
フォント（例：セリフ体）、文字の配置、フォントサイズ、行間の全体的な変更（たとえ原本が小さい文字や密な印刷であってもです。）
全体的に文章の方向を縦書きにしたり、段組みにすること。たとえ原本が縦書きや段組みレイアウトで、組版されていた場合であったとしてもです。

これらはすべて、ダイナミックレイアウトまたはユーザCSSによって提供されるべきです。

すべてのユーザーがフル機能のCSSデバイスを持っているわけではないことに注意してください。たとえば、多くの電子書籍リーダーはCSSの非常に小さなサブセットしか処理できません。たとえリーダーが任意のCSSをサポートしていない場合であっても、表示する必要のあるコンテンツにCSSを使用すべきではありません。たとえば、CSSカウンタを使用してリストに番号を付けたり、:afterセレクタを使用してリスト番号の後にドットを追加したりすると、CSSを使用していないユーザーに間違ったものが表示されます。大まかなガイドとして、コピー&ペーストできない場合、CSSが使用できないときにはユーザーに表示されません。

むき出しのクラスを避ける

また、テンプレートが必要な場合には、Wikicodeでむき出しのCSSクラスを使用することも避ける必要があります。たとえば、テンプレート:Scのように、特定の方法で文字名がタイプセットされた作品があるとします。各出現に対してフォーマットを繰り返したくない場合は、テンプレート{{MyWork character}}を定義してこれを適用する必要があります(おそらく独自のTemplateStylesを使用します)。

<templatestyles src="MyWork character/styles.css"/><!-- インラインCSSやその他のテンプレート -->
<span class="mywork_character">{{{1}}}</span>

次のように使用します。

あばよ、{{MyWork character|ロング・ジョン・シルバー}}！

作品のページコンテンツに、以下のようなむき出しのCSSを使用するのは好ましくありません。

あばよ、 <span class="mywork_character">ロング・ジョン・シルバー</span>！

つまり、CSS（作品固有のCSSを含む）で定義されたクラスは、ほとんどの場合、直接ではなくテンプレートを介して呼び出される必要があります。テンプレート自体がHTML/CSSを構成していても、HTML/CSSよりもテンプレートを推論して維持する方がはるかに簡単です。

CSSとテンプレートの比較

作品固有のCSSで処理するのに適したものもあれば、テンプレートの方が適したものもあります。次の場合は、テンプレートの使用を検討してください。

必要な出力には、HTMLタグなどの構造的要素が必要である。
目的の出力は他の作品で役立つ(つまり、作品固有のものではありません)。CSSサブページをリダイレクトすることはできますが、これはこの作品専用のスタイルが失われることを意味します。
上記のように、スタイル設定は作品固有のものですが、アプリケーションも同様である。その場合は、作品固有のテンプレートの方が適しています。作品ごとのCSSは、作品固有のスタイル設定を汎用クラスに適用するのにより適しています。

作品固有のCSSを使用してテンプレートの出力をターゲットにすることもできます（該当のテンプレートでは、これを実現可能にするクラスを設定する必要があります）。

以下に、CSSで効果的にターゲットにできるテンプレートセットクラスをいくつか示します(その他はCategory:ページスタイルのクラスを適用するテンプレートにあります)。

{{pseudoheading}}:
- 見出し要素全体には.wst-headingがあります。 (テンプレート:Search/css).
- 派生テンプレートは、他のクラスに適用されます。
{{rule}}
- <hr>要素にはクラス.wst-ruleがあります。
{{section end rule}}
- 特に、セクション/章の最後にある罫線に使用します。
- <hr>要素には、クラス.wst-ruleと、.wst-section-end-ruleで始まるクラスがあります。(テンプレート:Search/css).
{{signed}}
- 要素のクラスは.wst-signedです。(テンプレート:Search/css)
{{running header}}
- 外側の要素にはクラス.wst-rhがあります。(テンプレート:Search/css)
{{quote}}
- <blockquote>要素には、クラス.wst-quoteがあります。(テンプレート:Search/css)
{{block center}}
- メインコンテナのクラスは.wst-block-centerです。(テンプレート:Search/css)
- 使用される場合、title要素はクラス.wst-block-center-titlを持つ。(テンプレート:Search/css)
{{index list}}
- メインコンテナにはクラス.wst-index-listがあります。 (テンプレート:Search/css).

1つのページにCSSが必要な場合

1つのページ(表など)だけに適用されるCSSがある場合でも、通常どおりTemplateStylesを使用できます。

<templatestyles src="Index:Some book.djvu/p321_styles.css" />

これを変換するには、ページ名前空間のページの本文に適用する必要があります。CSSは、この1つのページが変換されるコンテキスト全体に適用され、このページのみに限定されないことに注意してください。そのため、IDまたはクラスを使用するか、ページルールの効果を制限してください。次に例を示します。

table {
  border: 1px solid black;
}

最終ページの「すべての」テーブルに影響しますが

#errata {
  border: 1px solid black;
}

この場合は、ID属性がerrataである要素にのみ適用されます。

クラスの命名規則

複数のソースからのスタイルが1つのページに存在する可能性があるため、これらのスタイルルール間の名前の衝突を避けることが重要です。たとえば、MediaWiki自体とスキン(Vectorなど)はいくつかのクラスを追加します。mw:Extension:Wikisource Extension:Wikisourceとmw:Extension:Proofread Page Extension:Proofread Page拡張は他のクラスを追加することがあり、テンプレートによって使用されるクラスがあります。衝突の可能性を減らすために、異なるソースからのクラスに名前を付ける方法について、その起源を示す接頭辞を名前に付けることに基づいて、いくつかの規則を開発しました。

接頭辞	ソース
`.mw-`	MediaWiki自体によって追加されたクラス
`.prp-`	Proofread Page拡張で追加されたクラス
`.ws-`	日本語版ウィキソースのサイト全体のクラス
`.wst-`	テンプレートによって追加されたクラス
`._`	ページスタイルで使用するために予約
`.__`	単一の作品内で使用するためだけでなく、その作品内の単一ページでのある種の例外的な使用のために予約されています。プロジェクトの名前空間(このようなもの)でも使用されることがあります。

ここWikisourceとMediaWikiの両方に歴史的な例外がありますが、新しいコンテンツでこれらの慣習から逸脱することは強く推奨されません(古いコンテンツを更新する場合は、これらの標準に合わせて近代化することを検討してください)。

ページスタイルの場合は、主に._接頭辞を使用します。この接頭辞は個々の作業内で使用するために予約されているため、テンプレートやサイト全体のスタイルが干渉することはありません。また、一部のテンプレートのスタイルをオーバーライドする必要がある場合もあります(一部の新しいテンプレートは、ページスタイルからスタイル設定されるように明示的に設計されています)。その場合、そのテンプレートのドキュメントページに.wst-接頭辞を持つ適切なクラスがあります。

注意!テンプレートにオーバーライド可能なクラスが記述されていない場合は、そのテンプレートが使用しているクラスに気付いたとしても、スタイルを設定することは確実ではありません。テンプレート内の内部クラスはいつでも変更でき、一般に、そのクラスの外部での使用を検出して更新することはできません。

.__接頭辞を使用する必要がある場合もあります。この接頭辞は、単一のテキスト内で使用するためだけでなく、そのテキスト内での例外的な使用のために予約されています。1つのページの書式が他のテキストと異なる場合や、何かをテストしている間の一時的な場合などです。より一意なクラス名を使用しても同じことができますが、二重のアンダースコア接頭辞は、このクラスが何らかの形で特別であることを他のコントリビュータに示すこともあります。

いくつかの特定のクラス名は、一般的な本の特定の要素に使用するための慣例的なものです(ただし必須ではありません)。

接頭辞	ソース
`._toc`	書籍の目次
`._plate`	フルページプレート、イラストレーションなど。ページ全体を囲むテンプレートに追加されることもあれば、イメージ自体に直接追加されることもあります。
`._title`	本のタイトルページ(非常に複雑な書式設定が含まれている場合)

サポートされていないCSSプロパティと値

以下は、CSSレイアウトに有用と思われるものの、sanitized CSS ではサポートされていないプロパティと値の一部です。これらをサポートしてほしい場合は、パッチを投稿するか、Phabricator の該当タスクにトークンを授与して、修正するようアピールしてください。

なお、sanitized CSSでサポートされていない場合でも、インラインスタイルで使用可能です。

また、phab:tag/css-sanitizer/では、現在追加が要望されているプロパティのタスクの一覧が参照できます。

CSS 論理的プロパティと値（MDN） - 文書の方向（縦書き・横書き）に依存しないレイアウトを実現します。（phab:T322482）
list-style-type（MDN） - 任意の文字列をリストのマーカーとして使用できません。（phab:T340057）。cjk-decimal（漢数字）など一部の値は利用できません。
ruby-align（MDN）および ruby-position（MDN） - ルビの位置を指定します。（phab:T277755）

ページスタイルの例

以下に、自分のプロジェクトに切り貼りできるページ・スタイルのスタイル・シートの例をいくつか示します。運がよければ、簡単な場合はそのまま使えますが、ほとんどの場合、多少は手を加えなければならないでしょう。私たちが扱っている文章は、すべてが均一にレイアウトされているわけではないので、それぞれの文章に多少の調整が必要になることは予想されます。

ヘルプ:Page styles/tocstyles.cssページにはTemplateStylesに対応するコンテンツモデルとして「サニタイズCSS」が必須です（現状のモデルは「ウィキテキスト」）。多くの目次は、2列または3列の表に要約されます。構造はそれほど複雑ではありませんが、MediaWikiの表ウィキテキストとテンプレートでのコーディングは、元のスタイルが実際には列指向である行指向であるため、非常に複雑であることがよくあります。CSSの:nth-childセレクタ(および:first-childと:last-childショートカット)を使用したページスタイルは、これに非常に役立ちます。

シンプルな2列の目次

実際の例の1つは、The Works of Xenophonvol. 3 pt. 2のこの表である。

擬似章見出し("Contents")を無視すると、このテーブルは2つの列で構成されています。1つは章タイトル用、もう1つはそれが始まるページ番号用です。章タイトル列は左揃えで、スモールキャップスを使用し、ぶら下げインデントがあります。ページ番号列は右揃えで、章タイトルとの間に少しスペースがあります。実際に折り返されている長い章タイトルの行では、章タイトルがセルの上部に垂直に配置され、ページ番号がセルの下部に垂直に配置されていることもわかります。つまり、ページ番号は章タイトルの最終行の下部に垂直に配置されています。

これは次のような構造のwikitextで表すことができます(簡単にするためにリンクは省略しています)。

{| class="_toc"
|-
| colspan=2 class="_pagecol" | page
|-
| Preface || v
|-
| Introduction || xiii
|-
| colspan=2 class="_tocgroup" | Annotated Analysis
|-
| {{gap|2em}} Hipparch || xliv
|-
| {{gap|2em}} Horsemanship || lii
|-
| {{gap|2em}} Hunting || lx
|-
| The Duties of a Hipparch || 1
|-
| On Horsemanship || 37
|-
| On Hunting: a Sportsman's Manual, commonly called Cynegeticus || 73
|-
| Index || 127
|}

ページスタイルがない場合は、次のようにレンダリングされます。

page
Preface	v
Introduction	xiii
Annotated Analysis
Hipparch	xliv
Horsemanship	lii
Hunting	lx
The Duties of a Hipparch	1
On Horsemanship	37
On Hunting: a Sportsman's Manual, commonly called Cynegeticus	73
Index	127

多少機能的ですが、あまり良い表現ではありません。シンプルで再利用可能なスタイルルールスタイルルールを使用すると、はるかに優れたことができます。

まず、ページの中央にテーブルを作成する必要があります。

._toc {
	margin-left: auto;
	margin-right: auto;
}

次に、章のタイトルをスモールキャップにし、ぶら下がりインデントを適用し、テキストを(両端揃えではなく)左揃えにし、垂直揃えを上に設定します。

/* The first column. */
._toc td:first-child {
	font-variant: small-caps; /* make text small-caps */
	padding-left: 2em; text-indent: -2em; /* fake hanging indent. */
	text-align: left; /* left-aligned text */
	vertical-align: top; /* top-aligned text */
}

次に、ページ番号を右に、垂直に下に揃える必要があります。また、長いタイトルの場合でも、ページ番号と章タイトルの間に少しスペースがほしいと思いますが、ここはそれを追加するのに便利な場所です。

/* The last / second column. */
._toc td:last-child {
	text-align: right; /* right-align text */
	vertical-align: bottom; /* bottom-align text */
	padding-left: 2em; /* force a little space */
}

すべてをまとめると、次のようになります。

page
Preface	v
Introduction	xiii
Annotated Analysis
Hipparch	xliv
Horsemanship	lii
Hunting	lx
The Duties of a Hipparch	1
On Horsemanship	37
On Hunting: a Sportsman's Manual, commonly called Cynegeticus	73
Index	127

だいぶ良くなりましたが、まだいくつか目立った問題があります。ページ番号列の見出しが少しずれていて、「注釈付き分析」という章のタイトルがかなりずれています。その理由は、これら2つのセルがテーブル内の他のセルから逸脱しているためです。両方の列にまたがるように両方をコーディングしたので、「:first-child」と「:last-child」の両方のスタイルになります。したがって、これら2つのセルは異なるので、別々のスタイルルールを追加する必要があります。

/* The page number column heading needs special formatting. */
._toc ._pagecol {
	text-align: right; /* right-aligned text */
	font-size: 69%; /* x-smaller text */
	vertical-align: bottom; /* bottom-aligned */
	font-variant: all-small-caps; /* and all small caps */
}

/* A toc entry with no page number, because it heads sub-chapters. */
._toc td._tocgroup {
	text-align: left; /* left-aligned text */
}

これらの追加スタイルを使用すると、次のような結果になります。

page
Preface	v
Introduction	xiii
Annotated Analysis
Hipparch	xliv
Horsemanship	lii
Hunting	lx
The Duties of a Hipparch	1
On Horsemanship	37
On Hunting: a Sportsman's Manual, commonly called Cynegeticus	73
Index	127

それでも原文のページレイアウトをピクセル単位で完璧に再現したとは言えないが、それが最終目標であってはなりません。このバージョンは、膨大な時間とボランティアの労力を浪費することなく、原文のレイアウトを十分に 再現し、原文の雰囲気を残している。

簡単な3列の目次

もう1つの非常に一般的な構造は、3列の目次です。ここでは「Heart of the West」から:

これはかなり単純な3列の表です。最初の列は章番号で、ここではローマ数字です。2番目は章タイトルです。そして3番目はページ番号です。章番号は右揃えで、章タイトルはスモールキャップスで、ページ番号は右揃えです。章タイトル列とその横の2列の間にはスペースがあります。長い章タイトルもぶら下げインデントで折り返されるので、各セルの内容を垂直に揃えて一致させる必要があります。章番号と章タイトルを上に、ページ番号を下にします。

これは、次のようなウィキテキスト構造に要約されます(簡単にするためにウィキリンクと見出しは省略されています)。

{| class="_toc"
|-
| colspan=2 class="_chapterheading" | CHAPTER || class="_pageheading" | PAGE
|-
| I. || Hearts and Crosses || 3
|-
| II. || The Ransom of Mack || 22
|-
| III. || Telemachus, Friend || 32
|-
| IV. || The Handbook of Hymen || 44
|-
| V. || The Pimienta Pancakes || 62
|-
| VI. || Seats of the Haughty || 78
|-
| VII. || Hygeia at the Solito || 99
|-
| VIII. || An Afternoon Miracle || 122
|-
| IX. || The Higher Abdication || 141
|-
| X. || Cupid à la Carte || 173
|-
| XI. || The Caballero’s Way || 200
|-
| XII. || The Sphinx Apple || 219
|-
| XIII. || The Missing Chord || 244
|-
| XIV. || A Call Loan || 257
|-
| XV. || The Princess and the Puma || 266
|-
| XVI. || The Indian Summer of Dry Valley Johnson || 276
|-
| XVII. || Christmas by Injunction || 288
|-
| XVIII. || A Chaparral Prince || 306
|-
| XIX. || The Reformation of Calliope || 321
|}

スタイル設定がない場合、次のようにレンダリングされます。

CHAPTER		PAGE
I.	Hearts and Crosses	3
II.	The Ransom of Mack	22
III.	Telemachus, Friend	32
IV.	The Handbook of Hymen	44
V.	The Pimienta Pancakes	62
VI.	Seats of the Haughty	78
VII.	Hygeia at the Solito	99
VIII.	An Afternoon Miracle	122
IX.	The Higher Abdication	141
X.	Cupid à la Carte	173
XI.	The Caballero’s Way	200
XII.	The Sphinx Apple	219
XIII.	The Missing Chord	244
XIV.	A Call Loan	257
XV.	The Princess and the Puma	266
XVI.	The Indian Summer of Dry Valley Johnson	276
XVII.	Christmas by Injunction	288
XVIII.	A Chaparral Prince	306
XIX.	The Reformation of Calliope	321

まず、ページの中央にテーブルを作成する必要があります。

._toc {
	margin-left: auto;
	margin-right: auto;
}

次に、章番号のカラムのスタイルを設定する必要があります。これはテーブルの最初のカラムなので、:first-childを使用できますが、このテーブルには2つ以上のカラムがあるため、:nth-child(1)を使用して、3つのカラムすべてのセレクタが一貫するようにした方がよいでしょう。

._toc td:nth-child(1) {
	vertical-align: top; /* top-aligned */
	text-align: right; /* right-aligned */
	padding-right: 1em; /* force some space */
}

次に、章のタイトルを左揃え、上揃え、スモールキャップスにし、ぶら下がりインデントをオンにする必要があります。

._toc td:nth-child(2) {
	text-align: left;
	vertical-align: top;
	font-variant: small-caps;
	padding-left: 2em; text-indent: -2em; /* fake hanging indent. */
}

そして、ページ番号の列は右と下に配置され、章のタイトルとの間に少しスペースがあります。

._toc td:nth-child(3) {
	text-align: right;
	vertical-align: bottom;
	padding-left: 2em;
}

これらのスタイルを使用すると、テーブルは次のようにレンダリングされます。

CHAPTER		PAGE
I.	Hearts and Crosses	3
II.	The Ransom of Mack	22
III.	Telemachus, Friend	32
IV.	The Handbook of Hymen	44
V.	The Pimienta Pancakes	62
VI.	Seats of the Haughty	78
VII.	Hygeia at the Solito	99
VIII.	An Afternoon Miracle	122
IX.	The Higher Abdication	141
X.	Cupid à la Carte	173
XI.	The Caballero’s Way	200
XII.	The Sphinx Apple	219
XIII.	The Missing Chord	244
XIV.	A Call Loan	257
XV.	The Princess and the Puma	266
XVI.	The Indian Summer of Dry Valley Johnson	276
XVII.	Christmas by Injunction	288
XVIII.	A Chaparral Prince	306
XIX.	The Reformation of Calliope	321

ずっとよくなりました。あとは、章番号列とページ番号列の列見出しのスタイルを設定するだけです。

._toc td._chapterheading {
	text-align: left;
	font-size: 69%;
	font-variant: all-small-caps;
	vertical-align: bottom;
}

._toc ._pageheading {
	text-align: right;
	font-size: 69%;
	vertical-align: bottom;
	font-variant: all-small-caps;
}

章番号の見出しは2つの列にまたがるため、両方の列に適用されたスタイルの影響を受け、章番号の見出しはその列のスタイルの影響を受けます。したがって、使用されるセレクタは、一般的なスタイルを上書きするために、より具体的にする必要があります。この場合は、クラス名に加えて要素タイプ(td)を指定します。

これにより、最終的なレンダリングは次のようになります。

CHAPTER		PAGE
I.	Hearts and Crosses	3
II.	The Ransom of Mack	22
III.	Telemachus, Friend	32
IV.	The Handbook of Hymen	44
V.	The Pimienta Pancakes	62
VI.	Seats of the Haughty	78
VII.	Hygeia at the Solito	99
VIII.	An Afternoon Miracle	122
IX.	The Higher Abdication	141
X.	Cupid à la Carte	173
XI.	The Caballero’s Way	200
XII.	The Sphinx Apple	219
XIII.	The Missing Chord	244
XIV.	A Call Loan	257
XV.	The Princess and the Puma	266
XVI.	The Indian Summer of Dry Valley Johnson	276
XVII.	Christmas by Injunction	288
XVIII.	A Chaparral Prince	306
XIX.	The Reformation of Calliope	321

その他のテーブル

ヘルプ:Page styles/tablestyles.cssページに内容がありません。

左右の外枠なし

表の一般的なスタイルは、表全体の左右の外側の端を除く外側の端も含めて、すべてのセルの周りに細い罫線を引くことです。これは、作品のインデックスCSSで次のカスタムスタイルを使用することで実現できます。

._colhdbordernoside {
	border-collapse: collapse;
	border-top: 1px solid;
	border-bottom: 1px solid;
	margin:0 auto 0 auto;
}
._colhdbordernoside th {
	border-bottom: 1px solid;
	text-align: center;
}
._colhdbordernoside th:nth-child(n+2),
._colhdbordernoside td:nth-child(n+2) {
	border-left: 1px solid;
}

次に、クラス_colhdbordernosideをテーブルのウィキマークアップに追加します。

{| class="_colhdbordernoside"
|-
! —
! Gold
! Silver
! Lead
|-
| Lower || 0 || 6 || 6,8
|-
| Upper || 0 || 7 || 8,6
|}

次のようにレンダリングされます。

—	Gold	Silver	Lead
Lower	0	6	6,8
Upper	0	7	8,6

セルにパディングを追加したり、セルの内容を整列させたりすることは、読者の演習として残しています。😎

注釈

↑ phab:T85847を参照してください。
↑ これはMediaWiki:Proofreadpage index templateから呼び出されます。
↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

外部リンク

役に立つと思われるその他のCSS資料

[1] :T85847を参照してください。

[2] これはMediaWiki:Proofreadpage index templateから呼び出されます。

[3] ttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

[1]

[2]

[3]