JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ

• 作成：2016/07/19
• Web制作

JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。

メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。

※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。

モーダルウィンドウ

チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク（#シャープ）にスタイルを適用しモーダルウィンドウを表示しています。

.foo:target {
  color: red;
}

:target擬似クラスを利用すれば、JavaScriptを使わずライトボックス・タブや画像の切り替えなどが行えます。

:target 擬似クラスはある要素の表示・非表示の切り替えにも便利です。この方法で JavaScript を使わず、CSS だけで lightbox を作れます。:target - CSS | MDN

• Modal
• CSS Modal :target Selector

フリップ

こちらも:target擬似クラスを利用して、要素を回転表示させるrotate()を適用し、クリック時に奥側にフリップ（弾かれるような）回転するような動きを出してます。

.foo:target {
  transform: rotateX(90deg);
}

:target擬似クラスとCSSアニメーションを組み合わせれば、様々なエフェクトを作り出すことができます。

3d flip button

フルスクリーン スライド

vhはviewport heightの略で、親要素ではなく、ビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。

全体を以下のように縦横をフィットさせています。

{
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

Ken Burns Effect fullscreen

スクロールと画像

sectionごとに背景画像を指定し、スクロールで背景画像を変化させるエフェクト。色は要素を重ねた時の見え方を変更できるmix-blend-modeを使ってオーバーレイさせてます。

section {
  background-size: cover;
  mix-blend-mode: overlay;
  background-attachment: fixed;
}

Smooth hue rotation on scroll

Gooey

粘性のあるようなエフェクトもCSSのみで表現可能。チェックボックス（type="checkbox"）を利用。ユーザが要素をクリックすると変化する擬似クラスの:checkedに対して、要素の表示位置を移動させるtranslate()を適用して動かしてます。

Gooey Menu

グリッチ

アニメーションの流れを制御する@keyframesを使って動かしてます。transformプロパティのskew()でじょじょに傾斜変形させてユニークな動きを演出。

Glitch Effect

squiggly

殴り書きのような曲がりくねったフォントが、クネクネと永続的に動きます。こちらも上と同じく@keyframesによって動かしてます。

Squiggly Text

フロートラベル

フォーカスするとテキストボックスの中にあるラベルが消えず、浮くように上部に移動します。ソース内で使われている:validは擬似クラスでバリデーションの状態を示します。

:valid CSS 疑似クラス は、その内容がバリデーションにより type 属性の設定に従い正しく入力されている任意のinput要素にマッチします。これは入力内容の書式が正しい場合にその要素に異なるスタイルを適用し、ユーザに誤りがない事を伝えるのに役立ちます。:valid - CSS | MDN

Floating labels

マップマーカー

こちらはマップに使えそうなマーカー。繰り返し回数を設定するanimation-iteration-countプロパティにinfiniteを指定し、無限に動かしてます。

Map marker

• 6
• 7
• 1
• 22

2014/12/1

[続編] 効率的になった！最近のサイトで使われていたCSS小技集

前回（あのサイトでさりげなく使われていたCSS小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりとCSSのみ

2015/03/2

Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ

今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取

2013/02/25

そうとう楽！WEB制作、ビジネスを助ける「テンプレート」まとめ

急に仕事をふられたけど いちから作っている時間はない だけど、素早く「それなり」に見せたい 見ているだけでデザインの参考になりそうなテンプレートや、無駄な作業

2015/05/25

Webデザイナーやフロントエンドが「独り立ち」できるビジネス向け技術書11選

今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。 実際にどういった本が