【プログラミング・Web制作勉強ログ#62】5/7の積み上げ成果

2022年5月8日2022年5月11日

今日の積み上げ 148日目成果

#今日の積み上げ 148日目成果

①5/6日報執筆⇒◎
②デザインカンプ中級編(Sass)⇒Newsのテーブル欄でしくじる
(その他)
・隙間時間のインプット⇒2本
・断スイーツ(13日目)⇒クラッカーを少し食べて、まさかと思って成分表を見たら「ブドウ糖果糖液糖」が入ってた。超加工食品は基本全部ダメですね！
— おかつ🌱開業準備中 (@o_89965328_k) May 7, 2022

＼宣言した内容はこちらです／

本日の学び

Sassのコーディング:色々しくじってます

・市松レイアウトの「flex-direction: row-reverse;」部分がおかしなことになっています。

2番目の部分。なんでこんなに右にずれるんや笑
また、row-reverseにした部分の画像とテキストエリアが、ブラウザ幅に合わせて縮まない問題も発生中。

・News欄の表部分、tableタグで書くにはハードル高すぎました

こちら、緑線部分が下のデザインカンプと若干違うので、アウトです。

tableタグでなんとかこの下線の長さを調節できないか試してみましたが、やはり厳しいようです。

tableタグを使用した上で、緑下線(border-bottomを使用)の長さを調節するために試したこと：

　①trタグ＆tdタグの要素幅を指定（左右padding20pxずつ設ける）
　　⇒　下線が要素幅のとおりにならない。
　　　（「下線は要素幅に沿って表示される」という基本に則り設定したが、うまくいかなかった）
　②table内の線の長さはそもそも調節できないのでは？という仮説をたてＧoogle先生に聞く
　　⇒　当該論点に関する検索結果現れず。
　③疑似要素（::before）を使って緑下線を作成（メンターさん検証）
　　⇒　一部指定（nth-of-type等）機能を使い、最下行の緑線を消そうとすると、最下行でセルを結合していた「colspan=”2″」が効かなくなる。
　　⇒　疑似要素と表の相性は非常に悪そう。

【結論】表機能で作成するには複雑すぎた

News欄、一から書き直しだ＼(^o^)／＼(^o^)／ﾔｯﾀ

5/9追記：tableタグでも下線長さの調節ができました！

あわせて読みたい

CSS displayの初期値・デフォルト(ブラウザでの初期値) ブラウザ側でhtmlタグごとにdisplayの初期値が設定されており、dispalyの値を元に戻したいとき、意外とわかりません。CSS displayの初期値・デフォルトを解説します。

例えば、以下のブログでは、
「JavaScriptでtableの要素のdisplayを切り替える処理をすると、table内のレイアウトがズレるという不具合が発生した」
と書かれています。

さくらいらぼWEB制作版

Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因 Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする…

つまり、tableの要素のdisplayを書き換えるということは、「tableとして持ち合わせている機能を無くしてしまう」ことになってしまいます。

今回の「table行の下線の長さを調整する」というケースの場合、table行（tr）のdisplayをblockに変換するということをしてみましたが、
「見た目はできている」ように見えても、tableとしての機能が無くなってしまう＆それに伴う不具合発生のリスクがあることを考えると、「tableの要素のdisplayプロパティを書き換える」ということはやめた方がいいでしょうね。

色々調べてくれたメンターさんや仲間に大感謝です・・！