🎨

【まとめ】CSS で忘れがちだけど時々使いたくなるものや、使えそうなもの

2022/12/10に公開約2,600字

一行の長い文字列を省略

https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

複数行の長い文字列を省略

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

一行の文字列の両端揃え (text-align-last)

https://developer.mozilla.org/ja/docs/Web/CSS/text-align-last

text-align: justify だと 1 行のとき両端揃えにならないが text-align-last でいける
(text-align: justify と同じことが最終行にだけ適用されるため)

th {
    text-align-last: justify;
}

上下左右中央に配置する

gridflex で微妙に挙動が違う.

子要素ひっくるめて中央配置

https://developer.mozilla.org/ja/docs/Web/CSS/place-content

place-contentalign-content, justify-content の一括指定

.container {
    display: grid;
    place-content: center;
}

子要素ごとに中央配置

https://developer.mozilla.org/ja/docs/Web/CSS/place-items

align-items, justify-items の一括指定できる place-items があるが, これだとダメ.
align-items: center, justify-content: center の一括指定がほしいけど存在しない...

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

スクロールをスムーズにする (scroll-behavior)

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

これまで JS で実装していたスムーズなスクロールが CSS だけでいける

html {
    scroll-behavior: smooth;
}
  • スクロール位置は scroll-margin-* で調整できる
header {
    height: 60px;
}

section {
    scroll-margin-top: 60px;
}

スクロール連動を防ぐ

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior

スクロール領域の境界に達したとき、外側のスクロールまでもスクロールされるのを防ぐ

nav {
    overscroll-behavior: contain;
}

画像に効果をつける (filter)

https://developer.mozilla.org/ja/docs/Web/CSS/filter

  • blur(*px) : ぼけ
  • brightness(*) : 明るさ(線形乗算) 0:黒, 1:効果なし, 2:明るさ2倍
  • contrast(*) : コントラスト 0:灰色, 1: 効果なし, 2:コントラスト2倍
  • drop-shadow(*) : ドロップシャドウ
  • grayscale(*) : グレースケール 0:効果なし, 0.5: 50%グレースケール, 1:完全なグレースケール
  • hue-rotate(*deg) : 色相変換
  • invert(*) : 反転 0:効果なし, 0.5: 50%反転, 1:完全な反転
  • opacity(*) : 透過 0:完全に透過, 0.5: 50%透過, 1:効果なし
  • saturate(*) : 透過 0:彩度なし, 0.5: 50%彩度, 1:効果なし, 2:彩度2倍
  • sepia(*) : セピア 0:効果なし, 0.5: 50%セピア, 1:完全なセピア

背景が透明な画像にドロップシャドウ

box-shadow だと要素につくが、filterdrop-shadow を使えば, 背景が透明な画像にも影をつけられる.

img {
    filter: drop-shadow(4px 4px 8px black);
}

要素の背後に効果をつける (backdrop-filter)

https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter

filter と同じ関数がつかえる.

すりガラス表現

背景色は半透明にする必要がある.

.message {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    padding: 40px 60px;
}

Discussion

ログインするとコメントできます