一覧
通知 (汎用)
- 使用時の注意
- 使用するテーマに合わせて、CSS変数 --emph-accent の値を変更してください。また、--header-font がテーマに設定されているかを確認してください。
- 表示がおかしい場合
- 色に対応した変数の表示形式をよく確認してください。BHL系テーマでは色の情報を色ではなく数値の組として保持しているようです。
[[module CSS]]
:root{
--emph-accent: var(--dark-accent, #901);
}
/* Notice box */
@media only screen and (min-width: 769px) {
div.emph-notice{
margin: 3.0ex 4.5ch;
}
}
@media (max-width: 479px) {
div.emph-notice{
margin: 3.0ex 0;
}
}
.emph-notice{
clear: both;
padding: 0;
display: flow-root;
position: relative;
border: 2px solid var(--emph-accent);
}
.emph-notice > .emph-header {
text-align: center;
margin-top: 1.5ex;
padding: 0 3ch;
}
.emph-notice > .emph-header > p {
font-style: var(--header-font), sans-serif;
font-weight: 700;
font-size: 1.55em;
color: #000;
margin-top: 0;
margin-bottom: 0;
}
.emph-notice > div.emph-body {
margin: 0 3ch 1.5ex;
}
.emph-notice > div.emph-sign {
margin: 0 3ch 1.5ex;
text-align: right;
}
[[/module]]
[[div class="emph-notice"]]
[[div class="emph-header"]]
ヘッダー
[[/div]]
[[div class="emph-body"]]
通知本文
[[/div]]
[[div class="emph-sign"]]
署名
[[/div]]
[[/div]]
表示例 (SCP-2916-JP没稿)
通知
オブジェクトの性質を考慮して、実験に使用する全ての機材の素材と取り扱いに気を付けてください。また、予定外の事態に対するマニュアルは実験ごとに必ず策定、確認するようにしてください。過去に起こったインシデントの原因の8割は外部要因 (停電・地震・火災・別チームのインシデント・他団体の干渉など) ですが、残りは (見学者含む) 実験参加者のミス等による内的要因によるものです。
現在の収容プロトコル確立までに起こったインシデントを含め、これまでの結果として、収容チャンバーの全高は15mを超えていますし、また現在も有事に備えて予備チャンバーの増設は続けられています。インシデントの頻発化は速やかに深刻な収容違反をもたらすでしょう。
危機管理部門
通知 (ボックスシャドウ)
- 相違点
- 境界部分をborderではなくbox-shadowによって描画しています (BHLテーマの引用ブロックがそのように描画されています)。これにより、境界線部分の幅がボックスモデルの寸法に影響を与えなくなります。
- 使用時の注意
- 上記「通知 (汎用)」のものと同じです。
/* Notice box */
@media only screen and (min-width: 769px) {
div.emph-notice{
margin: 3.0ex 4.5ch;
}
}
@media (max-width: 479px) {
div.emph-notice{
margin: 3.0ex 0;
}
}
div.emph-notice{
clear: both;
border: none;
padding: 0;
display: flow-root;
position: relative;
box-shadow: inset 0 0 0 0.24rem rgba(var(--dark-accent)), inset .0625rem 0 0 0 rgba(var(--dark-accent)), inset 0 -.0625rem 0 0 rgba(var(--dark-accent));
}
.emph-notice > .emph-header {
text-align: center;
margin-top: 1.5ex;
padding: 0 3ch;
}
.emph-notice > .emph-header > p {
font-family: var(--header-font);
font-weight: 700;
font-size: 1.55em;
margin-top: 0;
margin-bottom: 0;
}
.emph-notice > div.emph-body {
margin: 0 3ch 1.5ex;
}
.emph-notice > div.emph-sign {
margin: 0 3ch 1.5ex;
text-align: right;
}
[[div class="emph-notice"]]
[[div class="emph-header"]]
ヘッダー
[[/div]]
[[div class="emph-body"]]
通知本文
[[/div]]
[[div class="emph-sign"]]
署名
[[/div]]
[[/div]]
表示例
臨時通達
インシデントXXXX-238のため、特別収容プロトコルの改訂が決定しています。暫定的に改訂された本文書は、以下の内容が旧版から変更されています。
- SCP-XXXX-JP → SCP-XXXX-JP-Cへ変更。SCP-XXXXはSCP-XXXX-JP-Cが引き起こす現象に再割り当てされました。
インシデントXXXX-238と同様の、特別収容プロトコルの適用外となる事例の発生・発見が起こった場合、緊急報告としてレベル4管理官へ送達してください。
番号付き定義リスト
[[module CSS]]
/* numbered description list */
.enum-dl > dl {
list-style-type: decimal;
padding-inline-start: 2.5ch;
}
.enum-dl > dl > dt {
display: list-item;
text-decoration: underline;
}
.enum-dl > dl > dd {
margin-left: 1em;
}
[[/module]]
[[div class="enum-dl"]]
: //項目1// : 説明1
: //項目2// : 説明2
: //項目3// : 説明3
[[/div]]
サンプル
- 経済的な飼育
- 食餌を自ら増やし、余剰の飼料を大量生産することで、エンゲル係数を究極に減少、ゼロを超えて負のエンゲル係数を実現!
- 効率的な繁殖
- 食餌のみならず自らも効率的に繁殖可能。最小のコストで最大の収率を獲得!
- 高級な食味
- 原種の野味とは似て非なる美味!
リスト番号だけ等幅
リストの番号だけ等幅にします。
- 使用時の注意
- 表示しているコードは#page-content内全体のリスト表示に影響するようになっています。ふつう、ページテーマがプロポーショナルフォントを採用していて、その結果リストの番号の並びが気に食わないときにしか使わないと思うのであまり問題はないはず。
/* List marker patch */
#page-content li::marker{
font-family: var(--mono-font), var(--body-font);
}
#page-content ol{
margin-left: 2em;
}
# 通常の番号付きリスト
# 続きの内容
# さらなる内容
サンプル
- 未収容のSCP-XXXX-JP-CによるSCP-XXXX-JPの発生すべて
- 収容下で6個を超えるSCP-XXXX-JP-Aを発生させた事例すべて
- ×ばつ1mを超えるサイズのSCP-XXXX-JP-Aを発生させた事例すべて
- 収容下でのSCP-XXXX-JP-A’発生事例すべて
- 例外的に記載すべきと考えられる事例すべて
- 上記に限らず、掲載除外規準を満たさない事例すべて
電話番号じゃない11桁
- コンテキスト
- Safari/iPhoneで何桁か (11桁、もしかしたら7桁なども?) の数字を表示させると、自動的に電話番号と認識してリンクをつけます。(例: 68719476736 ) Safari以外のブラウザ・PC上で再現したWebkit環境では再現しませんでした。
.notphone {
pointer-events: none;
}
.notphone > a {
text-decoration: none;
color: inherit;
}
[[span class="notphone"]]68719476736[[/span]]
68719476736
ローマ数字の合成
日本語フォントだとローマ数字はXIIIのようにそれぞれが全角文字として幅を持ってしまうのですが、ローマ数字にのみNoto Sans Symbolsを適用することで任意のローマ数字を書くことができます。
- 使用時の注意
- BHLテーマ等を使用する場合はそのフォント設定に合わせてコードを変えてください。
@font-face {
font-family: 'Noto Sans Symbols';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/notosanssymbols/v46/rP2dp3q65FkAtHfwd-eIS2brbDN6gzmVyK6Z3KOY3GzYtA.woff2) format('woff2');
unicode-range: U+2160-2188;
}
body {
font-family: verdana, arial, helvetica, 'Noto Sans Symbols', sans-serif;
}
サンプル
デフォルト (sans-serif)
MCMXCVIII
Noto Sans Symbols使用
MCMXCVIII
この記事の項目テンプレート
: 使用時の注意 : XXXX
[[collapsible show="+ show CSS code" hide="- hide"]]
[[code]]
/* Replace here with CSS code */
[[/code]]
[[/collapsible]]
[[collapsible show="+ show wiki code" hide="- hide"]]
[[code]]
[!-- Replace here with wikidot source code --]
[[/code]]
[[/collapsible]]
サンプル
[!-- sample view --]