module cssとdivとspan

SCP-JP SB3 » 黒紫の研究室 » module cssとdivとspan

divだけを使う場合

諸々の説明

module css, div, spanは下のように使(うと私は思って)います

[[module css]]
.構文1 {
構文2: 構文3;
構文2: 構文3;
}
[[/module]]

[[div class="構文1"]]
テキスト
[[/div]]

もしくは

[[div class="構文1" style:"構文2: 構文3; 構文2: 構文3"]]
テキスト
[[/div]]

[[span class="構文1"]]
テキスト
[[/span]]

もしくは

[[span class="構文1" style:"構文2: 構文3; 構文2: 構文3"]]
テキスト
[[/span]]

もしくは

[[span style="構文2: 構文3; 構文2: 構文3"]]
テキスト
[[/span]]

これらを駆使して、様々な事ができます。利用方法は次の4つです。

divだけを使う
spanだけを使う
module cssとdivを使う
module cssとspanを使う

それぞれの使い方はこうです

divだけを使う場合

基本的にはこれを使います

[[div class="構文1" style:"構文2: 構文3; 構文2: 構文3"]]
テキスト
[[/div]]

例えば構文1に『blockquote』を、構文2と構文3の組み合わせに『background』-『#191970』と『color』-『#e6b422』を使います(つまり下のような

[[div class="blockquote" style:"background: #191970; color: #e6b422"]]
テキスト
[[/div]]

という感じの構文です。)
このように使うと、下のようなものが完成します。

テキスト

spanだけを使う場合

基本的にはこれを使います

[[span style="構文2: 構文3; 構文2: 構文3"]]
テキスト
[[/span]]

例えば構文2と構文3の組み合わせに『background』-『#191970』と『color』-『#e6b422』を使います(つまり下のような

[[span style="background: #191970; color: #e6b422"]]
テキスト
[[/span]]

という感じの構文です。)
このように使うと、下のようなものが完成します。

テキスト

module cssとdivを使う場合

基本的には、以下の2つを使います。

[[module css]]
.構文1 {
構文2: 構文3;
構文2: 構文3;
}
[[/module]]

と

[[div class="構文1"]]
テキスト
[[/div]]

です。
[[module css]]~[[/module]]の方はどこに入れても構いません。
例えば、構文1の方に『nightblock(このページだけのものです)』、構文2と構文3の組み合わせに『background』-『#191970』と『color』-『#e6b422』を使います(つまり下のような

[[module css]]
.nightblock {
background: #191970;
color: #e6b422;
}
[[/module]]

と

[[div class="nightblock"]]
テキスト
[[/div]]

という感じの構文です。)
このように使うと、下のようなものが完成します。

テキスト

module cssとspanを使う場合

基本的には、以下の2つを使います。

[[module css]]
.構文1 {
構文2: 構文3;
構文2: 構文3;
}
[[/module]]

と

[[span class="構文1"]]
テキスト
[[/span]]

[[module css]]
.nightblock {
background: #191970;
color: #e6b422;
}
[[/module]]

と

[[span class="nightblock"]]
テキスト
[[/span]]

という感じの構文です。)
このように使うと、下のようなものが完成します。
テキスト

構文1には次のような構文が入ります。

blockquote　『> 』と同じ効果を示します。

bblock　こんな感じにマウスを当てる or タップで文字が浮き上がります。

dblock　こんな感じにマウスを当てる or タップで背景色が消えます。

そのページだけの構文　いい感じに利用できます。

構文2と構文3には次のような構文の組み合わせが入ります。

background #~(色のコード #191970など)　背景色を変える

color #~(色のコード #191970など)　文字色を変える

text-align centerやleft、rightなど　文字の位置を変える

font-size| n%(75%など)　文字の大きさを変える

div

テキストを点で囲む

▽見本

テキスト

▽構文

[[div class="blockquote"]]
テキスト
[[/div]]

パネル

▽見本

テキスト

▽構文

[[div class="content-panel standalone series"]]
テキスト
[[/div]]

財団記録・情報保安管理局より通達

▽見本

財団記録・情報保安管理局より通達

現在閲覧中の報告書は該当ファイルのアーカイブ版です。
当報告書は現行文書の過去のバージョンであり、ロック及びアーカイブされています。内部に含まれる情報は不正確であるか、最近の利用可能なデータを反映していない可能性があります。

▽構文

[[div style="color: black; border: solid 1px #000000; background:#f2f2c2 url(http://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) center no-repeat; padding:5px; margin-bottom: 5px;"]]
[[=]]
[[size 150%]]**財団記録・情報保安管理局より通達**[[/size]]
----
現在閲覧中の報告書は該当ファイルのアーカイブ版です。
当報告書は現行文書の過去のバージョンであり、ロック及びアーカイブされています。内部に含まれる情報は不正確であるか、最近の利用可能なデータを反映していない可能性があります。
[[/=]]
[[/div]]

監督評議会命令

▽見本

監督評議会命令

下記のファイルはレベル5/XXXXの機密事項に指定されています。不正なアクセスは禁じられています。

XXXX-JP

▽構文

[[div style="background: url(https://scp-jp-storage.wdfiles.com/local--files/file:2532460-25-b7bd/scp_trans.png) bottom center no-repeat; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]

@@ @@
@@ @@

@@ @@

@@ @@

[[=]]
++* ##black|監督評議会命令##
##black|下記のファイルはレベル5/XXXXの機密事項に指定されています。不正なアクセスは禁じられています。##
[[/=]]
= **##black|XXXX-JP##**

@@ @@

@@ @@

[[/div]]

+ show block