見出しを囲んで、見た目を整えていく

皆様こんばんは。K-EUEです。

ここまで、2つほど記事をUPしてきましたが、
我ながら見た目が地味だったと思っております（汗）

これまた基礎だと思いますが、＜br /＞で同じ段落内でも改行できることも学びました。

ということで、今日のお題は「ブログの見た目を整える」です。
もしよかったら、最後まで読んでいただけると幸いです。

今日のまとめ
・囲み方は、＜div style="border:○px (囲み方）色"＞で指示
・囲む範囲は、width：○pxとheight：○pxで指示

分かってしまえば簡単なのですが、私が詰まったところを紹介していきます。

1　見出しと共存できない

＜h2＞の見出しと共存できなく、小一時間は悩んでしまいました。
上記の通り＜div＞で囲いを作ることはできたのですが、
「今日のまとめ」という文言を＜h2＞で見出しにしようとすると、
どうしても枠内に収まってくれません（汗）
なので、今回の記事ではフォントをいじることで見出しっぽく見せています。
多分ちゃんとしたやり方があるのだと思いますが、理解しきれず。。。
とりあえず、想像しているような見た目になったからいいかと妥協しております。

2　リスト表記と共存できない

これも1番と同じような感じなのですが、＜li＞を使って囲いの中にリストを埋め込もうとしてもうまくいきませんでした。
今回は文字列の先頭に「・」を打つことでそれっぽく見せているのですが、
こちらも正しいやり方を理解しきれていないだけのような気がしてなりません。。
1番の内容と合わせて、ちゃんと理解した上で、使いこなせるようになりたいです。

3　スペルミスをしまくる（笑）

これはもう、HTMLとか関係ないですね(笑)
自分の中では正しくやっているつもりなのに全然うまくいかなった原因が
ただのスペルミスだったときのがっかり感たるや。。。
英語に関しても勉強しないとだめですね。

今日書いたコード
今回から、記事作成時のコードを備忘録的に残していきたいと思います。
本職の人が見たらゾッとするようなコードになっていると思いますが、アドバイスいただけたら幸いです。

今日書いたコード(2022_01_08)

ここまでご覧になっていただき、ありがとうございました。

引き続き、努力していこうと思います。

ではでは！！