HTML/CSS

[PR]

×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ゲーミング文字列する CSS を書いた

こちら。HTML を書くのが少し面倒なのでそこだけ JS で書かせているが、一応 CSS だけで動く。

PR

CSS のみで文字を動かしてホラー感を出してみた

だいぶ気持ち悪い演出を作れた。こちら

書いた html と css は以下

/** CSS **/
span .char {
	--delay: calc((var(--char-index) + 1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

@keyframes breathe {
	0% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
		font-size: 100%;
	}
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
		font-size: 120%;
	}
	
	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
		font-size: 100%;
	}
}

/** html **/
<span class="char">こ</span><span class="char" style="-char-index:0;">の</span><span class="char" style="-char-index:1;">文</span><span class="char" style="-char-index:2;">を</span><span class="char" style="-char-index:3;">読</span><span class="char" style="-char-index:4;">み</span><span class="char" style="-char-index:5;">上</span><span class="char" style="-char-index:6;">げ</span><span class="char" style="-char-index:7;">た</span><span class="char" style="-char-index:8;">者</span><span class="char" style="-char-index:9;">に</span><span class="char" style="-char-index:10;">死</span><span class="char" style="-char-index:11;">を</span>

ちびキャラが会話しているっぽく画像を並べる

ちびキャラに会話させる必要が会社で発生したのでやり方をメモメモ。

ちゅんちゅんとなくよ
ちゅんちゅん。

めぇめぇとなくよ。
めぇめぇ。

<div style="display: flex; border:1px solid black; border-radius:4px; width:200px;">
<p>ちゅんちゅんとなくよ<br/>ちゅんちゅん。</p>
<img src="https://blog.cnobi.jp/v1/blog/user/dae47eb5ba97f522fac369dd34ed4c62/1624551500" style="width: 50px; height: 50px;" alt="" />
</div>

<div style="display: flex; border:1px solid black; border-radius:4px; width:200px; margin-top:4px;">
<img src="https://blog.cnobi.jp/v1/blog/user/dae47eb5ba97f522fac369dd34ed4c62/1624551500" style="width: 50px; height: 50px;" alt="" />
<p>めぇめぇとなくよ。<br/>めぇめぇ。</p>
</div>

textarea のサイズ変更をできなくする

忘れがちなのでメモっておく
/* これでやれる */ resize:none;/* デフォルト値はだいたいこれ。サイズ変更できる */ resize:both;
任意の方向について設定することもできるよう。textarea 以外にも使えるみたいなので試してみたら面白いかもしれない。

resize - CSS: カスケーディングスタイルシート | MDN
HTML を編集できなくするアイディア
HTML で情報を共有したいが、情報を共有した先で HTML を改竄されたくない。要件としては改竄された HTML を印刷されたくない。

この場合の HTML の改竄手順として以下を恐れる必要があるように感じている。
- 共有された HTML ファイルをエディタで直接編集される
- HTML ファイルをブラウザで開いたのち開発者ツールで編集される
エディタでの編集への対処

HTML を暗号化しておき、ブラウザで開いた際に JavaScript で復号化する。この際は JS に復号化キーを記載する必要があるため非対称暗号化で暗号化しておくとよさそう。

開発者ツールでの編集への対処

あるべき HTML の内容のハッシュ値をどこかに持たせておき、HTML を開いたのち、JS で定期的にハッシュ値と合致するか照合させる。合わないようであれば HTML の内容を全て消し飛ばすなり改竄されている旨をでかでかと表示するなりすればよい。

いや、素直に PDF とか使えばいい気がするんだけど。