雑記
クロナグラオフラインに取り組んで気付いたこと
■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さんの教え方素晴らしいな。
雑記
届いた。
今日は疲れてるのでプロパティ調査をやる。
・li要素に対して角丸を設定できなかった
いや、できてるが。うーむ。
・flex化したa要素に対してhoverを設定してみたけど上手く動かなかった
いや、できてるが。
どちらかと言うと「li要素内の最初のa要素だけ左側にのみ角丸を適用する」というのがスマートに書けていないのが課題。
・検索ボタンの色が再現できていない
できる
・cssだけでグラデーションを設定できるのか、画像が必要なのかを調べる
最小構成なら問題無いということは、途中でイケてない記述が混ざってる可能性があるな。
休みの日に頑張る。
雑記
毎日同じ題材を触るのがややしんどいので、一旦このサイトは中断する。やりたくなったらまた再開する。
（音ゲーで同じ曲をずっとやり続けると飽きてくるのと同じ。）
■課題
・li要素に対して角丸を設定できなかった
・flex化したa要素に対してhoverを設定してみたけど上手く動かなかった
・文字に立体感が出せていない
・検索ボタンの色が再現できていない
・cssだけでグラデーションを設定できるのか、画像が必要なのかを調べる
作業時間 1時間20分くらい
これ以上は劇的に早くなることはなさそう。
どちらかというと、平日にどの作業を何時間継続できるようになったかを把握していく方が大事そう。
雑記
去年がファッキンライフすぎて存在に気付かなかったゾ・・・
昼寝後に読む。
1箇所良い表現があった。血肉とさせていただく ( ´ω｀)人
雑記
element.style : Javascriptで設定したstyleが表示されるらしい
user agent stylesheet : ブラウザごとに定義されたデフォルトのCSS設定
inherited from XX : 親要素からの継承
■CSSの優先順位
・上から順に適用されていく。同一セレクタを指定している場合は下側の記述が優先される。
・複数の要素を指定したセレクタと単一の要素を指定したセレクタの場合は、複数要素の方が優先される（未検証）
・デベロッパーツールのStyleタブは優先度が高い順（降順）に並ぶ
複数要素の話は初耳だったから留意する。
垂直方向の中央揃えが上手くいかない・・・
最小構成にしてテストしてみる。
今日は垂直方向の中央揃えが成功するまで寝ない。
↓ とりあえず解決
左がhtmlで右がcss
2つ目と3つ目の項目が垂直方向中央に揃っていない。
1つ目の項目を見てみると、1行当たりの文字数が多くて自動で改行されて枠の高さが48pxになっている。
2つ目の枠の高さは24pxのまま。
そうしたら一旦css側で枠の高さを50pxくらいに設定する。
良い感じに垂直方向の中央に揃う。
どないや ( ´ω｀)
↓
height: 100%; の方がよりスマートな感じだった。
( ´ω｀)ﾄﾞﾝﾔー
（参考）height(MDN web docs)
雑記
DOMはDocument Object Modelの略 wiki
Download Only Memberではない。
・DOMという言葉を調べた理由
「ChromeデベロッパーツールのElementsパネルにDOMが表示されています。」という文章を見て、「DOMて何」となったから。
・デベロッパーツールがヤバイ話
cssの定義元をクリックする。
ファイルが開く
編集できる
( ´ω｀)ｺﾞｲｽｰ
デベロッパーツールの勉強をした方が効率が良さそうなので、一旦座学に切り替えます。
Chrome DevTools（公式）
アップデート情報
ソース（理解できる日が来るかは謎）
雑記
本日のドリル（8年前の本）
作業時間 1時間10分くらい
・模写準備
サイト上で右クリック ＞ ページのソースを表示 ＞ cssの置き場が分かる
地味に気にしたことがなかったけど、cssも落とせるのね。
ネットがドリル置き場に見えてきたゾ。
※一般のサイトを模写したものをそのまま公開したり画像をアップしたりはしない。
画像を載せるにしてもアレンジしたものを載せるようにする。
※ちなみに練習でよく使用している写真は母が撮ったものです。レッサーパンダも同様です。
（前にも書きましたが念のため説明）
地味に気にしたことがなかったけど、cssも落とせるのね。
「名前をつけて保存」で全素材が落とせるという。20年間気にしたことが無かった。
・模写中
素人目で見てもこんなにマトリョーシカさせる必要は無い気がする。
構造を把握したらgridレイアウトで再構築してみようと思う。
全部入力していったら800行を超えた・・・ ( ´ω｀)
構造はこんな感じ。
まずheaderを組み立ててみる。
線を引く。
なんだこのブサイクなものは・・・(；´ω｀)
カンニングしようとしても元ファイルの設計が凄いことになっていてパクれない感じになっているので、自力で頑張るしかない。
こういうのをちゃんと模写できるようになったらJavaScriptに手を出しても良いかなと思う。
力技のオンパレード
いや、けど組み立てはそこそこ出来てませんかね。
雑記
■プラン掘り下げ
・時間計測
ドリルをやるにあたって時間計測をしたい。
携帯端末で時間計測をしようとすると、ストップウォッチに辿り着くまでが大変で長続きしない。
出来れば卓上でボタンを叩いたら計測が始まるくらいのテンポ感が理想。
【改良版】dretec(ドリテック) 勉強タイマー (amazonリンク)
T-587 ラーニングタイマー（ドリテック公式）
あったわ。何でも揃う世の中。未来は僕等の手の中 ( ´ω｀)
・Excel VBAの勉強の素材を検討
VBAについては頓挫と挫折の中間辺りの状況。
仕事の9割は「人の世話」だからVBAを覚えたところで生かす機会がない。
仕事に関する勉強がとにかく捗らないのは、色々な意味で生かす機会がないから。
ただ、何もできないまま惰性で生きていくのもアレなので、生かす機会を自分で作っていくしかない。
VBAの勉強が捗らない理由の1つは素材となるデータが手元にないこと。
教本を買っても大抵「支店名」、「商品名」、「氏名」、「個数」、「金額」みたいなものをいじくり倒す内容になっていてテンションが上がらない。
なるべく興味が湧くようなデータを使って勉強をしたいところ。
興味が湧くデータ・・・うーむ・・・
以下ガチのメモ
雑記
■プランとか優先度とか
・合法的に自習できるようにする（優先度：高）
職場で全力で働きすぎて帰宅後に体力が空になることが多いので、職場で自習できるようにする。
これだけだとただのサボリおっさんなんだけど、例えば業務マニュアルをhtmlで作ったり、自分の作業をvbaで楽にしてみたりといった感じで自分の自習に業務を絡めるようにするといったものを想定している。
これをやりたいがためにblog改修を始めたといっても過言ではない。
・オシャンなサイトづくり（優先度：中）
オシャンなサイトを作るにあたってjQueryを覚える必要がある模様。
現在情報収集中。
・web模写（優先度：中）
手頃な課題が無い時に手を動かすにはどうすれば良いかを考えた時に、ドリルをこなすかの如く模写するのが良いと思った。
手に覚えさせると自習がより捗る。
・記事づくり（優先度：高）
これは言わば山籠もりのようなもので、本当に孤独な作業となる。
2021年冬完成を目標に頑張るレベル。
・DTP勉強（優先度：低）
中身が出来ていないうちに見た目を頑張ってもしょうがない。
・動画編集（優先度：中）
これはあまり身構えず、やれる範囲で頑張る。
普段ブログに書いてることを動画で表現できると良い。
・ピアノ（優先度：中）
何かを色々諦めないと着手できない状況。自習できるようになったら考える。
とりあえず7年前の本を引っ張りだして手を動かして寝る。ほとばしるダサさ。
本の指定通りの色にすると更にヤバくなるので、流石に色は変えた。
雑記
■更新履歴（1.3.8）
・コメント欄がギャグになっているのはtext-alignがjustifyになっているからっぽい。次回で直す。
→text-alignをleftに変更
・あとメニューの改修によってscriptが壊れたようなので見直す。
→クラス名をmenuから別のものに変更
・画面幅を狭めた時のサイドメニューの表示がイケてなかったので修正。
→直ってはいるけど、いまいち理屈が分かっていない・・・
■次の課題
・月から月への移動（1月末→2月頭など）ができない
これに再挑戦してみる。
これが終わったら一旦別のジャンルの勉強に入るかもしれない。
（コンテンツ不足過ぎるので、html、cssだけ頑張ってもバランスが悪い）
これはラスボス感があるな・・・
とりあえず片っ端から情報を集めてみる。
関数リファレンス/the posts pagination
関数リファレンス/get adjacent post
月別アーカイブのurl
https://toiblog.com/date/2006/10/
https://toiblog.com/date/2006/11/
月別の場合だと次の月へのリンクが出ない。
個別投稿ページだと出る。
というかURLをそのまま貼り付けたら何かおしゃんてぃな感じになった。（意図していない）
↓ 解決
ループ内にis archiveという関数を入れるだけだった。
恥ずかしながら自力で解決した嬉しさで少し涙が出た。
音ゲーで長期間停滞した後に成果が出た時に似ている。
という訳で反映しました。（1.4.0）
失敗小僧さんがまた良いことを言ってた。
自分が情報を発信した以上、言論としての批判は受け入れるべきである。
それ以上の批判を受け入れる義務はない。
念頭に置いておきます。
絵面のインパクトが凄いけど俺は貼るよ ( ´ω｀)