雑記

基礎代謝量が翁のそれになってるのではと思うくらい痩せない。

2020/3/31より
・複数の要素を指定したセレクタと単一の要素を指定したセレクタの場合は、複数要素の方が優先される（未検証）

この時点では詳細度というものを知らなかった。
詳細度（MDN）

完全ガイド進捗　180/506

雑記

腹は減ってるけど、腹の調子が悪い状態になっている。

2020/3/26より
ループ内にis archiveという関数を入れるだけだった。
恥ずかしながら自力で解決した嬉しさで少し涙が出た。

実際には解決してなくてめちゃくちゃ格好悪かった。
手直ししたのでとりあえず反映（1.4.2）
手直し内容 : ループ内に置いたら逆にダメだった。ループ外にis monthを置いて対応。
ここから先の改修は十段に成り立ての人がGo Beyond!!のハードクリアを狙うくらい無謀なのでやめておきます。

雑記

届くのに3日掛かった。長かった。
アウトプット欲が高まるまではひとまず座学する。

食べ物の消化が追いついていないので今日は断食する。

雑記

アイコンの右寄せは収拾が付かなくなったので一旦スルーする。
昼寝後にテキストの一部を右に寄せられるかどうかを確認する。

日曜なのにめちゃくちゃ体調が悪くて凹んでいる。
この食生活が体調不良の原因の1つな気がしている。コロナェ・・・

体調が悪いので詳細は省略。結局困った時はflexに頼るしかなさそう（一番下）。
floatを使うとしっちゃかめっちゃかになる印象。

web developer roadmapというものがあった。
暗号か何かかな　(　´ω｀)

次はJQueryではなくてJavaScriptを触った方が良い模様。
俺が高校生の頃はJavaScriptはここまで重要視されていなかった気がする。
→調べてみたらGoogle Mapが出てきたあたりで大復活を遂げたとのこと。
歴史を感じる　(　´ω｀)φ

まんがまつりのサイトについては後は同じパターンが続くだけなので一旦終了。
座学資料がまだ届かないので、もう1サイト模写する。

・・・手頃なサイトが見つからない。
というわけで、個人用にアイデアだけ纏めていく。

・個人用アイデア
div ul li | li要素にclassを当てて、字下げしたいclassにだけmargin-leftを設定する。
ol li | olにすることで行No.を表現できる。これでコードを説明できたりする。
hover |　【コピペOK】よく使われがちなマウスホバーのCSSパターン１０選と作り方
color,font-family | #454545、#333333等　文字の色がほんの少し違うだけでも印象が変わる。あと英語フォントの指定も結構重要。

雑記

座学用に
・CSS設計完全ガイド ~詳細解説+実践的モジュール集（技術評論社）
・できるポケット Web制作必携 HTML&CSS全事典 改訂版 （インプレスブックス）
を注文。

注文理由
・完全ガイドは界隈で非常に評判が良い
・事典の方は毎回MDNで調べるのが手間になっているため

休日の1時間 = 平日の10時間 くらいになってる。

4月3日に「配置を先に覚えないと効率が悪い」と書いた。
2DXで言うなら固定配置を覚えるのと同じ。
4月3日時点で「あ、北斗のまま進めても効率が悪いわ」という考えに至って配置を先に勉強した。
その結果、Lv3の模写なら何とかなる雰囲気になった。

休憩。文字入力で体力を消耗してる感がある。

野菜もファミマでいいや。

the練習という感じで心地よい。
どのジャンルでも、練習ができるようになることは喜ばしいことである。
アイコンは後で付ける。

まあ俺にしてはやれてるほう。
今日は寝。

memo
右山型アイコンの位置がおかしい。
右下の画像周りがイケてない。

雑記

100gだけ痩せたような気がした。

何も進まないし、FF7は未開封のままである。
体力を使うようなことはしていないのに先月よりも疲れてるということは、疲れの原因がストレスであるということが明確である。
無理をして体調を崩しても意味が無いので、やれるときにやるようにする。

memo
block要素を中央寄せしたい時は、margin-leftとmargin-rightをautoにする。

雑記

ラー油うめぇ　(　´ω｀)

文字が増えるとこうなる。

良い感じにバランスを取ろうとするけど、文字が縮小されたりはされないらしい。

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だけ準備して寝。

雑記

この食事の難点は買い出し～片付けに時間が掛かること。
今の状況を考慮するとやらざるを得ないので、引き続き頑張る。

下段の表示を変えずに上段の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;

今日は寝。中々捗らないけど、これもまた人生。

雑記

座学再開

全ての要素を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を駆使していたっぽいけど、情報が見当たらない。

とりあえず今日は寝。