858 日目(雨のち曇り一時雨)今月こそ良い稼業に就くぞ
【ファミコン】ゴルゴ13 第1章 ファミコン史上に残るお色気シーン - YouTube: デューク東郷以外にはスパルタカスが出るくらいで、原作オリジナルキャラクターはほとんどいないようだ。
1:30 基礎的なレイアウトの理解 - ウェブ開発を学ぶをやはり片付けることにする。
ARTICLE 要素と ASIDE 要素の列幅を柔軟に変化させる術がわからない。
昼間にやろう。他の指示についてもより良いオプションを吟味したい。
2:15 消灯。就寝。
7:05 起床。大雨が降っている。納豆とチーズバーガーを食す。歯を磨く。出勤。 ゴム長の選択しかあり得ない。
昨日投函し忘れた業務報告をポストに投入。
7:45 現場。不燃ゴミをいちおう出す。ゴミ部屋の清掃、館内をほうきで掃き出す。 蒸し暑くなる。管理人室の床をモップでこする。暑い。
10:05 撤収。雨はやんだようだ。
10:15 ビッグエー墨田京島店。218 円。
- カレーピラフ風おにぎり
- コッペパンいちごジャム&マーガリン
- シーフードヌードル
イトーヨーカドー曳舟店。いちおう体温チェック。
曳舟の部屋。水浴び。PC を開いて作業。
MDN グリッドレイアウトの理論を再度チェックする。
まずは grid-template-columns の指定方法を理解する。
記事中で紹介されている用例はこれしかない:
grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 2fr 1fr 1fr;
grid-template-columns: 1fr 3fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
幅の長さや割合を列の個数だけ空白区切りで並べたものは理解している。
リンク先のビデオによると fr は fraction ということだ。
repeat() はグリッドというより CSS 関数の理解になる。
《トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しをよりコンパクトに書く》
ための機能だ。
repeat(auto-fill, minmax(...)) を分解して理解しよう。repeat() は今見た。
キーワード auto-fill は「容器要素からあふれない最大の反復数にしてくれ」くらいの意らしい。
関数 minmax(min, max) は《寸法の範囲を min 以上、max 以下で定義》したいときに用いるようだ。
これらを整理すると、幅も列数も可変であることが推察される。さらに柔軟な配置が実現できる。
タイルの隙間は gap, column-gap, row-gap で直接的な長さを指定する。
この例ではおそらく暗黙的に行が生成される。このような行の寸法を指定するのがプロパティー grid-auto-rows だ。
grid-auto-rows: 100px;
grid-auto-rows: minmax(100px, auto);
関数 minmax() の第二引数としての auto は「自然な限りどんな大きな値でも可」だろう。
以上を踏まえて《収まる限り多くの列》のルールをグリッドレイアウトにおける基本形だと理解できるのだ。
ラインベースの配置と別名での指定は慌てて理解する必要はない。
11:40 手許のグリッドレイアウトコードを見直す。
昨晩の DOLCE プロのラジオの続きを聴いていると、『ヒットラーの復活』について熱く語り始めて愉快だ。
12:00 おやつ。イヤホンの片側が逝ったかもしれない。あ、戻った。
12:30 歯を磨く。グリッドレイアウトの実践。
ゆうべの ASIDE の内側のアルバム部分のグリッドレイアウトは「収まる限り多くの列ルール」を適用してスタイルが良くなる。
13:35 排便チャレンジ。昨晩の食物繊維が効いて欲しい。
グリッドレイアウトの続き。MAIN も素直に「収まる限り多くの列ルール」を定める。
サンプルイメージから左列の幅は 480px くらいか?
CSS をテキトーにいじっていたら NAV の position: sticky; が効かなくなった。あちゃあ。
14:00 消灯。就寝。
16:40 起床。外出。
押上駅バス停~錦糸公園前。下車した途端に大雨が降り出す。
17:30 オリナス錦糸町。二階ベンチで休憩。
18:00 タイトー F ステーションオリナス錦糸町店。MJ プロ卓東風戦 5 クレ。 コバミサ先生の「勢いが止まらない!」という実況があるが、勢いしかない。
【SCORE】
合計SCORE:+164.1
【最終段位】
四人打ち段位:風神 幻球:11
【9/1の最新8試合の履歴】
1st|**--*---
2nd|---*--*-
3rd|--*--*-*
4th|--------
old new
【順位】
1位回数:4(36.36%)
2位回数:2(18.18%)
3位回数:5(45.45%)
4位回数:0(0.00%)
平均順位:2.09
プレイ局数:57局
【打ち筋】
アガリ率:26.32%(15/57)
平均アガリ翻:3.47翻
平均アガリ巡目:11.53巡
振込み率:7.02%(4/57)
【9/1の最高役】
・跳満
・跳満
20:50 カスミオリナス錦糸町店。395 円。クーポンゲット。
- 大盛りぶっかけたぬきうどん
- レバニラ
外に出ると雨がやんでいる。にわか雨だったか。
21:10 ビッグエー墨田業平店。844 円。バイト先からの支給品がとうとう枯渇したので、マスクを自腹で購入。
- マスク (50)
- ハンバーグチーズ
- おむすび梅
- コーンマヨパン
- コッペパンチョコ&ホイップ
- シーフードヌードル
今気づいたが、おかずが一品多い。
曳舟の部屋。排便チャレンジ。シャワーを浴びる。
21:55 風呂を出る。PC を開いて晩飯。うどんとレバニラにする。 レバニラは本質的にはオリジンのもので、風変わな味付けを堪能する。
- Vasara 2 婆裟羅 2 - Hard - 4.513.150pts - Stage 4 Boss - YouTube: このプレイヤーは本作やカオスフィールドなど、剣を振り回すシューティングを得意としているのだろう。
- Lv12のフルコンを300曲にして帰ります - YouTube: 今晩の作業 BGM とする。
22:30 歯を磨く。
23:15 昼間のレイアウトの課題が納得行かず、もう一度やり直す。
NAV の中身が気に入らない。脳裡にはフレックスボックス不要論が噴出している。
23:35 CSS レイアウト料理帳 - CSS: カスケーディングスタイルシートを発見。 CSS 版デザインパターンだな。
- レシピ: メディアオブジェクト - CSS: カスケーディングスタイルシート
.mediaと.media-flipの関係が実に面白い。一部プロパティーを上書きする技法として一般化したい。fit-content(200px)などが急所。基本編ではminmax()で頑張るような状況に適している?
- 欄レイアウト - CSS: カスケーディングスタイルシート: いずれも習得済みの技法だ。新聞レイアウト、グリッドレイアウト、フレックスボックスの使い分け方針の参考になる。
面白くなってきたが、日付が変わる。