CSS の書き方を custom property や calc を使って大幅に書き換え中
Property の中に意図を残したまま幾つかのコメント文を削除する事が出来たが、custom property や calc を多段で使うと計算結果の値が分かりにくくなってむしろコメント文に計算結果を書きたくなったり、単位 (em など) の有無の把握がしにくくなり単位付きのまま乗除を行って無効な値にしてしまうなどした
宣言する selector などを含めてルールを作らないとメンテナンス性が寧ろ損なわれるのでそういう所も含めて習熟する必要がある
CSS の書き換えをする中でこの weblog の section 要素直下の pre 要素に行番号が付いていないことに気が付いた
原因を端的に述べる、この weblog の各段落の行番号は現在 section 要素直下の各要素に対して ::before を用いて疑似要素を生成し position: absolute; と負の値の left を使って段落より前 (左) に番号を表示しているのだが、pre 要素に overflow: scroll; が設定されていたため親要素となる pre 要素の描画範囲外に出てしまった疑似要素は表示対象外となっていた
原因が分れば話は早いが複数個所に分散して書かれた property の組み合わせなので気づくまで結構時間がかかった
最近のゲームは引き続き FFXIV、そして Baba Is You
FF XIV は patch 5.35 で追加されたセイブ・ザ・クイーン第 2 章、南方ボズヤ戦線を堪能中
Baba Is You は以前から知っていたが Tokyo Game Show 2020 Online の the Game Designer's Award 受賞を機に Nintendo Switch 版を download してやってみることに
この感覚はプログラミングで変数への代入を間違えて面白可笑しい挙動になってしまった時に近い
それがゲームとして見事に落とし込んであり、独創性がテーマのデザイナー大賞受賞も納得の出来
ちなみに真・女神転生III も Nintendo Switch 版を download 購入したが現時点では未だプレイしてない (PS2 版を持っている所が大きいが)
1 週間ほど掛けて CSS を全面的に書き換えた
書き換えの内容は以下の 2 点
- Property 単位の記述から、適用先の要素の HTML の構造単位での記述への変更
- Custom Property と
calc()を極力使用する
Property 単位の記述から、適用先の要素の HTML の構造単位での記述への変更
については、例えば今まで margin と padding、color と background-color など関連する property を纏め、その上で全ての要素の指定をその property 単位で一か所に書いていた
これに対して書き換え後は 4.3 Sections - HTML Standard、4.4 Grouping content - HTML Standard などの単位を基本として纏めた
実際には main 要素は Grouping content ではなく Sections と纏めて書いたなどの違いがあるが、基本方針としては文書の構造単位で書くように変更した
これは特に CSS で grid property を多用するようになったことが大きいと思っている
Custom Property と
については単に CSS の記述からマジックナンバーを消したかったという点が大きいcalc() を極力使用する
ただし、calc() は今の所四則演算しか出来ないため、指数計算がしたいところはコメント文に式を書いた状態で一部にマジックナンバーがまだ残っている
.NET 5.0 が release されたので install
今までは .NET Core 3.0 だったのでとりあえず dotnet --info を実行したころ https://aka.ms/dotnet-download の文字があったので Download .NET Core (Linux, macOS, and Windows) へ移動して install
Install してから再び dotnet --info を実行して Version: 5.0.100 になっているのを確認
Install しただけなのでそれ以上は後日
東京都 新型コロナウイルス陽性患者発表詳細 - データセット - 東京都オープンデータカタログサイト
久しぶりに SARS-CoV-2 陽性患者確認数の折れ線グラフ
100 人から 200 人程度で推移していた状況が破れつつあり、恐らく第 3 波が今まさに発生した状況
とは言えそもそも 4 月の第 1 波の最大値すら超えた状態で推移しているので個人レベルの警戒は第 3 波とか何とか関係なく継続しているが
Go Toトラベル利用の新型コロナ感染者131人に (9日まで) | 新型コロナ 国内感染者数 | NHKニュース
加藤官房長官は、観光需要の喚起策「Go To トラベル」を利用した人は、ことし 7 月の開始から先月 15 日までに少なくとも、延べ 3138 万人に上ることを明らかにしました。
一方で、利用者のうち、新型コロナウイルスの感染が確認されたのは、9 日までで 131 人になると説明しました。
一方でクラスター感染の発生や受け入れ態勢の整っていない地方への拡散を懸念していた Go To トラベルは殆ど感染者を出さずに経済を回せている
私は の weblog で否定していたが、観光業界、旅行者とも最大に注意して経済を回してくださっており感謝
昨日の .NET 5.0 に続き PowerShell 7.1.0 も release されたので install
何が変わったか把握していないが自作 module は今の所問題なく動いているのでそのまま使用
ごろ風邪を引き、1 か月間咳が出ている
自分は風邪を引くと咳癖がついて 1 か月以上咳が出続ける体質なのだが今年は COVID-19 があるので周りには心配をかけて申し訳ない
で、風邪を引いた時は栄養のあるものを沢山食べて体を休めるのだがそのまま食べ癖がついて最近 70kg を超えてしまったので再び減量
とりあえずから夕飯と喉飴以外は水か麦茶のみにして過ごしている
あとついでに caffein も抜いている
始めて 5 日で 68.9kg 位まで下げられたので体が順応する前に下げられるだけ下げてしまいたいと思っている
メインマシンの Windows 10 の Update を実施したら 20H2 の更新が掛かったので実行
直前まで 1909 だったので 2004 はスキップした形になったが結果上手く動いているので問題あるまい
なお、今までは西暦の下 2 桁と release 月 2 桁の 4 桁の数字だった version 番号は、西暦の下 2 桁と H1, H2 と言う表記になる模様
2004 適用以降のメジャーアップデートは高速になるとのことで直前まで 1909 だった自分のマシンはいつも通りに Update に時間が掛かったが今後早くなると言う事なら楽しみ
あと WSL2 が入った筈なので、とりあえず現状 WSL と併せて状況を整理して環境を整えたい
Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs
と言いつつ Linux を使う理由がないので結局使わず仕舞になりそうだが
体重は 69.25kg、昨晩食べすぎたので想定内の体重
喉飴を舐め続けていてほぼ 1 日中カロリイを摂取し続けている状態なのでそれも併せて致し方なし
喉飴はシュガーレスを選んでいるがゼロカロリイではないし、甘味もある
Caffein 断ちはできているので併せて今月いっぱい摂取カロリイの制限と caffein 断ちをして体の調子を戻したい
あと、最近自宅ではうがいをよくするように心がけている
うがい薬などは使わず水道水を使っているが、水道水は人体には無害な程度の塩素が予め添加されているのでこれでいいだろうと
JINS で眼鏡を 2 本購入した
PC 用と映画館用
基本的に秘匿する理由がない情報はネットに公開しておいた方が便利と思っているのだが、果たして眼鏡用のカルテを秘匿する理由はあるだろうか
世の中には氏名、生年月日、クレジットカードの下 4 桁で個人認証する奴が存在するので侮れない
あと、世の中に眼鏡のカルテを隠したい人が居るかどうか、と言うのも大事か
私は多数派だと宣言することが結果として少数派の差別に繋がったり追い詰めたりする可能性があるのと同じで私が困る理由が思いつかないからと言って公開して問題ないと一概に言えないので少し慎重に考える
夕飯以外の食事や間食、カロリイのある飲み物の摂取を辞めて 1 週間
喉飴は舐めているので夕飯以外の摂取カロリイをゼロにはしていないが今の所調子は良い
また、夕飯を少なめにしても平気になってきた
今は体が軽くなったような良い感覚が支配しているが、更に数週間続けると猛烈な空腹感に襲われるようになり、ここをうまく乗り切らないと食べ癖が付き逆に体重を増やしたりするのでそろそろ気を付ける時期
いままでは運動をせず摂取カロリイを減らす減量を中心に行ってきたが折角リングフィットアドベンチャーとか買ったし運動を取り入れるのもいいかもしれない
体重が 69kg 台で落ち着いてきた
時節柄もあり日中喉飴を舐め続けているので仕方ないがもう少し落としたい
劇場版 PSYCHO-PASS 3 FIRST INSPECTOR が Amazon Prime で視聴可能なのに気が付いて見ようと思ったがPSYCHO-PASS 3の内容を覚えていなかったので PSYCHO-PASS 3 から見直し
久しぶりに Android の Play Music を起動したら Google Play Music はサーヴィス終了したから Youtube Music に移行してくれと
そういえばそんな話も聞いたな、位の感覚で Youtube Music に移行したら、以前購入していた音楽は聞けたのだがうっかり気づかず通信容量の少ない契約をしている SIM カードを使っている Android で streaming 状態で聞いてしまった
慌てて streaming を辞め download しようとしたら download は Wi-Fi へ接続してからだと
だったら Streaming でも聞かせるなよと
大量の曲を移行して一気に download する利用者向けの配慮なんだろうけれど
今まで Markdown file には head 要素相当の情報は掛けないと思っていたが markdown file には HTML tag を直接書くこともできると気が付いた
Markdown から HTML file への変換は実装依存の部分が大きいので今回は .NET 5.1 環境下の PowerShell 7.1 で試したところ Nu Html Checker でエラーもワーニングも出ない HTML file が変換結果として得られた
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8' />
<title>Markdown to HTML Test.</title>
</head>
<body>
# Markdown to HTML Test
`DOCTYPE` や `html`、`head` tag を書いた Markdown file のテスト。
</body>
</html>PS > (ConvertFrom-Markdown -Path "test.md").html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8' />
<title>Markdown to HTML Test.</title>
</head>
<body>
<h1 id='markdown-to-html-test'>Markdown to HTML Test</h1>
<p><code>DOCTYPE</code> や <code>html</code>、<code>head</code> tag を書いた Markdown file のテスト。</p>
</body>
</html>これだと Markdown のシンプルさが失われてしまうので省略可能な tag を削ってみるとこんな感じか
<!DOCTYPE html>
<html lang='ja'>
<meta charset='utf-8' />
<title>Markdown to HTML Test.</title>
# Markdown to HTML Test
`DOCTYPE` や `html`、`head` tag を書いた Markdown file のテスト。自分自身がこんな Markdown file を書くかは別として、任意の Markdown file を ConvertFrom-Markdown で HTML に変換すると DOCTYPE などが書かれた結果が戻される可能性は留意した方が良さそう
PSYCHO-PASS 3 と劇場版 PSYCHO-PASS 3 FIRST INSPECTOR 3部作を見終わった、面白かった
PSYCHO-PASS は結果として無印、2、3 で世界や登場人物は共有しているがそれなりに毛色が違うオムニバスのような作品になったなあ、と言うのが感想
最近 CSS を書いていて得た知見
- 基本的に実装は気にしない、自分が愛用している環境で読みにくくなった時だけ bug や未実装対応
- 値は基本的に Custom Properties を使う
- Custom Properties の名前には 用途 を使う、例えば
--sectioning-margin-topなど - 例外的に
auto、inherit、currentColor、transparent、none、0、100%そしてfont-sizeに限り1emと1remは使ってよい、margin: 1emは駄目 displayproperty の値 (block、inlineなど) は例外と認めるべきか考慮中- 他の値から算出された値は Mathematical Expressions: ‘
calc()’ を使う 0.33や0.125などはcalc(1/3)、calc(1/8)などと書くとより意図が明確になる場合がある1.4142などはcalcで計算できないので custom Properties を使って--sqrt-twoなどとすると良い、この時--sqrt-twoは本来calcでやりたかった内容なので custom Properties が多段になって--sqrt-two: 1.4142; --h2-font-size: var(--sqrt-two); h2 {font-size: var(--h2-font-size);}のような迂遠な書き方にもなりえる- ある selector 限定の値はその selector の中に書く、例えば
mark要素でのみyellowを使うならmark要素の selector 内に書く - 複数の selector で使う場合、分かりやすく使わる範囲を限定して書けるなら書く、例えば table 要素内のみで使う custom vaule は table 要素の selector に書く
- 全体で使う custom properties は
:rootに書く - HTML の場合、構造単位で selector を纏めて書く、ここで言う構造とは Sections、Grouping content などを指す
- 全く同じ style を適用する と言う意図でのみ selector を comma で区切って列挙する、例えば
h1, h2, h3, h4, h5, h6 {......}と言う記述は多くの場合正当 - それ以外の場合、たまたま同じ style を適用する場合は comma の仕様を避ける
- 複数の selector で同一の意図の値を property に設定することは custom properties で実現可能である
とりあえずこんな感じ
1日1食生活をはじめてから12日断つが、口寂しい気持ちが強く何か食べたくなる
空腹でもなく、疲労でもなく、口寂しさで何かが食べたい
この口寂しさをこの感覚は痩せている感覚だ、嬉しい感覚だとして過ごしているがどうなりますことやら
から夕食以外でカロリイ摂取をする事、夕食を含めて caffein 摂取をする事を辞めた
会社では水か麦茶をペットボトルで、自宅ではパックで作ってもらった麦茶をマグカップで飲んでいる
会社では朝 2l 100 円の大型のペットボトルを買っている天然水の類は 500ml でも 1l でも 2l でも結局 100 円程度で買えるのでその時飲み切れる量を買ってラッパ飲み
自宅ではマグカップで飲んでいるが、コーヒーには良いものの麦茶をがぶ飲みするには小さく机と冷蔵庫の往復回数が多い
と言う訳で自宅用に魔法瓶機能のあるジョッキを買った
飲み物は常温で飲むが好きなので飲み物の保温はない方が嬉しいくらいなのだがコップ自体が熱くなったり冷たくなったりしないのが嬉しい
カロリイ摂取制限については相変わらず咳が出ていて喉飴を舐めているためか完全ではなく、苦しくもない一方で体重もあまり減っていない
Caffein 摂取制限はカロリイ摂取制限の ついで に始めたので、そもそも激しい中毒症状は出ておらず、離脱症状も出ていない
短期間に体重が減った場合、主な原因は食事生活で体から水分が抜けただけのことが多いので増加に転じない限りとりあえず様子見
にマウンテンクライマーで腰をやられ
てから止めていたリングフィットアドベンチャーをそろそろ再開しようかと考えている
インフルエンザの予防接種受けた
注文していた近用眼鏡を受け取った
手元が良く見える
SARS-CoV-2 が流行り始めてから体の健康管理を含めて色々先延ばしにしてしまっていたが危険な行為と概ね安全な行為も分かってきたので安全な所から再開する
CSS を微修正
見た目の変更よりも Custom Properties と Mathematical Expressions: ‘calc()’ 使用の徹底
何となく決めていた数値や、見た目上違和感はないが不統一だった値が自覚できるようになり、仮に不統一な状態を維持するにしても何故不統一なのか意識できるようになった
数日前から望まぬ不死の冒険者 1｜オーバーラップノベルスを読み始めている
元々マンガ版 (望まぬ不死の冒険者 1｜ガルドコミックス情報)を読んでいて6 巻が発売されたのを機に原作小説を読み始めた
結果として面白くそれはとても良いのだっが最近変な風に首が凝る
電車の中は最近読書の時間になっているがこちらも俯いた姿勢になりやすく首の負担は相当大きいように思う
持病の頸椎椎間板ヘルニアが悪化すると 1 週間程度寝たきりになってしまうので適度に休むなどして気を付ける
日中の食事断ちと、完全な caffein 断ちを始めて 3 週間目
アルコールは週に 1 回程度ハイボールをジョッキ 1 杯くらい飲んでいる
体重は 69kg 台で停滞中
実際にはカロリイのある喉飴など舐めているので日中のカロリー断ちは出来ていないが昼食、間食、ジュースの類は完全に止めている
減量としてはあまり効果が出ていないが何にせよ食事は少な目にした方が今は健康なのでこのまま減らす
また動物性脂肪や卵の摂取を気を付けるなどした方がより健康になりそうなのでその点も留意してみる
動物性脂肪の融点は牛が一番高く 40 ℃以上、豚が 30 ℃から 40 ℃程度、鶏が 30 ℃程度、魚は常温で解けるらしい。
最近焼き肉の後お腹を壊したり胃にもたれることが多くなった
年齢は勿論だが焼き肉を冷たい飲み物と共に食べることで胃の中で脂が凝固して消化不良を起こしやすくなっているのではないか、と言う仮説を立てたので今度食べるときは暖かいお茶で試してみたい
五輪延期 来年3祝日が移動 開会式前後4連休 閉会式前後3連休に | オリンピック・パラリンピック 大会運営 | NHKニュース
この weblog で祝日判定をするための日本の祝日のデータを持った JSON file を生成する Get-JapaneseHoliday Module を更新した
祝日が移動した場合は大体の場合 HolidayRule.json と言う Get-JapaneseHoliday が使用する file を更新すれば済むように作っているが、個人用 script なので手順書など準備している訳でもなく忘れていて面倒くさい
これを機に README.md くらいは自分の為に充実させるか、とも思う