カテゴリ「サイトについて」に属する投稿178件]8ページ目)

:has()の活用例を見てたらまさに求めていたものがあったから、さっそくサイトに実装してみた。

CSSの実装はこれでかなり進化する! Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ | コリス
/* 直接のhrの兄弟があるp要素内のすべてのa要素を選択 */
p:has(+ hr) a:only-child { … }


これを参考に、直後に小見出しを持つ大見出し(伝わる?)のmargin-bottomを調整。いや〜便利だなあ。隣接セレクタを使えば直後の要素にスタイルをあてられるけど、直前の要素を触りたいときがちょこちょこあってもどかしく思ってたんだよね。
図表にfigcaptionがあるときと無いとき(←追記: これは前にも書いてたわ)、引用にciteがあるときと無いときとでスタイルを出し分けられるわけで、ちょっと考えただけでも夢が広がるよね。
スマホからでも問題なくGyazoっててがろぐ更新できるな。次からこれでいこー。
ブログの画像もGyazoで管理するほうが楽だよなー、サーバの容量とかディレクトリとか考えなくていいし移転するときもURLそのままでいいわけだし。思い立ったが吉日でディレクトリの設定変えちゃおうかな。
今ものすごい真理に気付いてしまったんですけど、てがろぐに投稿する画像もGyazoに投げるようにすればめちゃくちゃ楽なんじゃない???
コンテナクエリ、正直「つまり……どういうこと???」って感じで見てたんだけど、下記の記事の後半でその便利さがやっと分かってきた。

レスポンシブの実装が今までと変わる! CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 | コリス
便利な例としてもう一つ、キャプションを含むfigure要素のスタイルを設定するfigure:has(figcaption)があります
figcaptionがあるかどうかでスタイルを分けられるってことかー。かなり強くない???
てがろぐのスキンに似た感じでpostセクションの一覧を作り直そうかな。
☑️メニューのaをdisplay: blockにしてクリック範囲広げる 2022-08-26
☑️箇条書きの見出しのline-height調整 2022-08-26
#done
ネットが繋がるようになったから喜び勇んでサイトのメンテを済ませた。てがろぐも最新β版の3.7.4にアップデート完了!