855 日目（曇り一時雨）涼しい一日

Build a Classic Layout FAST in CSS Grid - YouTube: 補助教材。この人が語っていることをフムフムと聞き流せれば、理解できていることになるだろう。

Vivaldi - Winter / The Four Seasons - YouTube: ビートマニアの V と同じ狙いだと考えられる。階段の運指などはゲームの他の譜面にふつうに応用できそうだ。再生速度 0.5 で再生すると微ズレを尊重しているのもわかったりして面白い。

2:30 消灯。就寝。涼しいし仕事もないのでグウグウ寝る。

11:00 起床。洗濯をする。納豆とコロッケドッグを食す。歯を磨く。

窓のホコリを取る。PC を開いて待つ。天気予報を確認。

11:45 洗濯物を干す。携帯電話の電池が心許ないが、いったん外出。

コンビニ。芹沢のハゲとタフを超速読でチェック。前者はビジネス面での芹沢のライバルとなりそうな新キャラが登場。今後の展開に期待できる。後者は次回あたりに龍星が鬼龍の幻魔症状を治療する運びになるか。

イトーヨーカドー曳舟店。体温チェックとトイレ。

ひきふね図書館。月刊小説すばるをチェック。みうらじゅん＆宮藤官九郎両先生の連載だけを楽しむ。

四回で某ハードカバー本をたっぷりと読む。第三章読了。今日読んだ記述では、ファーブル昆虫記を邦訳したのが無政府主義者だというのがいちばん興味深い。国家がなくても社会が成立することについて研究する必要があるということだ。

四階奥のマンガ関連を探索。ファミコンマンガ研究書みたいなものを発見する。次にやる？

14:30 退館。さっきの体温を忘れたので、もう一度イトーヨーカドーで検温。バカ。

曳舟の部屋。おやつ。PC を開く。

パチスロ「ボンバーガール」公式ホームページ: 注目すべきはこのボンバーガールの動くマンガ。

Task 1 はスタイルを決めるだけだから容易だ。これがゼロからこの外観の HTML と CSS を与えろという課題だったら厳しいものがある。

Task 2 はプロパティー clear の確認に過ぎない。

Task 3 は display: flow-root; を適用する。どこに？

15:25 すぐに終了。次の位置指定 - ウェブ開発を学ぶへ進む。プロパティー position は少し前に確認したが、重要な概念なのでおさらいする。

position: static; が既定の位置指定。
position: relarive; であるブロックは事後的にレイアウトされているように感じられる。
position: absolute; は対照的に、先にレイアウトされてから残りを処理されているかのように見える。
- 囲み記事のオールゼロの実験により、配置基準点が「ページ」であることを体感できる。この振る舞いを、BODY に position: relative; を付与することで変化させる。基準点は BODY 原点に設定される。
z-index の値は大きいほど画面上空に行く。XY 座標系との位置関係に注意。
position: fixed; は配置基準点がビューウィンドウであるような absolute として捉えられる。
position: sticky; は使いどころが難しそうだ。習得を諦めよう。

郵便アリ。バイト現場でのチラシ配布確定。

16:25 Test your skills: Positioning - Learn web development をやる。Task 1 は relative と absolute の確認。Task 2 は fixed の適用だけだ。

17:10 インターネット接続がまた止まる。今日はすぐ回復する。

17:30 眠い。横になる。涼しいので睡眠時間が長期化する。

19:10 起きる。携帯電話で時間を潰す。

19:45 外出。水戸街道へ。

20:20 コモディイイダ東向島店。532 円。

曳舟の部屋。入浴。

21:00 風呂から出る。PC を開いて晩飯。弁当とチョコパンを食す。

YouTube のよくチェックするチャネルの更新がほとんどない。

容器要素に column-count: 3; を与えると、三段組が成立する。
代わりに column-width: 200px; を与えると、各段の幅が 200px である段組が実現する。
column-gap: 20px; で段間の距離を 20px にする。
column-rule もしくは column-rule-color, column-rule-style, column-rule-width で各段の間に挟まる枠線のスタイルを指定する。 border と同様の書式による。
break-inside: avoid; の議論は解らない。

メディアクエリーは条件で適用されるスタイルを定義することができる。

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

段組、グリッド、フレックスボックスは最初から responsive だ。
単体の画像については、以前やった srcset/sizes と max-width: 100% を組み合わせる。
フォントサイズまでも responsive にできる。
見出しフォントの例は、メディアクエリー外のスコープで与えている。
HTML のビューポートメタタグの説明が本記事にあることを憶えておく。 VS Code で HTML をスクラッチから書くと、テンプレに含まれる META タグだ。

この章は価値が特に高い。また戻ってくるかもしれない。

22:55 休憩だ。夏休みシューティング配信ぴらきちvs轟爆嵐X 2022/08/29 - YouTube を視聴する。このドット絵、実は 3D で作ったという話に驚く。ゲーセンミカドの生放送はメインが終わっても何十秒かおいて放送終了になるが、チャットを伸ばすためだろうな。

media-type には all, print, screen, speech のいずれかを指定する。
media-feature-rule には width, width-min, width-max などを記述して CSS の適用条件を規定する。「～より狭いとき」を決めたいならば width-max を採用する、という具合だ。
有用な media-feature-rule として orientation, hover, pointer がある。
ブラウザーの開発者ツールにいいのがある。