ウオの回遊日記

自由に日々を記録する

【やったことリスト】2021/7/23

【やったことリスト】とは:
次の目的で、書ける日に書いています。

・自分の生活を記録して、自己肯定・振り返りをする

 

  • 家事(洗濯物片付け、洗濯、買い出し)
  • ブログを書く(本記事)
  • 読書(スラスラわかるHTML&CSSのきほん)
  • 銀行の手続き

 

ROLANDさんとHIKAKINさんの動画を見て、単純な奴と自分に対して思わなくもないが、自分の人生をどうしたいか改めて考えさせられた。

何をしたいのか、何故今満たされていないと感じるのか、こうやって書いていても考えは中々まとまらない。日々、目の前のやりたいこと・やらなければならないことをコツコツやりながら、ゆっくり考えて答えを出したい。

 

【やったことリスト】2021/7/21

【やったことリスト】とは:
次の目的で、書ける日に書いています。

・自分の生活を記録して、自己肯定・振り返りをする

 

  • 家事(食器洗い、少しだけ料理)
  • ブログを書く(本記事)
  • 筋トレ
  • 全身ストレッチ
  • テスト用ブログで上に戻るボタンの検証
  • 仕事
  • 読書(スラスラわかるHTML&CSSのきほん)

 

せっかく買った野菜を傷ませてしまい、食べられず、罪悪感が半端ない。
後悔も半端ない。どうしたら料理を好きになれるのか。

 

【やったことリスト】2021/7/20

【やったことリスト】とは:
次の目的で、書ける日に書いています。

・自分の生活を記録して、自己肯定・振り返りをする

 

  • 家事(洗濯物片付け、洗濯、食器洗い、掃除機かけ)
  • ブログを書く(本記事)
  • 筋トレ
  • 全身ストレッチ
  • ブログの目次・見出しのデザインを見直し
  • 仕事
  • 読書(スラスラわかるHTML&CSSのきほん)

 

CSSを弄るのは楽しい。成果が目に見えると、なお楽しい。
少しずつでも、自分好みのブログにしていけたらと思う。

 

【IT】aboutページのtableの枠線を上下左右すべて表示させる

aboutページのtableの枠線が上手く表示されない

プロフィールを綺麗に表形式で表示させたかったのに、何故か表の下の枠線だけが表示されず、気持ち悪い状態が数カ月ほど続いていた。
今日もHTMLとCSSの参考書を読んでいて、ふと気になって、あまり期待せず弄り出したら解決したので、覚え書きを残しておく。

f:id:uosansan:20210718192141p:plain
下の枠線だけ表示されていない

上手く表示されなかった原因

やっていたこととして、まず、下記のページにある通り、tableタグのborder属性に「1」を指定し、枠線を表示させていた(つもりでいた)。次に、私が独自に、aboutページのhtml内でstyleタグに「border-width」プロパティで枠線の幅を指定していた。この場合だと、上と左右の枠線は表示されるが、下の枠線だけ表示されなかった。

参考URL:
www.sejuku.net

border属性を指定しなくても枠線は表示されていた

弄っていて気付いたのだが、はてなブログ側のCSSで指定してくれているのか、border属性に「1」を指定しない状態でも、tableの枠線は表示されていた。だから、もしかしてこちらでborder属性を指定しているせいで、競合してしまって上手く表示されていなかったのかもしれない、と思ったわけだ。

【失敗したソースコード

<table id="profile" border="1">
<!-- 中略 -->
#profile {
border-color:#4169e1;
border-width:0.5em;
border-radius:0.5em;
}

【成功したソースコード

<table id="profile">
<!-- 中略 -->
#profile {
border-color:#4169e1;
border-style:solid;
border-width:0.5em;
border-radius:0.5em;
}

【最終版:成功したソースコード

<table id="profile">
<!-- 中略 -->
#profile {
border:0.25em solid #649eed;
border-radius:0.5em;
}

ついでにコメントアウトしていた要らないプロパティを削除したり、style属性に指定していたプロパティをstyleタグの方に移動したり、綺麗に整頓できて、とてつもなくスッキリした。ずっと悩んでいた現象を解決できて、久しぶりに達成感。

f:id:uosansan:20210718192311p:plain
綺麗にすべての枠線が表示されました!