<div class="_100x100"></div> <div class="_200x100"></div> <div class="_100x200"></div> <div class="_100x100r"></div> <div class="_200x100r"></div> <div class="_100x200r"></div>
div { border:1px black solid; } ._100x100 { width:100px; height:100px; background-image: linear-gradient(0.7854rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent); } ._200x100 { width:100px; height:200px; background-image: linear-gradient(1.1071rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent); } ._100x200 { width:200px; height:100px; background-image: linear-gradient(0.4636rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent); } ._100x100r { width:100px; height:100px; background-image: linear-gradient(-0.7854rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent); } ._200x100r { width:100px; height:200px; background-image: linear-gradient(-1.1071rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent); } ._100x200r { width:200px; height:100px; background-image: linear-gradient(-0.4636rad, transparent 49%, #000000 49%, #000000 51%, transparent 51%, transparent); }
CSS の linear-gradient
(MDN の解説)で表現している。linear-gradient
は以下のように分解して読む。
0.7854rad | 次からの処理を 0.7854rad (= 45°) 傾けて実施する。 詳しくは MDN の angle 解説記事 |
transparent 49% | 上から49%のところまで背景を透明とする (= 上から 0%~49% のところの背景を透明にする) |
#000000 49% | 上から49% のところから背景を #000000 (= 黒) とする |
#000000 51% | 上から51% のところまで背景を #000000 (= 黒) とする |
transparent 51% | 上から51%のところから背景を透明とする |
transparent | 最後は背景を透明とする (= 上から 51%~100% のところの背景が透明になる) |
実のところ線を引いているのではなく、背景をそれっぽくしているだけである。
角度は他の方法でも指定可能だが、今回は最も簡単に計算できるラジアンで計算した。計算方法には Math.atan
関数を使う。例えば、縦200px 横100px の長方形の左上から右下にかけて線を引きたい場合は 45° よりさらに深くグラデーションを傾け、グラデーションの向きが射線と垂直となる必要がある。この時の角度は、Math.atan(200/100)
で得られる値となる。サイン、コサイン、タンジェントのタンジェント、これの逆関数 (アークタンジェント) を使う。
以下のように用意した画像を、新規で画像をデプロイすることなく一部分のみ切り出したい。
以下の結果が得らえれることが期待される。
単純に画像全体を小さく表示して並べたときに把握するのを簡単にするものを画像のサムネイルと呼ぶが、ここではそれではなく 画像のごく一部を切り取って表示したもの を指す。
Web 古代社会には絵を個人が公開するために便利な Twitter や Pixiv 等といったサービスはなかった。ブログなどが登場する前は個人がウェブサイトを作成し、そこで公開されていたのである。そういった場で画像の一部のみを切り出し、それをリストとして表示して「見たい絵をクリックしてね」とする公開方法が流行った。
サムネイル画像は大体が本体の画像と別に用意されていた。だが、このために画像を切り出してその画像をデプロイするのは面倒だ。
TRPG のセッションログを公開する際に発言者の名前欄の下にキャラクター画像の顔だけ表示したい。全身絵は提供されており、切り抜き加工については許可されている。しかし、顔画像だけ切り出すのが面倒だと思った。
以下のような HTML を用意し、画像を picture クラスを持つ要素に表示させる。そのうえで、表示範囲を pictureFrame の範囲のみに絞る。
<div class="pictureFrame"> <div class="picture"></div> </div>
.pictureFrame { /* overflow: hidden にすることで画像のうち この範囲をはみ出している部分は非表示とする */ overflow: hidden; /* .picture クラスの表示位置の機転を .picutureFrame とすることで 位置操作を容易にする */ position: relative; /* お好みで。画像を表示する範囲。 この場合は 30px × 30px の正方形となる。 ボーダーはいらなければ設定しなくてよい */ height: 30px; width: 30px; border: 3px double black; } .picture { /* picture の表示位置の基準点を .pictureFrame の左上とする */ position: absolute; /* 画像の表示を .picture に収まる最大サイズかつ縦横比を維持した状態とする */ background-size: contain;" /* !!! 画像ごとに指定が必要 !!! 画像を上に 55px 左に 85px ズラし、 画像の顔部分が表示されるように調整した */ top: -55px; left: -85px; /* !!! 画像ごとに指定が必要 !!! 画像の縮尺を本来の 720 × 1280 から以下のサイズに縮尺する */ width: 180px; height: 320px; /* !!! 画像ごとに指定が必要 !!! 画像の URL */ background-image: url('http://shunshun94.web.fc2.com/replies/pics/enjoySw2_majin-adely_1.png'); }
別に画像は div を使わなくても img 要素でもよい気がする。ただ、用途が TRPG のログのためだった。なので
以上の関係でこっちの方が容易だった。
また、pictureFrame クラスに border-radius
を設定したりすれば丸く切り取れたりする。
https://shunshun94.github.io/shared/sample/discordLogPicker.html で取得したログの扱い方の話。
これで取得したログを編集するときの色々を書いていく。
ダウンロードしてきたファイルは以下のような内容がたくさん並んだものである。
<p class="tab0 _302451274706583553" id="msgId_560307394102427653"> <span class="time"><span class="unixTime">1553658092762</span> <span class="readbleTime redableTime">12:41:32</span></span> <span class="name">ひよこ</span> <span class="message">よろしくお願いします。<br/> 落ち着いたらごりっといれます。</span> </p>
各行の説明をしていく。
<br/>
と記入することで改行できる。これを入れずに改行しても表示上は改行されないので注意。ここを編集することで発言内容を編集できる。誤字とかを直すときはこここの tab0
。これを tab1
にすると背景が黄色に、文字が小さくなりコメントっぽくなる。なお背景が黄色なのは身内には不評なのでどこかで変わるかもしれない。
<p class="tab0 _302451274706583553" id="msgId_560307394102427653"> <span class="time"><span class="unixTime">1553658092762</span> <span class="readbleTime redableTime">12:41:32</span></span> <span class="name">ひよこ</span> <span class="message">よろしくお願いします。<br/> 落ち着いたらごりっといれます。</span> </p>
tab0
の直後にあるこの数字の羅列。以下の例だと _302451274706583553。これは各発言の発言者ごとに付与される class となる。CSS を用いてこの class のフォントカラーを設定すればその人の発言すべてのフォントカラーが変わる。ログ取得の際に自動彩色するようにしていた場合は無効なので注意。
<p class="tab0 _302451274706583553" id="msgId_560307394102427653"> <span class="time"><span class="unixTime">1553658092762</span> <span class="readbleTime redableTime">12:41:32</span></span> <span class="name">ひよこ</span> <span class="message">よろしくお願いします。<br/> 落ち着いたらごりっといれます。</span> </p>
基本的な HTML の知識となるが、以下のようにすると見出しを出せる。
<h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <h4>もっと小見出し</h4> <h5>さらに小見出し</h5> <h6>すごく小見出し</h6>
(雛´-`).。oO(#SW2 / #SW25 の GM 向け支援ツールを更新しました。
— しゅんしゅんひよこ (@Shunshun94) February 16, 2019
BGM 再生機能から試聴が可能になりました。「あれ、これなんだっけ」とかそういうときにご利用いただければ)https://t.co/LfwtxvW88O
なんでこの機能いままでつけてなかったんだろう。以下のようにするだけでさっと付けられた。
<audio controls src="https://www.dropbox.com/s/ozdbu91awrwzmoz/rest01.mp3?dl=1"> <p>ブラウザが対応していません</p> </audio>
※ BGM は魔王魂から頂いています
曲の切り替えは audio 要素の src を再設定するだけで可能。楽ちん。
なお、audio 要素内には source 要素を含め、複数の形式に対応するのが望ましいとされているが、今回はユーザがあらかじめ用意したデータの試聴であるため、不要と考えて入れていない。
そういえば、前にひよんとふから BGM 再生を検知したら自動で再生するようにしたい、と考えて色々試した末「スマートフォンからは無理だね」となって泣く泣く諦めたのを思い出した。懐かしいなぁ、ひよんとふ。
13~7から数字を選択させる際に 10 を初期値としたいが、降順で数字を並べたい。以下のようにすると初期値は13となる。
<select class="value"> <option value="@13">13</option> <option value="@12">12</option> <option value="@11">11</option> <option value="@10">10</option> <option value="@9">9</option> <option value="@8">8</option> <option value="@7">7</option> </select>
初期値にしたい option 要素に selected
を入れておくと初期値となってくれる。
<select class="value"> <option value="@13">13</option> <option value="@12">12</option> <option value="@11">11</option> <option selected value="@10">10</option> <option value="@9">9</option> <option value="@8">8</option> <option value="@7">7</option> </select>