スタイルシートCSSの備忘録

スクロールバーのデザインを変更

「webkit」を採用しているブラウザのみ対応。

::-webkit-scrollbar{
    width: 10px; /* 縦軸のスクロールバーの幅 */
    height: 10px; /* 縦軸のスクロールバーの幅 */
}
::-webkit-scrollbar-track{
    background-color: #ccc; /* スクロールバーのツマミの背後の背景色 */
}
::-webkit-scrollbar-thumb{
    background-color: #999; /* スクロールバーのツマミの背景色 */
}

position:stickyが効かないケース

• 親の要素が「overflow:scroll」の場合
• 親の要素が「overflow:hidden」の場合
• そもそもブラウザがposition:stickyに対応していない

スタイルの強制適用 !important

「!important」がついているプロパティを最優先して使用される。

はみ出したテキストを「…」で省略

下記プロパティを使用

text-overflow: ellipsis;
white-space: nowrap;

チェックボックスのトグル化

画像のエフェクト

フェードイン／スライドイン

ページをスワイプすると、ぴたりとコンテンツが切り替わる

<div class="container">
    <div class="section">コンテンツ１</div>
    <div class="section">コンテンツ２</div>
    <div class="section">コンテンツ２</div>
    ...
</div>

.container {
    scroll-snap-type: y mandatory;
}
.section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

スムーズスクロール

html {
    scroll-behavior: smooth;
}

コンテンツの中央揃え（縦横）

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