CSS いろいろ

CSS popover (2024)

2023年春から Chrome と Edge に搭載された CSS です。

(工事中)

:has() 擬似クラス (2024/04)

• TestCSS_has_hover_background01.html
  div にマウスカーソルが来ると body の背景色を変えます。

古いブラウザで動きません。Firefox120 では動作しません。

scroll-margin (2024/04)

ページ内リンクで特定の場所にジャンプしてスクロールするときに、 表示するコンテンツがウインドの上端に来てほしくない場合があります。 scroll-margin で上側に余白を持たせることができます。

var変数、calc() 関数

• CSS var変数、calc() 関数

クラス名は複数指定できます

クラス名は複数を同時に指定できます。 両方の設定が反映されます。

/* 例: name1, name2, name3 を設定する。 */
<p class="name1 name2 name3">...

設定の優先順位に注意

スタイル適用のときの優先順位に注意してください。 同じプロパティの設定が複数ある場合は後から設定された値が上書きされます。

また、同じタグの CSS の設定を ID名、クラス名、 タグ名など複数の方法で設定したときに優先順位があるので注意してください。 このあたりはセレクタも加わると難しい話になります。 なかなか慣れません・・・。

JavaScript でアクセスするときは classList があります

• MDN: element.classList

//例:
const el = document.querySelector("#ID1");
const list = el.classList;
// 複数のクラス名を登録する。add() は上書きではなくて追加になります。
list.add("classname1");
list.add("classname2");
list.add("classname3");

!important

• CSS: !important に引越し。

vertical-align

• CSS: vertical-align に引越し。

擬似クラス :hover と :active

• TestCSS_hover01.html
  CSS: 要素の表示・非表示

いろいろ

IE11 で CSS の設定が反映されない例

Chrome や Firefox では正常に表示されるのに、 IE11 でうまく表示されないことがたまにある。
(2020) IE は昔のブラウザの話なので気にせず。

Firefox や IE11で table border の一部が表示されない

• TestCSS_position_absolute_table01.html (2020)
  position: absolute; を指定すると border の枠線が一部消えることがある。
  background-clip: padding-box; を入れると枠線が表示される。
  Firefox や IE11 の table で postion: absolute; を使ったときに起こる。 Chrome や Edge83 では起こらない。

関連

• CSS JavaScript