今日の積み上げ 150日目 成果
＼宣言した内容はこちらです／
本日の学び
News欄を①tableを使うパターンと②flexbox分けのパターンで検証：②圧勝（ですよね）
今回のデザインカンプにおいて、tableを使った方法がいいか、行毎にflexboxを使った方法がいいか、それぞれコーディングして検証をしてみました。
結果は、以下画像のとおり。
今回のデザインカンプのNew欄では、単純に日付とタイトルがあるだけではなく、以下の設定をする必要があります。
・見出しを付与
・一番上の行だけ余白が微妙に違う
・一番下の行の「more」ボタンはアニメーション付きで実装
シンプルな構造の場合は、tableで作った方が手っ取り早いのですが、
こういうトリッキーな設定がある場合は、table（表）で作ってしまうとコーディングが地味に大変な上、レスポンシブ等の表示崩れが起きやすいことが分かりました。
5/11追記：そもそも、table要素のdisplayを切り替えることは非推奨みたいです（見た目は実装できるけど、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プロパティを書き換える」ということはやめた方がいいでしょうね。
色々調べてくれたメンターさんや仲間に大感謝です・・！
なので結論、行毎にflexboxで分けるパターンがいいのではないかと思いました。
（実際、tableで苦戦した後にflexbox分けのパターンを書いたら、一瞬でコーディング終わりました；）
①tableパターンと②flexbox分けパターンのコーディングをこちらに貼り付けます。
<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>また、昨日のブログで書いていた、「table内で設定した余白を調整できるのか（そもそもpaddingとmarginの大きさを調整できるのか）」という課題は引き続き調査中です。分かる方いたらぜひご一報を・・・！
本日の反省
昼寝2時間してしまいました；
最近、息子が夜中に２時間おきに起きます。夜泣き続いてるな～；
また２日間くらいお風呂に入れていなかったので、夕食は実家に行っていただき、お風呂をゆっくりいただきました。おかげで次の日はすっきり起きれました。
なるべく積み上げに集中できるように、身体のメンテもしつつ、リラックスできるときはメリハリつけてリラックスしたいですね。
今日も諦めなかった自分、お疲れ様でした！
Twitterでも勉強ログを呟いています。よかったら覗いてみてください♪
コメント