🎨
【まとめ】CSS で忘れがちだけど時々使いたくなるものや、使えそうなもの
一行の長い文字列を省略
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
複数行の長い文字列を省略
p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
一行の文字列の両端揃え (text-align-last)
text-align: justify だと 1 行のとき両端揃えにならないが text-align-last でいける
(text-align: justify と同じことが最終行にだけ適用されるため)
th {
text-align-last: justify;
}
上下左右中央に配置する
grid と flex で微妙に挙動が違う.
子要素ひっくるめて中央配置
place-content は align-content, justify-content の一括指定
.container {
display: grid;
place-content: center;
}
子要素ごとに中央配置
align-items, justify-items の一括指定できる place-items があるが, これだとダメ.
align-items: center, justify-content: center の一括指定がほしいけど存在しない...
.container {
display: flex;
align-items: center;
justify-content: center;
}
スクロールをスムーズにする (scroll-behavior)
これまで JS で実装していたスムーズなスクロールが CSS だけでいける
html {
scroll-behavior: smooth;
}
- スクロール位置は
scroll-margin-*で調整できる
header {
height: 60px;
}
section {
scroll-margin-top: 60px;
}
スクロール連動を防ぐ
スクロール領域の境界に達したとき、外側のスクロールまでもスクロールされるのを防ぐ
nav {
overscroll-behavior: contain;
}
画像に効果をつける (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 だと要素につくが、filter の drop-shadow を使えば, 背景が透明な画像にも影をつけられる.
img {
filter: drop-shadow(4px 4px 8px black);
}
要素の背後に効果をつける (backdrop-filter)
filter と同じ関数がつかえる.
すりガラス表現
背景色は半透明にする必要がある.
.message {
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
padding: 40px 60px;
}
Discussion