OBSでコメント欄をカスタムするとき役立つ初級CSS

VTuverの配信画面のコメント欄、最近それがCSSで制御されていると知りました。
便利なジェネレーターとかありますが、ノンプログラマーのために簡単なCSSの意味を書いとこう、たまにはエンジニアらしく（※フロントエンド9割、WEBデザイン1割で生きてる）。
おおむねジェネレーターで見やすいTLが作れると思いますが、意味知ってたら自分でいじくり回せるよ、ということで。

フォント周りでよく使うCSS
要素周りでよく使うCSS
- display
- marginとpadding
中級
- overflow
まとめ

フォント周りでよく使うCSS

* {
  color: #ffffff;                               /* フォントの色 */
  font-family: "Lato", "Kosugi", sans-serif;    /* フォント */
  font-size: 12px;                              /* フォントサイズ */
  line-height: 14px;                            /* 改行幅 */
  font-weight: 400;                             /* 太さ */
}

line-height

改行幅。px、em、%などで指定できます。
適切な改行幅は、1行の長さと文字のサイズでだいたい決まっているんですが、ゲーム画面の横に小さく出したい場合は狭めに、雑談などでコメントを大きめに出したい場合は広めにとると読みやすいです。

font-weight

文字の太さ。数字の場合は100〜900。他にも、normal、boldなどでも指定できる。ただしフォントに用意されている場合のみ適用されるので、 font-weight: 300;とか入力しても、300の太さがなければ反映されません。normalの状態で表示されます。

font-family

font-family: "Lato", "Kosugi", sans-serif;

フォントは書いた順に読み込まれます。この場合Latoはアルファベットしか収録がないので、アルファベットはLato、日本語はKosugiで出力され、Kosugiに収録されてない場合は、PCに入ってるゴシック体のフォントが出力される。sans-serifがゴシック体、serifが明朝体。
一番最後にsans-serifを書くのを忘れないようにしないと、Kosugiに収録されてないフォントが出現したり、Kosugiが読み込まれない場合、フォントが豆腐になります。

要素周りでよく使うCSS

* {
  display: none;                    /* 要素の状態 */
  margin: top right bottom left;    /* 要素の外側の空間 */
  padding: top right bottom left;   /* 要素の内側の空間 */
  background-color: #999;           /* 背景色 */
}

display

その要素が、ブロック（block）かインライン（inline）かを指定する。インラインのように見えるブロック（inline-block）とか、横ならび（flex, grid）などもある。noneは表示しない。

marginとpadding

要素の外側と内側の隙間の指定。まとめて指定することもできるし、個別に指定することもできる。個別に指定する場合はmargin-topとかpadding-bottomと書く。

中級

* {
  overflow: hidden;   /* 要素がはみ出したときの挙動 */
}

overflow

visible（表示させる）、hidden（見せない）、scroll（スクロールさせる）などで指定する。

まとめ

css、どんどん新しい要素がでてきてなれると楽しい。しかし永遠に難しい（めんどくさい）。
わからなければ公式のドキュメントを読むのが一番いいんですが、サッと調べるならMDNとかが便利です。
developer.mozilla.org

お読みあそばせ

もはやただの日記