ところで Twitter の遅延式ツイート機能、日本語 UI では月のリストで三月だけ「月」の文字が欠けている。 誰も指摘しないから私の環境固有の現象なのだろう。

0:30 HTML の表の基本 - ウェブ開発を学ぶ: CSS で書き換える。

HTML 表の高度な機能とアクセシビリティ - ウェブ開発を学ぶ: CAPTION, THEAD, TBODY, TFOOT は承知している。 属性 scope, headers は初耳だ。どうアクセスし易くなるのかを示して欲しいものだ。

2:35 消灯。就寝。

7:05 また携帯電話のアラームに叩き起こされる。 ゲテモノ紹介ばかり観て体に蓄積した疲労が抜け切っていないようだ。

納豆とナポリタンを食す。歯を磨く。出勤。

7:50 現場。可燃ゴミ、猫の糞除去、館内テキトー清掃。

10:10 撤収。

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

曳舟の部屋。水浴び。体を拭いて白ブリーフ一丁になる。

10:45 PC を開く。

高度な機能の続き。見出しが二行二列のテーブルの HTML コードを分析する。 属性 scope を与える場合、値が colgroup, col, rowgroup, row になっている。 属性 id/headers を与える場合、それぞれ th/td に対して与える。

評価: 太陽系の惑星のデータを構造化する - ウェブ開発を学ぶ: テキストファイルから TABLE を構築する。ほとんどがテキスト処理。 このような CSV テキストから HTML の表に変換するコマンドをあとで調べよう。 手作業などやっていられない。

12:05 おやつ。食いながら HTML 編集を続ける。

12:30 歯を磨く。答え合わせをする。

  • 素の COL を 9 個並べるのではなく、colspan が 9 である COL を一つ書けば十分。
  • 属性 rowgroup がある TH が同一行に複数あっても許されるようだ。

注意する点はこの二つだけで、残りは解答例と同じものになった。

shell - Convert csv to html table using - Stack Overflow: Bash の変数置換機能を利用するか。

これが期待どおり動かない：

bash$ ... | { while read LINE; do echo "<tr><td>${LINE// /</td><td>}</td></tr>" ; done; }

入力の最後の行で謎の </td></tr> が出力される。諦める。

14:10 何やら暑いが昼寝。

17:30 起床。携帯電話をチェックする。Twitter と天気予報。

18:00 問題がないことを確認。外出。

ひきふね図書館。月刊小説新潮をチラ見してハードカバー本第三章を読み進める。 文章に外来語が控えめである傾向があり、好みだ。辞書をひくために携帯電話をポコポコいじっていて時間がかかる。

19:30 本を戻してトイレへ。退館。水戸街道へ。

20:20 コモディイイダ東向島店。今度は弁当がない。セールどころではない。 ベーカリーのワゴンセールを活用するのを余儀なくされる。675 円。

  • とろろそば
  • ウインナードッグ
  • コッペエクレア
  • ベーシックサンド

曳舟の部屋。郵便受けに水道メーター交換終了のチラシを認める。 出かける前に水をごくごく飲んだが、濁り水ではなかったので気づかなんだ。

シャワーを浴びる。20:40 風呂から出る。PC を開いて晩飯。 小ぶりのウインナードッグ、とろろそば、エクレアを食す。

【ＰＣエンジン】ワンダーモモ　これは完全に質実剛健なゲーム - YouTube: ドット絵は言うに及ばず、ステージ BGM が実は格好いい。

21:15 歯を磨く。PC に戻って転職・求人情報サイトの type で仕事検索。 AI が紹介してくれる求人がいつも同じだ。 検討中リストの各項目の右上にあるバツボタンが押しにくい。当たり判定が交点にしかない感じ。

21:40 仕事探しをやめる。就業先と現場が一致していないと困るのだが、そんな求人は存在しない。 オープンポジションでお茶を濁すしかない。

  • 【ARENA】第6回オンラインアリーナその3！定期配信#174【音ゲー / beatmania IIDX / CastHour / DOLCE.】 - YouTube: 今日は負けなし？
  • CSS レイアウト入門 - ウェブ開発を学ぶ
    • CSS はレイアウトを通常フローから遠ざける。これがレイアウトの原則だ。
    • display: flex; の挙動。一次元的。
    • display: grid; の挙動。二次元的。
    • 《フレックスボックスやグリッドレイアウトなどのテクニックの前は、列レイアウトの作成方法としてフロートが使用されていました》 とある。従来の自作コードが古びている可能性が高い。
    • TABLE レイアウトは過去の遺物。
    • 欧文新聞や論文のようなレイアウトを容器要素ルール中の column-count と内容要素ルール中の column-width で実現する。
  • 通常フロー - ウェブ開発を学ぶ: 基本編で学んだボックスモデルの復習に毛が生えた内容。
  • フレックスボックス - ウェブ開発を学ぶ: この節からが私にとっては本番だ。
    • 冒頭で述べられているレイアウト要件の例は、言い換えると Flexbox の出番だ。
    • 容器要素のルールで display: flex; とすると、大雑把に述べれば、子要素が横に並ぶ。
    • フレックスモデルのイラストを頭に叩き込め。
    • flex-direction は項目の並ぶ方向、順序を指定する。
    • このレイアウトの肝は flex-wrap, flex にあると見た。項目があふれるのをどう阻止するかを理解する。
    • flex-direction と flex-wrap を同時に定義することができるプロパティー flex-flow が用意されている。
    • プロパティー flex の値から実際のレイアウトを予測するのが難しい。
    • プロパティー align-items で内容要素が交差軸上の配置を統制する。 この例では値を center として、全ボタンが容器の真ん中に並ぶ。 プロパティー justify-content はその主軸版。
    • いろいろと値を試すと、このレイアウトが文字通り柔軟であることが実感される。
    • プロパティー order は順序というより重みという感じがする。
    • 複雑なレイアウト例の flex: 1 auto; に注意。

試験は明日やろう。