今日の積み上げ 149日目 成果
＼宣言した内容はこちらです／
本日の学び
tableタグを使っても、下線の長さを調節できました！！
5/11追記：やっぱりだめでした(≒見た目は実装できるけど、tableとしての機能が無くなる)😢
table内の要素（table, th, tr, td）のdisplay初期値はすでに決まっているため、そこから「display: block;」と変換してしまうと、そもそもtableとしての機能をなさなくなってしまい、不具合が起こってしまうそうです。
参考：display初期値一覧
例えば、以下のブログでは、
「JavaScriptでtableの要素のdisplayを切り替える処理をすると、table内のレイアウトがズレるという不具合が発生した」
と書かれています。
つまり、tableの要素のdisplayを書き換えるということは、「tableとして持ち合わせている機能を無くしてしまう」ことになってしまいます。
今回の「table行の下線の長さを調整する」というケースの場合で、table行（tr）のdisplayをblockに変換するということをしてみましたが、
「見た目はできている」ように見えても、tableとしての機能が無くなってしまう＆それに伴う不具合発生のリスクがあることを考えると、「tableの要素のdisplayプロパティを書き換える」ということはやめた方がいいでしょうね。
こちらの前提をご了承の上、以下の内容を閲覧いただければと思います（当時のログとして、書いたことはそのまま残しておくことにします）。
上記のとおり、昨日のブログで「tableの下線の長さ調節できねぇ・・」と苦戦した旨を書いてましたが、スクールの仲間が検証してくださり（神）、以下のコーディング修正で実現！
（修正概要）
・tr（行）部分の余白をpaddingからmarginに変更
・tr（行）部分のdisplayをblockに設定（trのdisplayの初期値は”table-row”）
※5/10追記：tr部分のdisplayを変更すると、表示に不具合が発生するので非推奨です(上記の5/11追記部分参照)！！
・よく使うタグのdisplayの初期値一覧（参考サイト）
・修正したコーディングはこちら（Sassのみ修正＆修正箇所はコメントアウト）
<section id="info" class="info">
<h2 class="title">NEWS</h2>
<div class="container">
<div class="info_flex">
<div class="table_news">
<table>
<tr>
<th colspan="2">お知らせ</th>
</tr>
<tr class="first_line">
<td>2022.02</td>
<td>公式Instagram、yotubeはじめました。</td>
</tr>
<tr class="second_line">
<td>2021.10</td>
<td>非住宅 木造建築フェアに出展します。</td>
</tr>
<tr class="third_line">
<td>2021.02</td>
<td>公式ホームページがリニューアルしました。</td>
</tr>
<tr class="more">
<td colspan="2"><button>more</button></td>
</tr>
</table>
</div>
<div class="table_blog">
<table>
<tr>
<th colspan="2">ブログ</th>
</tr>
<tr class="first_line">
<td>2022.01</td>
<td>あけましておめでとうございます。〜会長から社員まで〜</td>
</tr>
<tr class="second_line">
<td>2021.06</td>
<td>【検証】土地と人に相性はあるのか？</td>
</tr>
<tr class="third_line">
<td>2021.04</td>
<td>弊社創業初の入社式が行われました。</td>
</tr>
<tr class="more">
<td colspan="2"><button>more</button></td>
</tr>
</table>
</div>
</div>
</div>
</section>しかし、新たな問題が。
レスポンシブデザインにするため、画面幅を縮めて表示崩れがないかチェックしたところ、お知らせん＆ブログ欄がPC画面の大きさのままになってしまい、画面幅に合わせて縮まないのです。
（お知らせ＆ブログの各タイトル欄の左余白（padding-left）を65pxに設定しているため）
これを解決するための仮設は、
「paddingの最大値を65pxにして、伸び縮みする機能があれば解決可能」
ということだと思います。
その機能があるか実際リサーチしたところ、以下の手段がありそう。
結果が分かり次第、ブログで共有します。
・paddingをパーセンテージで設定する
⇒ぴったり65pxにあうパーセンテージなし
⇒親要素のtdの幅がなぜか縮んでしまうやつもちらほら出る
⇒たぶん却下
・Sassの演算機能⇒検証中
・box-sizing機能⇒検証中
・max-paddingを設定する方法⇒検証中
※5/20追記：max-paddingでpaddingを可変することが一般的っぽいですね！使ってみて結構便利なので、大変お世話になっています。
本日の反省
朝活後、ずっとひげダンスしてました
弟の家に怪獣たちを連れて遊びにいきました。
弟家のキッズ（２歳児・１ヵ月）と我が家キッズ（２歳児・６ヵ月）が勢ぞろい。
４人の子どもがいるのは、大変ね・・・
赤ちゃんの面倒を見ているときに限って、ママに「だっこだっこぉおおおおおお」という２歳児キッズたちの気を紛らわす方法を模索していたところ、ひげダンスを歌って踊ったら、めちゃくちゃウケてるｗ
結局ノー昼寝で夜まで遊んでました。家から一歩も出てないのに9000歩歩いてたよ・・・ﾓｳﾋｹﾞﾀﾞﾝｽﾊｵﾅｶｲｯﾊﾟｲ
今日も諦めなかった自分、お疲れ様でした！
Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪
コメント