@media only screen and (max-width: 1100px) { .note:before { content: '1100px 以下の時だけ表示される文字列'; } }
あまり使う機会無いんだけど TRPG のセッションログとかを出すときにちょこちょこ使いそうなのでメモがてら
身内から「リンク先が PDF ファイルの場合にクリックしたらダウンロードされる場合とブラウザで開かれる場合があるんだけど、どういう違いで発生するの?」と問われた。これは a 要素に download 属性を指定することで容易に実現できる。リンク先が PDF でなくても使えるので html をダウンロードさせたりするのにも利用可能。
<p><a href="http://sheeprogramming.iku4.com/Entry/474/" download="lastArticle.html">前回の記事(ダウンロード用)</a></p> <p><a href="http://sheeprogramming.iku4.com/Entry/474/">前回の記事</a></p>
以下が結果となる。
StatiCrypt(https://robinmoisson.github.io/staticrypt/) というのがある。HTML を暗号化し、復号化キーを打ち込まなければ読めないようにしてくれる。HTML のソース中に暗号化された情報は保存されるが、これを解読するのは普通にはまず困難である。
限られた人に見せたいが誰にでも見られると困るような情報を載せたりするのに使える。HTMl は読めなくなっているので検索にも一般にはひっかからないだろう(リンクをたどることでもしかしたら引っかかるようになるかもしれない)。また、辿り着いたとしても意図しない人にそれを読まれることはほとんどない。
会員制のウェブコンテンツを用意したい場合に便利かもしれない。
ただ、パスワードを安全に渡せるなれば、復号化済のデータをパスワードを渡すのと同じ方法で渡せばいいので用途は随分限られそうではある……
<div style="position: relative; height: 200px; width: 200px; background-color: white; border: 3px double black; border-radius: 100px;"> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(0,60%, 50%) solid; transform-origin: left top;"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(45,60%, 50%) solid; transform-origin: left top; transform: rotate(45deg);"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(90,60%, 50%) solid; transform-origin: left top; transform: rotate(90deg);"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(135,60%, 50%) solid; transform-origin: left top; transform: rotate(135deg);"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(180,60%, 50%) solid; transform-origin: left top; transform: rotate(180deg);"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(225,60%, 50%) solid; transform-origin: left top; transform: rotate(225deg);"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(270,60%, 50%) solid; transform-origin: left top; transform: rotate(270deg);"></div> <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(315,60%, 50%) solid; transform-origin: left top; transform: rotate(315deg);"></div> </div>
線は border-top:1px black solid;
等として描く。width
を使って長さをコントロールしている。別に hr
でやってもいいのかもしれない。
CSS の transform
の値に rotate を使えば要素を回転させられるので、これで線の向きをコントロールしている。ただし、回転の際に基準となる点はそのままだと要素の中央なので、これを transform-origin: left top;
で左上にしている。
だいぶ邪道な気がするが、こんなやり方もできたよ、という例。また、点A から 点B という指定もできず、「点A からどの方向に長さいくつの」という指定しかできないのも難点。計算が必要となる。
この手の事やりかたかったら canvas や svg 使った方が楽。
実は以下のこれ、画像として表示しているわけではなく SVG を使って表示している。
先日からステラナイツ向けの支援ツールを作ろうとしているが、戦闘時に使うマップが独特であり、円形のガーデンと呼ばれる場所で戦う。このガーデンは6つに分かれている。PC は1~6のいずれかの場所にいる。
円形のマップというのは HTML/CSS だけでは少々表現しがたく、 Canvas を使うことを検討したが「そういえば大学で学んで以来使ってなかったな」と思い SVG を使ってみた。SVG には Vue で直接イベントをバインドしたりできるのでもしかしたら Canvas より楽かもしれない。加えて、CSS で見た目を変えることも可能だ。