【CSS】とにかく読みにくいページをつくってみた！pointer-events でイベントを制御する

こんにちは、R&D 部の青野です。 「読者視点で見やすくて読みやすいページを作りましょう」とよく言われてますが、たまには見づらくて読みにくいページがあってもいいんじゃないか。 ということで、読みにくいページを作りました。 と言っても、デザイン、ページ構成的にというわけではなく、ただ暗いだけのページです。 仕組みとしては暗く描画した canvas タグをページの上に重ねているだけとなっております。 また、このページはモバイルとPCでは見え方が少し違いますので、モバイルで見ている方はPCでも見てみてください。 （さすがに暗いままだと記事が読みにくいので、ページを明るくするボタンを付けました。ご利用ください。） ON OFF 通常 canvas 要素や img 要素などが上に重なっている場合、その下にある要素は選択できなくなります。しかしこのページではまっ暗な状態でも上にある[ON][OFF]の

[ornith]

ページを開いた瞬間、「ひでんマシン05」の必要性を強く感じた。

[nobu1989]

可能性を感じた。カクヨムやピクシブなどでクリエイターが使えると面白い

[nunune]

意地で明るくしないで読みきってやったぜ。ざまーみろ！

[yoiIT]

この状態で驚かせ系のホラー画像仕込んだらビビりそう

[miragestlike]

レミーラ！

[Fushihara]

あえて読みにくいページを作ることで読みやすさとは何かを考えてるんだなと思ったら全然違った

[imaginaration]

似たサイト見たなあ、と思ったらこれだ http://xxxxxxxx-xxxxxxxx.com/

[pccs15]

OFFになるとき一瞬真っ暗になるところにこだわりを感じた

[iseebi]

読みにくいって意味が想定外の方向だった

[ifttt]

これで怖い画像出てきたらマジでちびる

[k7ms]

ドラクエの洞窟感

[junk-boy]

下層レイヤーのリンクやボタンをクリックできるpointer-events要素

[aceraceae]

これは知らなかった

[nettabo]

読みにくくてキレそう。

[kamiaki]

“最初は見づらくて読みにくいページを作るという記事だったはずが、ほとんど「pointer-events」の紹介記事になってしまいました。” ネタ記事かと思いきや有用ぽい…！

[shinagaki]

"F" ボタンでオンオフ切り替えられるようにしよう

[from_kyushu]

firefoxだとボタン押せない気が...。俺の操作が悪いだけ？ | Chromiumでも押せねぇ...。

[mysticatea]

押せないボタンは Tab + Enter で。

[richard_raw]

暗い！/カーソルが視線追従ならあんまり気にならないかも、と思考実験。

[nakoton]

PC版プニルはh264再生できなくてVivaldiに乗り換えたけど多段タブはやっぱり便利だから早くライセンス料払って

[kiku72]

ゼロ年代によくあった。やたらフォントの小さいサイトとか思い出す

[limithand]

びっくりした（こなみ

[uoz]

真ん中がちょっとでて見える

[hyujico]

レヌール城　たいまつ　ビアンカ

[kitaj]

pointer-events知らんかった

[JULY]

NoScript を使っているから、最初、何のことかわからなかった。

[meramitan]

たいまつかわなきゃ

[njgj]

おもしろー

[bc_rikko]

“pointer-events でイベントを制御する”

[qinmu]

「pointer-events:none;」

[tanaboo]

読みにくいけど読みたくなる。

[primedesignworks]

古き良き RPG ダンジョン

[kootaaboo]

すげ

[guchiyan]

こんなことやってる暇あったら放置してるSleipnirの開発して。もしくは開発停止宣言して

[ba-shi]

ドラクエの松明みたいだ。

[hiroti3]

有能！

[Falky]

ところで、内訳警察です。内訳は「ないやく」ではなく、「うちわけ」と読みます。以後ご承知おきください。

[bocuno]

こういう奇をてらったページブームが定期的に現れるけど、恥ずかしいから辞めたほうがいいよ。（読んでない

[strawberryhunter]

JavaScript無効化は情報リテラシー。