• すべて

    タブ×Slickの基本

    まずは構造を最小で確認。

  • すべて

    表示崩れの原因

    display:none で幅が0扱いになる話。

  • すべて

    今回の回避策

    visibility + opacity + height:0

  • すべて

    setPositionの使い所

    最終保険として使う方法。

  • すべて

    レスポンシブ設定

    slidesToShow を切り替える。

  • UIパーツ

    タブ切り替えUI

    ボタンをピル型にすると今っぽい。

  • UIパーツ

    カード型リスト

    角丸＋薄影で読みやすく。

  • UIパーツ

    スライダーの余白

    slick-slide padding で隙間作る。

  • UIパーツ

    ドットの見た目

    slick-themeをベースに微調整。

  • CSS小技

    display:noneを避ける

    レイアウト計算を壊さない隠し方。

  • CSS小技

    フェード切り替え

    opacity transition で自然に。

  • CSS小技

    タブの横スクロール

    SPで詰まるときに便利。

  • 不具合対処

    Slickが崩れる

    非表示状態で初期化しない。

  • 不具合対処

    切替後に再計算

    setPosition / refresh を使う。

  • 不具合対処

    横幅が0になる

    display:none が原因になりがち。