mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-10 17:30:26 +00:00
75 lines
3.8 KiB
Plaintext
75 lines
3.8 KiB
Plaintext
|
caption: スタイルとクラス
|
||
|
|
created: 20131205160532119
|
||
|
|
modified: 20241123111135825
|
||
|
|
original-modified: 20230726105744098
|
||
|
|
tags: WikiText [[How to apply custom styles]]
|
||
|
|
title: Styles and Classes in WikiText
|
||
|
|
ja-title: WikiTextでのスタイルとクラス
|
||
|
|
type: text/vnd.tiddlywiki
|
||
|
|
|
||
|
|
CSSスタイルとクラスは、`@@二重のアットマーク@@`で囲まれたインラインコンテンツまたはブロックコンテンツに適用できます。クラスは、特定のブロックWikiText要素に適用できます。
|
||
|
|
|
||
|
|
スタイルやクラスを指定せずに`@@二重のアットマーク@@`でラップされた//インラインコンテンツ//には、`tc-inline-style`クラスが割り当てられ、ハイライトされたテキストとして表示されます。ハイライトされたテキストの前景色と背景色は、現在のパレットで`highlight-background`と`highlight-foreground`として定義されている色が使われます。
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@ハイライトされたテキスト@@">>
|
||
|
|
|
||
|
|
!! スタイル
|
||
|
|
|
||
|
|
複数のスタイル属性(例: `color`)は、各属性の後にセミコロン`;`をつけ、開始の`@@`の直後に、スペースを入れずに、記述します。
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@color:steelblue;background-color:lightcyan;カスタムスタイルのテキスト@@">>
|
||
|
|
|
||
|
|
同様に、//ブロックコンテンツ//にもスタイルを適用できます。スタイルやクラスを指定せずに`@@`内にブロック コンテンツをラップしても効果はありません。
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@background-color:lightcyan;
|
||
|
|
* アイテム 1
|
||
|
|
* アイテム 2
|
||
|
|
@@
|
||
|
|
">>
|
||
|
|
|
||
|
|
!! クラス
|
||
|
|
|
||
|
|
次のTiddlerでは、デモンストレーションの目的で`coloured-text`クラスと`coloured-bg`クラスが定義されています:
|
||
|
|
|
||
|
|
|
||
|
|
```
|
||
|
|
.coloured-text {color: darkkhaki;}
|
||
|
|
.coloured-bg {background-color: cornsilk;}
|
||
|
|
```
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.coloured-text {color: darkkhaki;}
|
||
|
|
.coloured-bg {background-color: cornsilk;}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
複数のクラス(それぞれ`.`のプレフィックス付き)は、開始の`@@`の直後にスペース` `を空けて記述します。これは、インラインコンテンツとブロックコンテンツの両方で機能します:
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@.coloured-text.coloured-bg 2つのクラスが割り当てられたインラインコンテンツ@@">>
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@.coloured-bg
|
||
|
|
* ブロックコンテンツ
|
||
|
|
* 1つのクラスを割り当て
|
||
|
|
@@">>
|
||
|
|
|
||
|
|
複数のクラスとスタイルを同時に適用できます。インラインコンテンツの場合は、最初にスタイルを定義し、その後にクラスを定義する必要があります。
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@font-size:1.5em;.coloured-text.coloured-bg カスタムスタイルとクラスを持つテキスト@@">>
|
||
|
|
|
||
|
|
ブロックコンテンツの場合、スタイルとクラスは、インラインコンテンツの場合と同じように開始`@@`の後の1行で定義することも、それぞれ`@@`で始まる別々の行で定義することもできます:
|
||
|
|
|
||
|
|
<<wikitext-example src:"@@font-size:1.5em;
|
||
|
|
@@.coloured-text
|
||
|
|
@@.coloured-bg
|
||
|
|
* ブロックコンテンツ
|
||
|
|
* カスタムスタイルとクラス
|
||
|
|
@@">>
|
||
|
|
|
||
|
|
同様に、行の先頭の文字によって導入されるブロックWikiText要素に、スタイルではなくクラスを適用できます。プレフィックス`.`が付くクラスは、特殊文字の直後に記述され、その後にスペース` `が続きます。
|
||
|
|
|
||
|
|
<<wikitext-example src:"!!!.coloured-bg カスタム背景クラスを使用した見出し。
|
||
|
|
|
||
|
|
* 標準のリスト要素。
|
||
|
|
*.coloured-bg カスタム背景色を持つリスト要素。
|
||
|
|
*.coloured-text カスタムテキスト色を持つリスト要素。
|
||
|
|
*.coloured-bg.coloured-text 両方のカスタムクラスを持つリスト要素。
|
||
|
|
">>
|