最近、久しぶりにゆっくりセッションする機会があったので、ログを共有する用の CSS / JS を書いた。こんな感じで表示される。
使い方は以下。
既存の整形ツールをいくつか当たってみたが、どうにもしっくりこなかったので CSS / JS は作った。
この整形ステップをなんかツールでさっとやりたいのだが、いい感じの手段がない。整形ツールを自前で作るのも聊か考え物だしなぁ。すでにありそうなものだが。
SWEET の機能追加のために必要になったので調べた。
property の Value を inherit にすれば親要素の色を用いることができる。デフォルト値。
いくつか色の名前が定められており、これらを指定することで簡単に色を指定できる。red や skyblue など。一覧:https://www.w3.org/TR/css-color-3/#svg-color
これもよくある手段。赤の強さ、緑の強さ、青の強さを 16 進数 (00~FF) で指定する。#FFFFFF だと白になる。
3. より単純な方法。赤の強さ、緑の強さ、青の強さを 16 進数 (0~F) で指定する。#FFF だと白になる。
3. に似たような方法。 rgb(赤の強さ, 緑の強さ, 青の強さ) を10進数 (0~255) で指定する。rgb(255, 255, 255) だと白になる。
5. に似たような方法。 rgb(赤の強さ, 緑の強さ, 青の強さ) を割合 (0%~100%) で指定する。0%なら0だし、100%なら255。rgb(100%, 100%, 100%) だと白になる。
CSS3 で追加された指定方法。 hsl(色相, 彩度, 輝度) を指定する。彩度は灰色 (0%) ~ 純色 (100%) を表現し、輝度は 黒 (0%) ~ 純色 (50%) ~ 白 (100%) を表現する。色相が純色がどんな色なのかを色相環の角度で表現する。配色を考えるのが面倒ならhsl()を使おう - Qiita の解説や図が分かりやすい。hsl(90, 100%, 50%) だと yellow になる。
rgba(赤, 緑, 青, 透明度) というように上述 5, 6 の記法に追記することで透明度を加えることができる。0だと完全に透明。1だと完全に不透明。数字が大きい方が不透明になるので不透明度、という方が正しい気がする。
hsla(色相, 彩度, 輝度, 透明度) というように上述 7 の記法に追記することでも透明度を加えることができる。
Tantek Çelik, Chris Lilley and L. David Baron. CSS Color Module Level 3. 7 June 2011. W3C Recommendation. URL: https://www.w3.org/TR/css-color-3/
印刷用の CSS プロパティ、色々とある。しかし、ブラウザが対応していないケースが少なくなく、割とうまくいかない。
個人的には Word (Writer) は使いづらく、HTML で書くようにしたいのだが、印刷向けの成型ができないのではちょっと難しい。個人的にはページ末尾に脚注とかを付けたいのだが。
素直に TeX を使え、ということなのだろうか……TeX よりは HTML の方が敷居が低いと思っている身としてはちょっと悔しい所である。大学・大学院の卒業論文は TeX で書いたのでやればいい話ではあるのだが。
以下のようなもの。
<div style=" position: relative; text-align: center; border-bottom: 3px solid black; background-color: gray; width: 300px; "> <span style=" position: relative; display: inline-block; border-bottom: 3px solid black; border-bottom-left-radius: 23px; border-bottom-right-radius: 23px; height: 46px; width: 46px; top: 23px; font-size: 240%; background-color: gray; color: white; ">▼</span> </div>