HTML初心者が奮闘して自分好みのページを作るの巻
前提
ガチの初心者
htmlで自分のサイトを作るみたいな環境になかった
ブログの中に必要最低限のものをちょこっと埋め込む程度はやったことがなくもない
CSSはScrapboxのUserCSSをいじることでいくらか覚えた
Scrapbox（とObsidian）をいじることしかしてないのでUserCSSに使っていない要素はよくわかっていない
常識的に使う用語がよくわかっていないのでログの表現が変かもしれない
何をしたいのか
CSSを改造することは覚えたが、いちから構造を作っていくということはしたことがないので簡単なものを作って身体化したい
特に必要に迫られているわけではないのでただの趣味
ブログのCSSをいじりたいけど知識不足を感じている
よくアクセスするサイトの管理がいまいちなので自分好みのブックマーク管理ページをローカルに作ってみる
ただ並べるだけ
100個とかあるわけではないので手でぽちぽち追加してもまあ大丈夫だろうと
（データベースとしてはNotionでぴしっと作っているところなんだけど、Notionだとパッと見てサッと開くというのは難しい）
読み込みに時間がかかるとか他の情報と兼ねているとかだと「パッと」「サッと」ができない
ブラウザのブックマークバーは気に入らない
JavaScriptとかはなんもわからんのでブラウザから直接追加とかそういう難しいことはしない
常識的に考えて何が出来て何が出来ないものなのかが全然わからん
/icons/水平線.icon
2021/09/18
https://gyazo.com/ef3439823712a2ae1787286ddd23b855
html要素
favicon取得して表示
タイトルの下に補足を書き込む欄を作った
何でログインするのかとか 誰のブログなのかとか 何のためのツールなのかとか
折りたたみ
画像中で開いているのは最初から開いており、閉じているのは最初から閉じている
追加したいページの情報をコードにしてそのままhtmlに貼れるように
CSS要素
タイル状にして横に並べ、カテゴリごとにウィンドウサイズに応じて自動で折り返し
まだテスト中で各カテゴリ2つしか設置してないから折り返し設定が画像ではわからないけど…
クリックの範囲はタイル全体
タイトルは2行分だけ表示してそれ以上は省略
🤔
背景画像の設定とか影とかマウスオーバー時のアニメーションとかデザイン要素の作り方はだいたいわかっているので最後に考える
よくわかっていないのは位置とか並び方とかで、それをクリアすればまあまあ思い通りになりそう
サイドバーとかTwitterのホーム埋め込みとか考えられるものは色々ありそう
ブックマークがメインだけどブックマークとは全然関係ない備忘録とかを端に表示することもできる
問題はコードが（私の感覚で）長大になってきた時だが
気持ち
クラス名を勝手に作っていいの、すげー！ってなる（？）
勝手に命名して、その名前に対してCSSを書くと適用されるのすごくない？
折りたたみってなんか楽しいよね
要素を追加していけばタイルが自動的に並ぶの楽しい
余白とかサイズ感とかを自分にぴったり合うようにできるのは、手間があってもそれに見合うだけのポジティブな効果がある気がする
経過をGitにコミットしていくのわくわくしちゃうね
2021/09/19
https://gyazo.com/f53199620618c5e4aaeab7237b7f0cf2
※Kakauはまだfaviconがないのでフリー画像を使用
（他にもfaviconがうまく表示できないものは別途画像を引っ張ってきたり）
html要素
全体をdivで囲ってCSSでコントロールできるようにした
右側に試しにTwitterのタイムラインと天気予報を埋め込んでみた
幅はウインドウサイズに合わせて7:3で可変
CSS要素
やっぱり見た目が如何にも残念だとやる気が出ないのでとりあえずデザインをのらてつ研究所と揃えた
折り返しが反映されているのがわかる
カラムを複数にするために色々考えた
その他
実際に使えるようにブックマークを色々追加した
気持ち
デザイン要素を整えると「お気に入り」感が生まれてテンションが上がる
メンテナンスする気にもなる
実際のところ便利
ローカルファイルだから開くのに通信のタイムラグがないのが良い
🤔
備忘録とか習慣化したいこととかも長期に亘るタイプのものならここに書き込んでおくと良さそう
すぐ変わる情報は書き換えるのが面倒なので何でもかんでも書こうとはしない
過去に起こった自分的一大イベントみたいなのもなんか散逸してしまうので（常用する手帳類・デジタルノート類をすぐ替えたがるため）、簡易年表的なものを書いておくといいかも
htmlを自分で書くというのは、デジタルとアナログの間という感じがする
デジタルなのに今更手打ちなんてダサい、みたいな感覚はなくもないんだけど、それを言ったら紙に自分で線引いてリスト作るとかはどうなるの、という
紙に手で自分好みに書く、ということをデジタルでやっているのが今
便利なツールに頼っても自己満足感はあんまりないし
2021/09/20
（個人的な内容が増えてきたのでスクリーンショットは割愛）
html要素
クラス名を整理した
headerに常に表示したい文言を置いておく場所を作った
サイドバー部分にお気に入りの動画を埋め込んでみた
css要素
headerを整備
YouTubeの埋め込みサイズをウインドウサイズと連動
2021/09/21
https://gyazo.com/c5d026edd31ddefa4f0a07d0c563e408
（整理して個人的な要素は閉じたので再びスクリーンショット掲載）
html要素
お気に入りのものにアクセスする欄を整備
画像をクリックでポップアップ表示できるように設定
ツイートと天気は折りたたみに
画像には映ってない下の方に年表作成
css要素
headerのメモ欄にdisplay: flex;設定
その他
「Movies」の中にYouTubeの再生リストを並べた
大変に便利
ただし投稿者が埋め込み許可していない動画は再生できない
「Pictures」の中に繰り返し眺めたい画像類を並べた
画像ビューワとかを起動しなくていいのはとても良い
🤔
あとは要素を追加していくだけかなあ
デザイン的にはこんなもんでいいかなという感じ
スクロールバーを左右それぞれつけるか美しくないのでやめた
動画部分だけ高さを動画一画面分にしてスクロール
heightをvwで計算して指定することを覚えた（ウインドウサイズの幅を基準に動画サイズが変わるので）
https://gyazo.com/a1db8e7325e1c6360dac26a8fda2e96d
リファクタリングはするとして
ページ複数作ろうかなと思ったりもしたけど、なるべく1ページに収めた方がいいな
気持ち
Scrapboxを通じてCSSを学ぶ前はとてつもなく大変そうに思えたことが、「これはこうすればいいかな」というのがある程度イメージできるようになって随分簡単に感じるようになった
あとはもはやセンスの問題
要素のひとつひとつは「今の時代にこういう形で打ち込むとは…」という感じだけど、結果作り上げたい見た目をそのまま再現してくれる（且つロード時間のない）ツールって無いので、いつの時代だろうが自分の手でちまちま作るのは時には必要という感じ。
痒いところに手が届く
見て気分が良い情報だけが集まっている
用意が若干手間なので自然と厳選されるのもポイントかも
VSCodeの使い方だいぶ覚えた
フォルダ内の画像を貼ろうとしたらサジェストしてくれるのびびった す、すげえ！
お気に入り欄に設置するものを探してアンテナ張れそう
自分の好みにドンピシャなもの他にないかな！と思う
2021/09/22
https://gyazo.com/240458c07770b117abbfa148a11c78d0
html要素
<object data="hoge.txt" type="text/plain"></object>でtxtを埋め込むことを覚えた
見た目を整える必要がない情報はプレーンテキストを更新してそのまま表示すれば楽だな
2021/10/13
https://gyazo.com/17d092cf5a7903b218b51b08d482ff1f
前回からしばらく微調整しかしていなかったけど大きく変更
html要素
JavaScriptでタブ切り替えできるようにした
スクリプトそのものは単にコピペしただけなので別に知識が増えたわけではない
挙動の意味はちょっとわかった
それぞれ別のhtmlファイルに書いたものをiframeで埋め込み
適当につけていたclass名を整理
何でもかんでもdivにしていたのをul・liにしたりとか
分けなくていい名前を統一したりとか
Scrapboxがどういう構造でどういう命名でできているのか調べたりした
前はわからなかった意味が今はわかるぞ！
mp3とかmp4とかの埋め込みも覚えた
単に視聴したいならプレイヤー開けばいいことではあるけど
探すまでもなく絶対的に気に入っているものは一箇所に並べておくと幸せになる
css要素
各htmlのbodyにidをつけてidごとに整理
よく使うプロパティをまとめたり
htmlに複数のclass名を半角スペースで並べて書くことを覚えた
その他
日誌兼勉強ノートをWordに書くことにした
ちょー便利
見た目が綺麗なのが良い
やっぱWYSIWYGって良いよね
コードもコピペしておいたり
スタイルを白黒反転にするとそれっぽく見える
私には「それっぽい」で十分なのでWordで不都合はない
作業自体はVSCodeでやっているので