テクノロジー

CSSで最近よく使うようになったテクニック

Tags:
Written by Kishimoto

CSSは本当に面白いですよね(`・ω・)
そこで今回は、よく使うようになったCSSテクニックを2つご紹介します!

backface-visibilityはかなり便利なので、ナビゲーションの動作とかで重宝してます!!

CodePenでサンプルも載せているので、参考になれば幸いです。

電話番号のリンクをモバイルサイズ時のみにする

// min-widthの幅は切り替えたい数値に合わせてください。
@media (min-width: 769px) {
    .tel-link {
        pointer-events: none;
    }
}

#サンプル


backface-visibility

ナビゲーションとかポップアップのときとかに便利です。

CSS の backface-visibility プロパティは要素の裏面がユーザに面したときに、裏面を可視にするかどうかを決めます。要素の裏面は常に透明な背景を持ち、可視ならば表面の鏡像を表示します。

(2 つの要素を交互に使って)カードを裏返す効果を使う場合のように、要素の裏面から表面が見えてほしくない場合があります。

このプロパティは 遠近感 (perspective) のない 2D の 変換 (transforms) には効果を及ぼしません。

参考:backface-visibility – CSS: カスケーディングスタイルシート | MDN

.sample {
    opacity: 0;
    visibility: hidden;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    transition: 500ms ease-in-out;
}

.sample.active {
    opacity: 1;
    visibility: visible;
}

#サンプル

株式会社MIRAIでは、Webマーケティング・コンサルティングから
ホームページ制作・動画制作など、様々なご相談を承っております。

お仕事のご依頼・ご相談はこちら