チョイ足しCSS
はじめに
みなさん,チョイ足しCSSしていますか?
CSSといえば,GoIフォーマットで使われているような,wikiの見た目そのものを変えてしまう大掛かりなものを想像してしまうかもしれません。しかし,もっと小規模なCSSでも,うまく使えば記事を彩ることができるはずです。
ここでは私が今後使えるかもしれないと思って書いたいくつかのチョイ足しCSSを紹介します。チョイ足しCSSを使用するには,あなたの記事の任意の箇所に
[[module css]]
/* ここに追加していく */
[[/module]]
と記述して,“追加するべきCSS” にある部分をコピペします。これで準備完了。あとは使い方に従って記事を書いていけばオーケーです。
ただし,編集画面のプレビューでは入力したてのCSSは反映されません。一度セーブすればちゃんと反映されるので,気にせず書き続けてください(私のミスで正しく反映されなかった場合はごめんなさい)。
みなさんもCSSの勉強がてらチョイ足しCSSにチャレンジしてみてはいかがでしょうか。みんなでチョイ足しCSSを共有しましょう!
“化けている”文章
追加するべきCSS
[data-pseudo]::before {
content: attr(data-pseudo);
}
説明と使い方
“化けている” といっても,文字化けのことではありません。
まあ,まあ,なにも言わずに以下の文章を読んでみてください。
私が扉を開けると,そこにはすでに一匹のキツネがいた。彼女は私が現れたことに気づくと慌てたように立ち上がり,
「こゃーん」
と鳴いた。
読みましたか?では,これをそのまま手近なテキストエディタに全文コピペしてみてください。
……驚きましたか?
このギミックはふたつのアイディアから成り立っています。
ひとつは,SCP財団ではもはやお馴染みの “見えない文字” です。SCP-231などで使われているので非常に有名でしょう。見えない文字は画面に表示されないにも関わらず,実体としてそこに存在しており,コピペするとその存在に気づくことができます。これに関してはあまり説明はいらないかもしれませんね。
もうひとつは,CSSの “疑似要素” 機能です。ここで使われているbefore疑似要素は,HTML (ウェブページの本文のことだと思ってください) とは別に,CSSからコンテンツを追加します。これによって追加された文字は見えない文字とは逆に,表示されているにも関わらずコピペすることができません。
これらを組み合わせることによって,見た目と実態がまるで異なる文章を作り出すことができるというわけです。
利用する際は以下のようにします。
[[span data-pseudo="見た目"]][[size 0%]]実態[[/size]][[/span]]
本音と建前,Scipの作用によって改変されてしまった報告書とその本来の記述……アイディア次第で様々な用途に使えそうな気がしています。
めくれる検閲
追加するべきCSS
“化けている”文章のCSSに加えて
.censored {
color: #333 !important;
background-color: #333 !important;
text-shadow: none !important;
}
[data-pseudo].censored {
transition: background-color .5s ease 0s;
}
[data-pseudo].censored:hover {
background-color: transparent !important;
transition: background-color .5s ease .5s;
}
説明と使い方
SCP財団において,黒塗りの検閲は切っても切り離せない存在です。
一方で,SCP-2316で使われているように,一見黒塗りの検閲に見えて “中身がある” 検閲というアイディアがあります。
ここでは,同じアイディアでありながら,少し演出を変えてみたものを紹介します。
████████████████████████: 何だと?いいや!勿論そんなことは無かったさ。彼らには何も問題ない、私を引き込もうとはしなかった。私は彼らを水中に見て、自分から入っていったんだ。私は彼らに会う必要があった、彼らが何を言っているのかを聞きたかった。彼らは私の友人なんだよ。
こちらでは,オリジナルと違ってコピペしてもその中身をうかがい知ることはできません。ではどうやって?あなたはマウスカーソルを黒塗りの中に当て続ける必要があります。そうすればほら,浮かび上がってきたでしょう。
このCSSは前項の“化けている”文章に加え,CSSアニメーションによって背景色をゆっくりと変更することによって実現されています。ざっとコピーしただけでは “いつもどおり” の検閲文字しか見えません。しかし疑いの目を持って覗き込めば,隠されたメッセージが顔を出します。
めくれる検閲は以下のようにして使います。
[[span class="censored" data-pseudo="検閲内容"]][[size 0%]]████[[/size]][[/span]]
ところで,めくれる検閲と検閲文字が一緒にあるとギミックに気づかれやすくなるでしょう。
エージェント・███は20██年の収容作戦にて行方不明になっています。
中身がない検閲でも同様の見た目にするには以下のように記述します。
[[span class="censored" style="padding-left: 2em"]][[size 0%]]██[[/size]][[/span]]
エージェント・███は20██年の収容作戦にて行方不明になっています。
2emとなっている部分を編集することで検閲の横幅を変更できます。1emでおおよそ全角文字1文字分です。ただし現代のフォントにおける半角文字は,その通称に反して0.5emとは限りません。自分で都合がいいように調整してみてください。
疑似ルビ
追加するべきCSS
p {
line-height: 175%;
}
[data-ruby] {
position: relative;
}
[data-ruby]::before {
content: attr(data-ruby);
font-size: .7em;
position: absolute;
top: -.9em;
left: -2em;
right: -2em;
text-align: center;
white-space: nowrap;
line-height: 1;
text-indent: 0;
}
説明と使い方
日本支部ではルビ風CSSがすでに用意されています。
投稿の際は誤字・脱字・[[span class="ruby"]]衍字[[span class="rt"]]えんじ[[/span]][[/span]]にご注意ください。
投稿の際は誤字・脱字・衍字えんじにご注意ください。
通常ルビが入るとそこだけ行間がやたら広くなるのがおなじみですが,日本支部のルビ風CSSでは行間を維持するためにルビが振られている部分が少し下がって表示されます。この配慮には頭が下がりますが,やはり気になります。
CSSの疑似要素機能を使って行間を維持したままルビ風文字を表示させます。とはいえそのままだと行間が変わらない以上上の文に重なりかねないので,行間自体も少し広げてあります (通常は0.41文字分,このCSSを適用すると0.75文字分。もうすこし余裕をもたせてもいいかも?)。
投稿の際は誤字・脱字・[[span data-ruby="えんじ"]]衍字[[/span]]にご注意ください。
投稿の際は誤字・脱字・衍字にご注意ください。
どうでしょうか?
ちなみに,サイズ0の隠し文字を利用して以下のようにすると,人間にも機械にも優しくなります。
投稿の際は誤字・脱字・[[span data-ruby="えんじ"]]衍字[[size 0%]](えんじ)[[/size]][[/span]]にご注意ください。
投稿の際は誤字・脱字・衍字(えんじ)にご注意ください。
こちらは見た目は変わりませんがコピペするとよみがながついてきます。検索エンジンなどでヒットしたときにも表示されるはずです。
偽リンク
追加するべきCSS
.fakelink {
color: #b01;
cursor: pointer;
}
.fakelink:hover {
text-decoration: underline;
}
説明と使い方
リンクのようで実際にはどこにもつながっていない,またはなにも起こらないものが必要になったとします。通常こういった要素では,いわゆる “空リンク” が使われるでしょう。下のように書きます。
すると,空リンクのようになります。
これで問題は解決されるでしょうか。実のところ,これでいいのかもしれません。ですが私はあえて別の方法を提示します。偽リンクを作成するには以下のように記述します。
[[span class="fakelink"]]偽リンク[[/span]]
すると,偽リンクのようになります。
違いが分かるでしょうか?あまりわからないかもしれませんね。あなたがこのページをPCで閲覧しているのであれば,左下にリンク先が表示される部分があるはずです。空リンクではここに “javascript:;” と表示されているはずです。これは “このリンクをクリックするとなんらかのアクションを起こしますよ” ということを暗に示しています (JavaScriptはウェブページに動きをつける技術です)。空リンクは実際にはなにも起こりませんが,いわば “なにもしない” が起こっているのです。対して偽リンクではなにも表示されません。これは偽リンクが “ほんとうの意味でリンクではない” ことを示しています。人間の目でリンクのように見えているだけで,実際にはただの色がついた文字列なのです。
この違いはどんな意味があるでしょう。もちろん意味はありますが,それを説明して納得してもらうのは難しいところです。ですから,このCSSは私の自己満足と思っていただいて結構です。あえて説明するとすると,“ウェブページは人間だけではなく機械が読むものでもある,だからリンクでないものをリンクとして表現することが必ずしもよいこととは限らない” といったところでしょうか。関連した読み物として,こちら (外部リンク) をおすすめしておきます。