2020年4月 に投稿した記事
01:47
Web制作
コメント
ラー油うめぇ ( ´ω｀)
文字が増えるとこうなる。
良い感じにバランスを取ろうとするけど、文字が縮小されたりはされないらしい。
ulに対してflex-wrapを適用するとフレックスアイテムが複数行にわたって表示される。
li内の文言が自動改行される = フレックスアイテムがオーバーフローする といった動きに見える。
途中で改行（br）を入れるとまた違った感じになる。
下段の表示を変えずに上段の3つめのマスの幅を広げたい。
これは出来ない気がしてきたぞ。
行を1つ追加する。
1列目の幅1fr 2列目の幅1fr 3列目の幅8fr
2行目は3列にわたって表示
とするとこうなる。
メモがめちゃくちゃ役に立っている。休日に一生懸命28パターン書きだした甲斐があった。
2行目の開始列を2列目からにする。
2行目の1マス目が余ってるので、1行目のpを縦に伸ばす。
あー そーゆーことね 完全に理解した（画像略）
・ゴリラを良い感じに3行にわたって表示させたい
ゴリラを普通に置くと画像の下に空白ができる。
これはimg要素がインライン要素であり、インライン要素はデフォルトでvertical-alignがbaselineとなっていることが原因で空白ができてるらしい。
img要素に対してはvertical-alignをbottomにすると空白が消えるらしい。
うむうむ。ところどころ分かってる感が出てるけど、大きな結果には結びつかない・・・
また模写しますかね・・・( ´ω｀)
とりあえずhtmlだけ準備して寝。
02:20
Web制作
コメント
この食事の難点は買い出し～片付けに時間が掛かること。
今の状況を考慮するとやらざるを得ないので、引き続き頑張る。
下段の表示を変えずに上段の3つめのマスの幅を広げたい。
ついでにリストを箱型にして横に並べたい。
まずliの親要素のulにdisplay: flexをあてる。Flexboxは1次元。
ulにlist-style-type: none（マーカーを表示しない）をあてる。
list-style: noneとの違いが謎。
listのstyle指定がイマイチよくわかってなかった件
こちらの記事が参考になった。
li1の隣にマーカー表示用に自動的にpaddingが設定されているようなので、ulのpaddingを0にする。
ブラウザのCSSによって上下にmarginが入っているようなので、ulのmarginを0にする。
listの右側に空きがあるので、flexプロパティをあてて空きを埋める。
アイテムの幅を弄るときはliに対してあてるらしい。
memo
flex … 短縮プロパティ
flex-grow: 1; … フレックスアイテムの横幅を伸ばすときに使われる値（伸長比）
flex-shrink: 1; … フレックスアイテムの横幅を縮めるときに使われる値（縮小比）
flex-basis: auto; … フレックスアイテムの基本となる横幅（ベースサイズ）
↓
flex: 1 1 auto;
今日は寝。中々捗らないけど、これもまた人生。
12:27
2DX
コメント
Changes in Cortical Dopamine D1 Receptor Binding Associated with Cognitive Training（海外サイト）
Scienceという本にワーキングメモリの鍛え方が載ってる模様。
俺が音ゲーから離れる直前に刊行されてたらしい（2009年2月）。
こういう情報を纏めて若者に託したいところ。
有料のようなので慎重に購入するようにする。
16:10
Web制作
コメント
座学再開
全ての要素をdivに内包させた場合
全ての要素をそのまま置いた場合
全ての要素をdivに内包させた場合_要素2つver
全ての要素をそのまま置いた場合_要素2つver
色使いが90年代のそれ。一旦昼寝。
スモーク味というのはベーコン味ということね 完全に理解した
3列×2行の6マス作っても、1マス目に全要素を重ねるように置くと2行目が無くなる。（grid-template-rowsをautoにした場合）
grid-template-rowsを50% 50%にした場合は6マス全て表示される。
入れ子にすると可愛らしい感じになる。grid-template-rowsを50% 50%にすると普通にオーバーフローする。
display(MDN)
個人用リンク。値多すぎじゃないですかね。
■要素をグリッドの領域全体に表示させる（子要素のサイズを親要素に合わせる？）方法を調べる
CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
どういう場合にgrid、flexを使うかを解説してくれてる記事。投げ銭したくなる内容。
「Flexboxは1次元、CSS Gridは2次元」を覚えるようにする。
object-fit(MDN)
個人用リンク。やりたいこととは関係ないようだった。
とりあえずpに対してwidth 100%、height 100%を入れてみる
ブラウザのcssが指定したmarginが適用されていてfitしていない。
「ブラウザ側のcssをリセットするcss」というのもあるらしい。今はまだ考えなくて良さそう。
marginを0にしたら良い感じになった。
ついでに中央揃えの練習をする。
width 90%、height 90%にする。
意気揚々とpにjustify-selfとalign-selfを適用してみたけど何ら位置が変わらない・・・( ´ω｀)
div（親）、div（子）、p（孫） 親に対してpが孫だったから変わらなかった模様。
3/20にやったことが頭に入っていない。悲しい。
div（子）に適用したらp（孫）が縮んだ。
div（子）のサイズを90%にして、Pの方のサイズを100%に戻したら良い感じになった。
text-align centerで横位置は中央寄せになったけど、縦位置が中央に寄らない。
これが配置が魔境な理由・・・
Pをフレックスアイテム化して解決。独学の場合、この方法が正しいのかが分からないところが難点。
あくまで解決法の1つとして覚えておくようにする。
flexが主流じゃない時代にどうやって縦位置を中央寄せにしていたのだろうか・・・
positionを駆使していたっぽいけど、情報が見当たらない。
とりあえず今日は寝。
徐々にパターン化されてきた。
やはりてりやき味が最the高。飽き防止のためにラー油を買ってこようかな・・・( ´ω｀)
まだ開けてない。まだあわてるような時間じゃない。
PS4のゲームを買うのはGUILTY GEAR Xrd REV 2ぶり。
このゲームは流石に周りの住人に配慮する必要が無いので（騒音的な意味で）、コンディションが整ったらプレイする。
FF15は開始20時間のところで止まっているけど、7は果たしてどうなるか・・・
忘れそうなのでメモ
長期記憶への移行のプロセスを自分の経験に基づいて考えると、下記のような感じがしている。
定着率100%になるまでは移行を実感できない。
移行を実感できないというのは、パソコンで言うところのファイルを移動している間は移動先側でファイルを使用できないのと同じイメージ。
寝る度に定着率が少しずつ上がっていくのかなと考えている。
少しずつと書いたのは、一気に上げる方法があるなら世界のどこかでそういった事例が出てくるはずだけどそういった事例は見たことがなく、どれだけ調べても「回数が全て」という情報しか出てこないので、すぐに100%にする裏技は存在しなそうだから。
毎日同じ内容の練習をしたときにどうなるかはまだ試せてない。
どこかの科学者が既に実施していて論文も出していたら有難いところだけど、まだ見つけられていない。
起きてる時間の想起回数が増えるから、丁寧に進めれば100%になるまでの時間を短縮できると思う。
おい、エンゲル係数おい。
とりあえずキャベツが米の代わりになっている。
サラダチキンが非常に高い（松屋の朝定食の値段と同じくらい）けどご褒美要素なので外せない。
コーンクリームスープのコスパが良いのでレギュラー化する（1杯あたり31円くらい）
腹が凹んできたら元の食生活に戻す。
とりあえず拙い日本語でミカドさんを応援してきた。
生活が変化して、まだそれに慣れていない。
再来週辺りから少し落ち着く見込み。
いや、しんど、これ。
仕事が思い通りに進まないけど、スケジュールに変更はないみたいな状況。
「何かあれば俺が終わらせればよい」という伝家の宝刀が使えなくなったので、相当ストレスが溜まってる。
そして気づいたらミシュランマンボディを獲得してたので、摂取カロリーを落とすことにした。
摂取カロリーは落ちてるけど出費が2倍になった。
これはアカン・・・( ´ω｀)
13:40
Web制作
コメント
カテゴリーを選択した時に前の記事、次の記事の出方がおかしくなってるので直す。
無理だった。
Fly Above(A)を何とかクリアできるレベルの人がANDROMEDA(A)に挑むくらい無謀な感じだった。
幾分マシな感じには出来るけど、やりたいこととは違うので今回は手を入れない。
公式テーマでも実装していない機能なので今のところお手上げ。
カエルを救った
Grid ガーデン
http://cssgridgarden.com/#ja
これもやる
収穫した
途中で「へぇー」、「ほぉーん」ってなった。（初見のものに触れた時の鳴き声）
本屋に行きたいけど必要火急ではないので我慢。そして昼寝。
自分の場合は昼寝無しでは1日通しで勉強できない。
常にブドウ糖を補給しながらでも昼寝が必要であることが分かったので、パフォーマンス低下の原因はエネルギー不足ではなく酸欠である可能性がある。
（脳だけ疲れてる時の昼寝時間は大体1時間未満）
以前はこのノリで勉強すると高確率で金縛りに遭ってたけど、最近はほぼ発生していない。
いやー、配置がムズイ。
ここでめちゃくちゃ停滞するかもしれない。仕方なし。
display: grid
display: inline-grid
( ´ω｀)ﾜｶﾗﾝ…
グリッドを勉強するんだったらお狐様の方が親切っぽい。
23:15
Web制作
コメント
体調が非常に悪めで作業が進まない。
口角炎が数週間治らなかったり、左耳の聞こえが悪くなったりしている。
とりあえずやれる範囲で座学中。
・li要素に対して角丸を設定できなかった
これについては、:first-of-type を使えば解決するかもしれない。
値4つを設定するショートハンドは「時計回り」で覚えられそう。
margin: 5px 10px 15px 20px; → 上5、右10、下15、左20
W3Cに加えてMDN（Mozilla Developer Networkの略らしい）も参考にしていく。
英単語を調べる回数が増えたので電子辞書購入の日も近い。
class名を半角スペースで区切って記述すると複数のクラスを指定できる。
てっきりクソ長いclass名だと思ったら、複数指定してただけだった ( ´ω｀)ﾃﾍﾍﾟﾛ
1つのdivに対して4つのクラスを指定してるサイトとかあるけど、管理できるものなのかな・・・
cssでcalcを使うと便利な場合があるらしい。width: calc(100% / 3) みたいな感じで書けば幅が1/3になるっぽい。
確かに自分で手計算するよりもこっちの方がスマートである。
Devツールで要素を右クリック→Force stateで疑似クラスを指定できる。便利。
https://flexboxfroggy.com/#ja
カエルで学ぶフレックスボックス。良い時代ﾀﾞﾅｰ。
以前やろうとしていた自己紹介ページの別verをサイドバーに追加。
何か違う感じになったら引っ込める。
表示確認用ページの方はそろそろサイドバーから引っ込めようと思う。
模写レベルが上がった頃にまた復活させる。
カテゴリーを選択した時に前の記事、次の記事の出方がおかしくなってるので直す。
https://www.w3schools.com/css/css3_box-sizing.asp
W3Cさんが「全ての要素にbox-sizing: border-box;を適用するのマジオススメ」って言ってるので従う。
22:36
Web制作
コメント
クロナグラオフラインに取り組んで気付いたこと
■html、CSSの勉強の分類
・作成したパーツを配置する
・パーツそのものを作成する
おそらく配置の方を先に覚えないと捗らない。
■配置の勉強
・まずfloat、flex、gridを単体で覚える
・単体を覚えたら組み合わせる
・組み合わせを覚えたら入れ子を覚える（gridの中にgrid）
・入れ子を覚えたら入れ子の組み合わせを変える
■パーツの作成の勉強
・インライン要素、ブロックレベル要素の違いを覚える
以下未知数
・margin、padding、borderを馴染ませる
・疑似要素、疑似クラスを覚える
ここら辺を覚えてからでないと、他のジャンルの学習効率が悪くなると思う。
実践編
ただの線と箱9個
真ん中の箱をさらに9分割
歯抜け感を出す（横線を1本追加しないとダメだと思う）
仕様を確認しようと思ってW3Cを覗いてみたら https://www.w3schools.com/ とかいう親切なサイトがあった。
Google翻訳の優秀さに甘えつつ勉強を進めていく。
とにかく徹底的に「1つ弄って結果を確認」をやる。そうすれば嵌る回数を減らせると思う。
memo
CSS レイアウト-表示プロパティ
CSS 表示プロパティ 見たことがないプロパティがある
俺が持っているポケットリファレンス（2014年発売）には載ってないプロパティがチラホラあるゾ・・・
inline-blockがとても重要そう。
CSS レイアウト-表示：インラインブロック
W3Cさんの教え方素晴らしいな。
