kii-memo-dev (開発メモ)

主にOBSの設定についてやツイキャス用のカスタムCSSを公開している別サイト、 『 kiiのメモ帳 』 で、配信のコメント欄のコメントを逆の順序で表示できないかという質問がありました。 ツイキャスだと新しく投稿されたコメントはコメント欄の一番上に表示されて、新しいコメントから順に上から下に表示される仕様になっています。 コメントを逆順で表示した場合、新しくコメントが頻繫に追加されてコメント欄が動いている場合はまだ良いのですが、動いていない場合だと上下にあるコメントのどちらが新しいのか紛らわしくなってしまいます。 そういう理由で 『kiiのメモ帳』 で公開しているカスタムCSSにはコメントの表示の順番を逆にするオプションは付けていません。 でも、これはあくまでも個人的なこだわりで、逆の順番で表示する事で個性を出したいと思う人もいるかもしれないので、上記の質問の解答をここに記事としてメモしておきます。 [ 目次 ] ツイキャスのコメントオーバーレイ YouTubeのコメントオーバーレイも逆の順番で ツイキャスのコメントオーバーレイ ツイキャスのコメント欄の場合は、「tw-comment-list-view__scroller」クラスのDIVタグの下にある無名のDIVタグの中にコメントが並ぶレイアウトになっています。 (👉「 ツイキャスのコメント欄の構造 (メモ帳) 」) なので、 既存のカスタムCSSの最後に次のCSSを加えると コメントが逆の順番で (新しいコメントが一番下に) 表示される様になるはずです。 . tw-comment-list-view__scroller > div { display: flex; flex-direction: column-reverse; height: 95%; /* 最新コメントがはみ出ない様に必要 */ } . tw-comment-list-view__scroller { transform: none !important; /* 下へスライドするアニメーション効果を無効化 */ }...

「 メモ帳 」と「 kii-memo-dev 」で公開しているツイキャスのコメント欄のオーバーレイ用のカスタムCSSについて、 「!important」を使わない方法はないですか? という質問をいただいた事があるので、そんな質問への回答をここに置いておきます。 一般のWebコンテンツを制作する際には 『できるだけ「!important」を使わない方が良い』 と言われているので、いただいた質問はその言葉に沿った質問だろうと推測しますが、元になるのページのCSS設定で「!important」が既に使われている場合は「!important」を使わないとその設定を上書きする事が出来ないので、カスタムCSS上で「!important」を使わないといけないので使っている場合がほとんどです。 そもそも、カスタムCSSの様に、既に存在するページまたはオーバーレイなどのWebコンテントに追加で読み込むCSSを制作中に、 元のコンテントのCSSに「!important」が使われていなければ、後で読み込むCSSに「!important」を使わなくても済むのに。。。 となるので、必要が無いのなら『「!important」を使わない方が良い』と言われる由来になっているのだと思います。 付け加えて、オーバーレイ用のカスタムCSSの場合は、そのカスタムCSSが読み込まれる時点で、表示されるコンテンツはHTMLから読み込んだDOMをグラフィックへとして処理されます。 グラフィックに処理されると これ以上CSSを読み込む事は出来ない 為、オーバーレイのカスタムCSSで「!important」を使っても使わなくてもその後で影響を受ける人はとても限定的になります。 多分、表示に使うアプリの開発者が、アプリが処理出来ないので「!important」を使って欲しくない。。などとなる位でしょうか？ 一方で、一般的なWebコンテンツの場合は表示されているWebコンテンツにCSSを加えて変更を加えたいという場合もあるので「!important」は使わない方が良いと言われているはずです。 [追記] 誤解が無いように書いておきますが、不必要な「!important」は使わない方が良...