動くCSSのためのメモ。

なんだかCSSでできる事がどんどん増えてきましたね。以前はJavaScriptを使って実装していた動くコンテンツも、CSSだけで表現されてるのをよく見ます。そんなわけで、ここいらで、CSSで動かすエフェクトについて、まとめてみたいと思います:)

※この記事を書いてる時点の最新ブラウザは以下の通り。また、記事の内容は、PCでの閲覧を想定してます。

  • Microsoft Internet Explorer 11.0
  • Mozilla Firefox 28.0
  • Google Chrome 34.0
  • Apple Safari 7.0

マウスオーバー(ホバー)エフェクト

ボタンや画像にカーソルを乗せた時の反応って大事ですよね。
リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)

:hoverを使ってスタイルを指定しておけば、カーソルが乗った時には、そのスタイルが適用されます。
けどそれだけだと、カチッと切り替わるだけ。

フェードでふわっと切り替わる

サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字の色が切り替わるスピードと、下線が消えてくスピードを調整することで、ふわっとした感じになります:)

切り替わるスピードを調整するにはtransitionプロパティを使います!
下記のように書くと、a要素でのcolorプロパティの値の変化の仕方を指定することができます。下記は「0.3秒かけていい感じで切り替わる」という指定。

  1. a {
  2. transition: color 0.3s ease 0s;
  3. }

transitionの値は左から順に、propertydurationtiming-functiondelayを表してて、上の例を個別に指定するなら、下記のようにも書けます。

  1. a {
  2. transition-property: color;
  3. transition-duration: 0.3s;
  4. transition-timing-function: ease;
  5. transition-delay: 0s;
  6. }

初期値を省略して、下記だけでもよいです:)

  1. .txt a {
  2. transition: color 0.3s;
  3. }

transitionの4つのプロパティは、それぞれ以下の役割と、初期値を持ってます。


transition-property
効果を適用したいプロパティ名を指定します。初期値は「all」すべてのプロパティに適用します。

transitionを適用できるプロパティは、プロパティの値を数値で表現できるものすべて。colorの値に使われるredlightSeaGreenなどの色名も、RGBなどの数値で表すことができるのでちゃんと適用されます。

transition-duration
変化の開始から完了までにかかる時間を、秒数で指定します。初期値は「0s」カチッと切り替わります。
1秒(1000ミリ秒) = 1s1000ms
transition-timing-function
変化の仕方(イージング)を指定します。初期値は「ease」ゆっくり始まってゆっくり終わる、一番いい感じのイージングです。
他にlinearease-inease-outease-in-outが用意されてます。
cubic-bezier関数を使えばオリジナルなイージングを作ることもできます。詳しくはこちらの記事を参照のこと。
transition-delay
変化を開始するまでの待ち時間を、秒数で指定します。初期値は「0s」すぐに変化を開始します。
マイナスの値を指定すると、その分進んだ時点から変化を開始します。詳しくは後述

下線も同じようにtext-decoration-colortransitionさせたいところですが、text-decoration-colorプロパティはまだ対応ブラウザが少ないみたいなので、下線はtext-decorationじゃなくてborder-bottomで表示することにしました(2014年4月現在)
border-colorを、カーソルが乗る前は「rgba(32,178,170,1)(みどり)」、カーソルが乗った時は「rgba(105,92,92,0)(あかい透明)」となるように指定しました。
文字色と下線の色、ひとつの要素内で複数のプロパティをtransitionさせるには、transitionの値を、プロパティごとに「,(カンマ)」区切りで続けて書きます。ここでは、前述のtransitionborder-colorを追記しました。

  1. .txt a {
  2. border-bottom: 1px solid rgba(32,178,170,1);
  3. text-decoration: none;
  4. transition: color 0.3s, border-color 0.3s;
  5. }
  6. .txt a:hover {
  7. border-color: rgba(105,92,92,0);
  8. }

#20b2aaという16進数の値から、rgba(32,178,170,1)みたいなRGB値に変換するのには下記ページを利用しましたよ;D

16進数形式をRGB,RGBAに変換するだけ - jsdo.it

目次に戻る

画像ボタンもふわっとする

画像ボタンの構造

画像ボタンやバナーの場合は、<img>を包む<a>の背景画像にマウスオーバー時の画像を指定して、<img>のopacityを徐々に変化させれば、ふわっと切り替わったように見えます:)

ふわっとカチッする

CSSで作ったボタンなら、background-colorbox-shadowなど、いじれるプロパティがいっぱいあるので、ふわっとさせ甲斐がありますねー!まとめてtransitionを指定すれば、より魅力的な変化を表現できます。

ボタンの仕組み

上の例では、ボタンの地色background-color、文字色color、側面と影の色と縦幅box-shadow、ボタンの上下位置transformを、徐々に変化させてます。

また、カーソルを乗せた時にはゆったり動いてますが、マウスを押下した時にはちょっと早めに動くようにしてます。ここでは、durationの値を、下記のように変えています。

  1. .btn a {
  2. /* 略 */
  3. -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
  4. transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  5. }
  6. .btn a:active {
  7. transition-duration: 0.1s;
  8. }

<a>に対して指定したtransitionの値を、active時にtransition-durationの値のみ上書きしてるんですねー。これだけで、マウスを押下した時は0.1秒で変化して、それ以外のときは0.3秒で変化するようになります。

目次に戻る

発光する

ピカッとしっぱなし

カーソルを乗せた時に一瞬ピカッとか、キラッとか、発光するボタンが作りたいという時、transitionだと「一瞬ピカッとする」まではできますが、そこからもとの明るさに戻るっていうのができません…。

こんな時にはanimationというプロパティが使えます。ピカッと感が出ましたね!

animationプロパティ

まずは8〜9行めのanimationプロパティについて。

  1. /* 略 */
  2. -webkit-animation: flash 1s;
  3. animation: flash 1s;
  4. }

animationプロパティにはnamedurationtiming-functiondelayiteration-countdirectionplay-statefill-modeの8つの値が指定できます。durationtiming-functiondelaytransitionにもありましたね。

それぞれ、以下の役割と初期値を持ってます。


animation-name
適用したいアニメーション名を指定します。初期値は「none」何も指定されてません。
詳しくは@keyframesルールの項を参照。
animation-duration
アニメーションの一回分の長さを、秒数で指定します。初期値は「0s」アニメーションしません。
animation-timing-function
アニメーションの仕方(イージング)を指定します。初期値は「easetransitionと同様)
animation-delay
アニメーションを開始するまでの待ち時間を、秒数で指定します。初期値は「0s」すぐにアニメーションを開始します。
マイナスの値を指定すると、その分進んだ時点からアニメーションを開始しますtransitionと同様)
animation-iteration-count
アニメーションを繰り返す回数を指定します。初期値は「1」1回だけ再生します。
infinite(無限)」という指定もできます。
animation-direction
animation-iteration-countで2回以上に指定した場合に、アニメーションを折り返すか、始めに戻すかを指定します。初期値は「normal」同じアニメーションを繰り返します。
alternate」とすると、偶数回めのアニメーションが逆再生します。
reverse」とすると、逆再生が繰り返され、「alternate-reverse」とすると、奇数回めのアニメーションが逆再生になります。
animation-play-state
アニメーションを再生させたり一時停止させたりできます。初期値は「running」再生する状態です。
paused」と指定すると、一時停止の状態になります。
animation-fill-mode
アニメーションする前と後に、適用するスタイルを指定します。初期値は「none」アニメーションしてるとき以外に、スタイルは適用されません。詳しくは後述

animationプロパティにまとめて指定する場合は、半角スペースを空けて、下記みたく連ねて書くこともできます:)

  1. p {
  2. animation: name ease-in-out 2s 1s 5 alternate running forwards;
  3. }

順番は自由だけれど、ひとつだけ、durationdelayの順番だけは「durationが先」と決まってるので注意です。
上記の場合なら、1秒待ってから2秒かけてアニメーションすることになります。

@keyframesルール

アニメーション」は、別途@keyframesルールという、キーフレームを定義するための特別な構文を使って用意します。ここで定義したアニメーション名が、animation-nameで指定する値として使えるって寸法です。

  1. @-webkit-keyframes flash {
  2. 0% { background-color: #20b2aa; }
  3. 10% { background-color: #96e9e6; }
  4. 100% { background-color: #20b2aa; }
  5. }
  6. @keyframes flash {
  7. 0% { background-color: #20b2aa; }
  8. 10% { background-color: #96e9e6; }
  9. 100% { background-color: #20b2aa; }
  10. }

@keyframesに付くベンダープレフィックスは、「頭」じゃなくて、「@」の後なのでご注意。

ピカッとするキーフレーム

@keyframesでは、アニメーションの開始から完了までをパーセントで区切って、各時点でのスタイルを指定していくという方法で、アニメーションを定義します。
開始時点が0%、完了時点が100%で、その間は任意の時点を追加できます。

ここでは、開始時点では元の色のままで、開始から10%進んだ時点で明るくなって、完了時点でまた元の色に戻る、というアニメーションを「flash」という名前で定義しました。
animation: flash 1s;」とは、このflashを1秒かけて再生する、ということです。
なので、この場合10%時点は0.1秒進んだ時点ということになりますね。

目次に戻る

目次に戻る

アニメーションの前後に適用されるスタイルanimation-fill-modeについて

初期値noneの状態だと、アニメーション完了後には、もともとその要素に指定していたスタイルが適用されます。
下のサンプルでは、background-colorに緑色が指定してあるp要素に、カーソルを乗せると1秒かけて赤色にグラデーションするgradationというアニメーションを適用しています。

  1. p {
  2. background-color: lightSeaGreen;
  3. }
  4. p:hover {
  5. animation: gradation 1s;
  6. }
  7. @keyframes gradation {
  8. 0% { background-color: lightSeaGreen; }
  9. 100% { background-color: indianRed; }
  10. }

カーソルを乗せてみると、アニメーションが終わった瞬間、緑色に戻っちゃいました…!
これを回避するには、下記のように:hoverに別途、完了後のスタイルを指定すればよいです。

  1. p:hover {
  2. background-color: indianRed;
  3. animation: gradation 1s;
  4. }

けれど、animation-delayでアニメーションの開始を遅らせた場合、まず:hoverで指定したスタイルが適用されてから、アニメーションが開始するため、変なんなっちゃいます…。

  1. p:hover {
  2. background-color: indianRed;
  3. animation: gradation 1s .5s;
  4. }

そんな時に使えるのがanimation-fill-modeプロパティ;D
値に「backwards」と指定すれば、animation-delayでアニメーションが始まるまで待ってる間も、アニメーション開始時のスタイルを優先して適用してくれます。

  1. p:hover {
  2. background-color: indianRed;
  3. animation: gradation 1s .5s;
  4. animation-fill-mode: backwards;
  5. }

forwards」はその逆で、アニメーション完了時のスタイルが、アニメーション完了後も適用され続けます。
この指定をすれば:hoverに、別途、完了後のスタイルを指定する必要がなくなりますね:D

  1. p:hover {
  2. animation: gradation 1s .5s;
  3. animation-fill-mode: forwards;
  4. }

both」はその両方。@keyframesで指定したスタイルが優先して適用されるようになります。
下のサンプルでは、p要素のbackground-colorをグレーに指定してますが、カーソルを乗せた時には、緑色から赤色へのグラデーションが再生されます。

  1. p {
  2. background-color: gainsboro;
  3. }
  4. p:hover {
  5. animation: gradation 1s .5s;
  6. animation-fill-mode: both;
  7. }

animation-fill-modeの値の役割をまとめてみると下図みたいな感じです!
使いどころに合わせて、効率的に使いたいですねー;)

animation-fill-modeのまとめ

目次に戻る

詳細はあとから表示する

最初は表示されてないんだけど、サムネイル画像の上にカーソルを乗せると、その画像に関する情報が表示されるような、そんなUIよくありますね。
ごちゃごちゃした情報は見たい時だけ、最初の見た目が煩雑にならずにシンプルなデザインにできるので、フラットなデザインとも相性がいいんですよね:)
下のサンプルみたいなの、よく見る気がします:D

そんなわけで、左から順に仕組みメモです。
サムネイル画像部分のHTMLはそれぞれ下記のようになってます。

  1. <ul class="details">
  2. <li>
  3. <img src="http://placehold.it/200x180/20b2aa/ffffff&text=image">
  4. <dl>
  5. <dt>Placehold.it</dt>
  6. <dd>この画像は「Placehold.it」で生成されるダミー画像を使用しています。</dd>
  7. <dd><a href="http://www.placehold.it/" target="_blank">Placehold.it</a></dd>
  8. </dl>
  9. </li>
  10. <!-- 略 -->
  11. </ul>

<li>の中に、img要素(サムネイル画像)と、dl要素(詳細情報)が並んでる状態ですね。

下からニュッと出る

普段は画像の下に隠れてる

詳しい情報は画像の下に隠しておいて、カーソルが乗ったら下からスッとスライドする仕組み。

まずはli要素にposition: relativeを指定。これで、li要素が、その小要素を絶対配置するときの基準になります。dl要素にposition: absoluteを指定しtop: 0とすれば、img要素の上に重なった状態で配置されます。

dl要素の上下のスライドはtransformプロパティtranslateで移動させてます。
最初の状態では、dl要素にtranslateY(100%)と指定。これで、その要素の高さ分、下方向に移動します。カーソルが乗ったときはtranslateY(0)として、元の位置に戻します。

目次に戻る

くるんと裏返る

まるで一枚のカードみたく、写真の裏面に詳細情報が載ってるような表現です。

上述と同じように、position: absoluteでimg要素とdl要素を重ねて配置。
最初の状態では、dl要素は裏返ってる状態なので、rotateX()を使ってX軸を中心に上下に回転させておき、カーソルが乗った時に、img要素とdl要素を同時に+180°回転させてます。

  1. .type2 dl {
  2. background-color: #cd5c5c;
  3. -webkit-transform: rotateX(-180deg);
  4. transform: rotateX(-180deg);
  5. }
  6. .type2:hover img {
  7. -webkit-transform: rotateX(180deg);
  8. transform: rotateX(180deg);
  9. }
  10. .type2:hover dl {
  11. -webkit-transform: rotateX(0);
  12. transform: rotateX(0);
  13. }

カーソルが乗った時に<img><dl>を、同じタイミングで回転させる事で、一枚のカードのように見せてるんですねー。

普段は画像の裏側に隠れてる

裏返る演出で大事なのがbackface-visibilityというプロパティ。このプロパティにhiddenと指定した要素は、裏返った時に不可視状態になります。

backface-visibilityで裏側だと判断されるのは、transformプロパティのrotateX()rotateY()で、90°以上回転した時。下図は、左が「表面の要素のみ」真ん中が「裏面の要素のみ」になってます。表面が裏返ると不可視状態になり、その瞬間に裏面が可視状態になってるのがよくわかりますねー。

この指定がないと下図のように、裏側も丸見え、というか、裏面が表面の上に乗っちゃってます。

backface-visibilityについて詳しくは下記サイトを参照のこと。

backface-visibility - CSS | MDN

あと、回転する要素の親要素には、perspectiveプロパティを指定してます。

  1. .type2 {
  2. overflow: visible;
  3. -webkit-perspective: 1000px;
  4. perspective: 1000px;
  5. }

perspectiveは、遠近感を指定することができるプロパティ。指定する値は、その要素を見ている視点の位置を表してて、ここでは、1000px離れた所で見てる感じになります。

100px離れたとこからみてる人と、1000px離れたとこからみてる人

つまり、この値が小さい(近い)ほど遠近感が強く、大きい(遠い)ほど遠近感が緩くなるってことですね:)
この指定がないと、立体感がなくなって、裏返ったのか縦に縮んだのかわからなくなっちゃいます…。

perspectiveについては下記記事が詳しいです。

HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) | Developers.IO(2012.12.27)

目次に戻る

左右から背景が出てくる

パネル状の背景が左右から入ってきて、カーテンを閉めるように中央でピッタリ閉じられると、詳細情報がフェードインしてきます。

左右から出てくる背景は::before疑似要素::after疑似要素で表示させてます。
疑似要素を使うと、指定した要素の中に、新たに要素を追加できちゃいます。
ただし、要素を追加するにはもうひとつ、contentプロパティというのも使わなきゃいけません。下記みたく書きます。

HTMLには「 / 」と出力するだけのp要素がひとつ、なのにPREVIEWを見るとテキストが表示されてますね!
こんな感じで、疑似要素とcontentプロパティを使えば、HTMLで書かれた要素とは別に、CSSで新たに要素を作れちゃうんです(擬似的に!):D
::beforeは、指定した要素の開始タグの直後に、::afterは、指定した要素の閉じタグの直前に、要素を追加します。※Chromeとかで「要素の検証」をしてみても確認できますよ;)

左右から出てくる背景は、dl要素内に、::before::afterで2つの要素を追加してたわけです(擬似的に!:D

疑似要素で作る疑似背景

他にももっといろんなプロパティと組み合わせればトリッキーな演出だってできちゃいます。
下記サイトでいろんなエフェクトが紹介されてます。どれも素敵ですねーXD

Circle Hover Effects with CSS Transitions | Codrops(2012.8.8)

目次に戻る

タブコンテンツ

タブボタンをクリックすることで、表示する内容を切り替えるタブコンテンツも、CSSだけでできちゃう時代です:)
CSSで切り替えを行うためには、ちょっとした下ごしらえが必要なので、まずはその仕組みについてまとめてみます。

CSSで切り替える仕組み

そんなわけで、下の仕組みがよくわかるサンプルのソースコードを見ながら要点を解説です。

HTML

まずはタブボタンと、それに付随するコンテンツを設置します。

  1. <ul class="tabBtn">
  2. <li><label for="tab-1">タブ1</label></li>
  3. <li><label for="tab-2">タブ2</label></li>
  4. <li><label for="tab-3">タブ3</label></li>
  5. <li><label for="tab-4">タブ4</label></li>
  6. <li><label for="tab-5">タブ5</label></li>
  7. </ul>
  8. <div class="tabContents">
  9. <section>タブコンテンツ1</section>
  10. <section>タブコンテンツ2</section>
  11. <section>タブコンテンツ3</section>
  12. <section>タブコンテンツ4</section>
  13. <section>タブコンテンツ5</section>
  14. </div>

タブボタンに<label>を使うのがポイント:)
次に、コンテンツを切り替えるスイッチの役割となる<input type="radio">(ラジオボタン)を5つ、上記ソースコードの手前に設置します。

  1. <input type="radio" name="switch" id="tab-1" checked>
  2. <input type="radio" name="switch" id="tab-2">
  3. <input type="radio" name="switch" id="tab-3">
  4. <input type="radio" name="switch" id="tab-4">
  5. <input type="radio" name="switch" id="tab-5">

name属性の値を統一して、ラジオボタンをひとつのグループに(ここではswitchに)。それから<input>id属性の値を、<label>for属性の値と同じにして、タブボタンとラジオボタンを関連付けます。
一番めの<input>にはcheckedを付けて、初期状態では「タブコンテンツ1」が開いているようにしておきます。
以上で下ごしらえ完了!

CSS

そして、以降の指定が、コンテンツの表示/非表示を切り替えるための仕組みの部分になります。
まずは、タブボタンを切り替えた時の、ボタンのスタイルを指定します。

  1. #tab-1:checked ~ .tabBtn li [for="tab-1"],
  2. #tab-2:checked ~ .tabBtn li [for="tab-2"],
  3. #tab-3:checked ~ .tabBtn li [for="tab-3"],
  4. #tab-4:checked ~ .tabBtn li [for="tab-4"],
  5. #tab-5:checked ~ .tabBtn li [for="tab-5"] {
  6. background-color: #cd5c5c;
  7. }

一番上の行を分解して見ると。

#tab-1:checked
チェックされている「id属性がtab-1の要素」
~ (チルダ)
それ以降にある同じ階層の要素(兄弟要素)
.tabBtn li [for="tab-1"]
class="tabBtn"の要素の中の「for属性がtab-1の要素」

つまり、チェックされている「id属性がtab-1の要素」と同じ階層にあるclass="tabBtn"の要素の中の「for属性がtab-1の要素」background-color: #cd5c5cを指定する(背景色を赤くする)って事になります。
要するに「1つめのラジオボタンがチェックされてる時は、1つめのタブボタンを赤くする」ということ。

1つめのタジオボタンがcheckedの時は、1つめのラブボタンの色が変わる

タブボタンを切り替えた時のコンテンツのスタイルもタブボタンと同じ要領で、チェックされている「id属性がtab-1の要素」と同じ階層にあるclass="tabContents"の要素の中の「ひとつめのsection要素」というように、タブコンテンツを特定します。

  1. .tabContents section {
  2. opacity: 0.1;
  3. text-align: center;
  4. }
  5. #tab-1:checked ~ .tabContents section:nth-child(1),
  6. #tab-2:checked ~ .tabContents section:nth-child(2),
  7. #tab-3:checked ~ .tabContents section:nth-child(3),
  8. #tab-4:checked ~ .tabContents section:nth-child(4),
  9. #tab-5:checked ~ .tabContents section:nth-child(5) {
  10. opacity: 1;
  11. background-color: #fff;
  12. }

チェックされていない時は透明(ここでは仕組みが見えるように半透明)にしておき、チェックされたボタンを不透明にすることで、表示/非表示が切り替わるというわけです。

目次に戻る

目次に戻る

アニメーションして切り替わる

タブコンテンツにコンテンツを入れてみました;)

タブコンテンツも、前述のボタンの時みたく、「transition」を使って切り替わり方をアレンジすれば、印象的な表現ができちゃいますよ。

スライドして切り替わる

タブボタンの切り替えに合わせて、<div class="tabContents">の位置を上下にズラせば、スクロールコンテンツみたいなものもお手のもの。

タブボタンに対応するタブコンテンツの位置

上図のように、あらかじめtransform: translateY()で、タブボタンに対応するコンテンツの位置を指定しておきます。例えば下記なら、「タブ2」がチェックされてる時には、.tabContentsを上へ20%ズラす、ということ。.tabContents全体の高さを100%とした20%分。

  1. #tab-2:checked ~ .tabContents {
  2. -webkit-transform: translateY(-20%);
  3. transform: translateY(-20%);
  4. }

これをタブコンテンツ分(このサンプルでは5つ)用意し、transitionを適用すれば、上下にスライドしながらコンテンツが切り替わるようになります。

あれれ…、タブコンテンツがタブボタンの上に被さってタブボタンが押せなくなっちゃう…X(。。

タブボタンをタブコンテンツより手前の階層に

こんな時は.tabBtnz-indexを指定して、手前に配置すれば安心。

z-indexpositionプロパティstatic以外の値が指定してある要素でないと効果がないので、position: relativeも一緒に指定。

  1. .tabBtn {
  2. position: relative;
  3. z-index: 1;
  4. }

無事タブボタンが押せるようになりました:D

目次に戻る

横にスライドして切り替わる

タブコンテンツを横並びにして、transform: translateX()で横へズラせば、横スライドもお手のもの。

.tabContentsの横幅20%分ずつスライドする

.tabContentsの横幅をウィンドウ幅5つ分(500%)にして、その中にタブコンテンツを横並びにします。そのままだとスクロールバーが出てしまうので、全体を包む<div id="wrapper">overflow: hiddenを指定して、スクロールバーを出さないようにすればできあがり。

目次に戻る

表示モード切り替え

ここまではいくつかのコンテンツをタブボタンで切り替えてましたが、タブボタンのON/OFFで、同一コンテンツのスタイルを変えるようにすれば、表示モード切り替えみたいな事もできます。

ここでは、「画像とテキスト全部入りのレイアウト」、「画像が主役のレイアウト」、「テキストのみのレイアウト」の3タイプの表示モードを、タブボタンで切り替えてます。

下記のような記述で、各モード専用のスタイルを用意しておけば、チェックされているタブボタンに合わせて、指定したスタイルが適用される仕組みです。※該当CSSは100行め〜

  1. #normalList:checked ~ .menu elements {
  2. /* 全部入り用のスタイル */
  3. }
  4. #imageList:checked ~ .menu elements {
  5. /* 画像が主役用のスタイル */
  6. }
  7. #textList:checked ~ .menu elements {
  8. /* テキストのみ用のスタイル */
  9. }

アニメーションを加える

上のサンプルだと、transitionを指定してる所だと、前のモードのスタイルがちょっと見えちゃったり、モードの切り替わり方がちょっとかっこわるいですよね…。
下記のようにアニメーションを定義して、タブボタンが:checkedになった時に一度だけ再生するようにしてみます。モードが切り替わったときに、ちょっと間を置いてからフェードインする感じです。

  1. @keyframes fadeIn {
  2. 0% { opacity: 0; }
  3. 30% { opacity: 0; }
  4. 100% { opacity: 1; }
  5. }

このアニメーションをコンテンツに適用します。※該当CSSは5〜6行め

ページが開いた時に一度だけフェードインしますが、タブボタンで切り替える時には、アニメーションが再生されません…X(。。
:checkedされるタブが切り替わっても「fadeIn」というアニメーションはすでに再生された後なので、それ以上は再生されないみたいです…。
そこで、下のサンプルでは、同じアニメーションを各タブ用に3つ用意して、各タブごとに違うアニメーションを指定してみます。※該当CSSは4〜15行め

:checkedされるタブが変わる度に再生するアニメーションも切り替えることで、タブを切り替える度にアニメーションが再生されるようになりましたね:D

目次に戻る

スライドショー

表示を切り替える仕組みは前述のタブコンテンツと全く同じ。
だけど、タブボタンの代わりに、左右の矢印ボタンでコンテンツを切り替えるようにしてます。
まずは、矢印ボタンとして機能させるための仕掛けについてまとめます。

矢印ボタンの仕組み

矢印ボタンはそれぞれ、左矢印が戻る用(コンテンツを右方向にスライド)、右矢印が送る用(コンテンツを左方向にスライド)となっていて、例えば、1つめのコンテンツが表示されている時に右矢印ボタンをクリックすると、2つめのコンテンツまでスライドし、そこからさらに右矢印ボタンをクリックすると、3つめのコンテンツまでスライドします。
コンテンツは、タブコンテンツの時と同じように、全コンテンツを包む.slideContentsをスライドさせてます。

コンテンツがスライドするイメージ

1つめのコンテンツが表示されている時の右矢印ボタンは#switch2をチェック、2つめのコンテンツが表示されている時の右矢印ボタンは#switch3をチェックするってこと。クリックする度にターゲットが変わるわけですねー。
とはいえCSSでは、for属性だけ書き換えるとかできないので、最初からすべてのlabel要素を用意しておき、クリックする度にCSSで出し分けるようにします。

HTML

構造はタブコンテンツのものとほぼ同じですが、タブボタンの代わりに、左右の矢印ボタンを設置します。p要素の中にlabel要素を5つ並べたものを、2つ設置します。

左右の矢印の構造とそのソースコード

CSS

pointer-eventsプロパティの値をnoneに指定すると、その要素のリンククリックイベント動的な疑似クラスの操作などのマウスイベントを無効にすることができます。※初期値はautoで、操作が有効の状態。※動的な疑似クラスってのは:hoverとか:actionのこと。
これを使って、label要素のマウスイベントを一旦、無効にしておきます。

  1. .arrow label {
  2. pointer-events: none;
  3. }

下記のように、チェックされたラジオボタンのid属性と、label要素のfor属性が、順繰りになるように、ラジオボタンの状態に合わせて、label要素のマウスイベントを有効にすればできあがり!

  1. #switch1:checked ~ #slideshow .next label[for="switch2"],
  2. #switch2:checked ~ #slideshow .next label[for="switch3"],
  3. #switch3:checked ~ #slideshow .next label[for="switch4"],
  4. #switch4:checked ~ #slideshow .next label[for="switch5"],
  5. #switch5:checked ~ #slideshow .next label[for="switch1"] {
  6. pointer-events: auto;
  7. }

上記ソースコードでは、右矢印ボタンの操作を、
#switch1がチェックされている時(=コンテンツ1が表示されてる時)<label for="switch2">を有効に、
#switch2がチェックされている時(=コンテンツ2が表示されてる時)<label for="switch3">を有効に、
…という具合に切り替えてます。

表示中のコンテンツに合わせて矢印ボタンを有効化

pointer-eventsプロパティについて詳しくは下記ページを参照のこと。

pointer-events - CSS | MDN

目次に戻る

同じ方向にスライド

コンテンツ1からコンテンツ5に切り替わる時と、コンテンツ5からコンテンツ1に切り替わる時、逆方向にスライドして戻るんじゃなくて、常に同じ方向にスライドした方がスマートですよね:)

シームレスにスライドするイメージ

上図みたく、スライドさせる要素を、.slideContentsじゃなく、その中のコンテンツに変えればできそうな気がします。

まずはコンテンツをposition: absoluteで、すべて同じ位置に絶対配置してから、transform: translateX(100%)スライドショーの横幅分右側にズラして、隠しておきます。

  1. #slideshow .slideContents section {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. -webkit-transform: translateX(100%);
  6. transform: translateX(100%);
  7. -webkit-transition: -webkit-transform .6s;
  8. transition: transform .6s;
  9. }

タブボタンと同じように、#switch1:checkedの時はひとつめ<section>を真ん中に、#switch2:checkedの時はふたつめ<section>を真ん中に…という風に指定します。

  1. #switch1:checked ~ #slideshow .slideContents #slide1,
  2. #switch2:checked ~ #slideshow .slideContents #slide2,
  3. #switch3:checked ~ #slideshow .slideContents #slide3,
  4. #switch4:checked ~ #slideshow .slideContents #slide4,
  5. #switch5:checked ~ #slideshow .slideContents #slide5 {
  6. z-index: 1;
  7. position: relative;
  8. -webkit-transform: translateX(0);
  9. transform: translateX(0);
  10. }

この時にposition: relativeも一緒に指定するのがポイント。ぜんぶ絶対配置にすると.slideContents高さがなくなってしまうので、表示中のコンテンツだけは絶対配置じゃなくして、高さを保持します。真ん中のコンテンツも絶対配置だとこんななる。

これで、矢印ボタンをクリックして:checkedが切り替わると、それに合わせてコンテンツがスライドするようになりました!けどこれだけだと下図みたいな感じ。右側から出たり入ったりするだけになっちゃってます…。

右矢印ボタンをクリックした時には、表示中のコンテンツは左側にスライドしないといけないですよね。
つまり下図みたく、コンテンツが順繰りローテーションするような構造になります。

順繰りスライドしてくイメージ

「コンテンツ2」表示中はコンテンツ5コンテンツ1、「コンテンツ3」表示中はコンテンツ2コンテンツ1という具合に、表示中のコンテンツの手前ふたつのコンテンツは左側に来るように指定すればいいっぽいです!

  1. #switch1:checked ~ #slideshow .slideContents #slide5,
  2. #switch1:checked ~ #slideshow .slideContents #slide4,
  3. #switch2:checked ~ #slideshow .slideContents #slide1,
  4. #switch2:checked ~ #slideshow .slideContents #slide5,
  5. #switch3:checked ~ #slideshow .slideContents #slide2,
  6. #switch3:checked ~ #slideshow .slideContents #slide1,
  7. #switch4:checked ~ #slideshow .slideContents #slide3,
  8. #switch4:checked ~ #slideshow .slideContents #slide2,
  9. #switch5:checked ~ #slideshow .slideContents #slide4,
  10. #switch5:checked ~ #slideshow .slideContents #slide3 {
  11. -webkit-transform: translateX(-100%);
  12. transform: translateX(-100%);
  13. }

そしてできたのがこちら。むむ!何やらめまぐるしい…。

translateX(-100%)からtranslateX(100%)へ移動してくのが見えちゃってるんですね…。
端から端へ移動する時だけは、スライドじゃなくて、瞬間移動するようにしないといけません。つまりtransition-duration(変化にかかる時間)を0秒にすればいいって事ですね!

  1. #switch1:checked ~ #slideshow .slideContents #slide3,
  2. #switch1:checked ~ #slideshow .slideContents #slide4,
  3. #switch2:checked ~ #slideshow .slideContents #slide4,
  4. #switch2:checked ~ #slideshow .slideContents #slide5,
  5. #switch3:checked ~ #slideshow .slideContents #slide5,
  6. #switch3:checked ~ #slideshow .slideContents #slide1,
  7. #switch4:checked ~ #slideshow .slideContents #slide1,
  8. #switch4:checked ~ #slideshow .slideContents #slide2,
  9. #switch5:checked ~ #slideshow .slideContents #slide2,
  10. #switch5:checked ~ #slideshow .slideContents #slide3 {
  11. transition-duration: 0s;
  12. }

そんなこんなで、できあがり!

目次に戻る

6秒おきに切り替わる

スライドショーなら、自動でスライドさせてみたいです。
animationプロパティを使って、スライドするアニメーションを、各コンテンツに個別に指定して、タイミングよく順番にスライドさせれば、できそうな気がします:D

まずはアニメーションのキーフレームを作ります。
5つのコンテンツを順番にスライドさせるので、コンテンツひとつにつき、表示される時間は、全体の20%ずつ割り振れます。アニメーション全体の長さを100%秒とすると、各コンテンツのアニメーションの一連の流れは、下図みたいな感じになると思います。

スライドショーの一連の流れ
  1. 0%秒から16%秒までは真ん中でじっとしてる。

  2. 16%秒から20%秒にかけて、真ん中から左側へスライド。

  3. 右側へ瞬間移動。

  4. 22%秒から96%秒までは右側でじっとしてる。

  5. 96%秒から100%秒にかけて、右側から真ん中へスライド。

  1. @keyframes autoplay {
  2. 0% { transform: translateX(0); }
  3. 16% { transform: translateX(0); }
  4. 20% { transform: translateX(-100%); }
  5. 20.001% { transform: translateX(100%); }
  6. 96% { transform: translateX(100%); }
  7. 100% { transform: translateX(0); }
  8. }

瞬間移動のところは、@keyframesでは同じパーセント値を指定すると、後に書いた指定が優先されてしまうので、パーセント値をほんのちょっとズラして、瞬間的に移動するようにしてます。

そして、上で定義したautoplayを、スライドさせるコンテンツに指定します。

  1. #slideshow .slideContents section {
  2. -webkit-animation: autoplay 30s infinite;
  3. animation: autoplay 30s infinite;
  4. }

autoplayというアニメーションを、30秒かけて、繰り返し再生すよう指定しました。なので20%秒がちょうど6秒になります:)
ただし、このままだと全部のコンテンツが重なってスライドしてる状態。6秒後には全コンテンツが一緒にスライドして、何もなくなっちゃいます…X(。24秒後にまた戻ってきます。

各コンテンツのアニメーションの開始位置をちょっとずつズラせば、同じキーフレームを使って、コンテンツを順番にスライドさせることができます。
animation-delayを使って、下記のように指定します。

  1. #slideshow .slideContents #slide1 { animation-delay: 0; }
  2. #slideshow .slideContents #slide2 { animation-delay: -24s; }
  3. #slideshow .slideContents #slide3 { animation-delay: -18s; }
  4. #slideshow .slideContents #slide4 { animation-delay: -12s; }
  5. #slideshow .slideContents #slide5 { animation-delay: -6s; }

animation-delayプロパティにマイナスの値を指定すると、その分進んだ時点からアニメーションを開始するので、上記指定で、下図のように開始位置がズレるわけですねー。

開始位置が6秒ずつ後ろにズレる

できましたー!

けど、矢印ボタンをクリックしても何も起こりません…。
矢印ボタンではtransform: translateX()の値を切り替えてスライドさせたんですが、アニメーション中は@keyframesルールで定義したスタイルの方が優先されるので、矢印ボタンで切り替えてもびくともしないんですね…。自動スライドと矢印ボタンの併用はできなさそう…¦(。

そんなわけで、矢印ボタンをなくして、できあがり!

目次に戻る

演出を加える

スライドしてきた時にテキストだけ後から出てくるとか、イラストだけチロチロ動いてるとか、切り替わる時にほんの少しの動きを加えてみます。より印象的になること請け合いです:)

上のサンプルでは、これまでのスライドショーに、h1要素とp要素を追加してみました。
<img>の上に<div class="contents">を重ねて、その中に<h1><p>を入れてる構造になります。

コンテンツの構造

コンテンツと、その中のh1要素p要素、それぞれの動きを個別に変えることで、スライドしてくる時のコンテンツにちょっとしたアクセントを付けてます。
コンテンツ1〜3まではtransitionプロパティを使って、コンテンツ4と5はanimationプロパティを使って、動きの違いを表現しています。
それでは、順番に(おおざっぱに)解説です!

奥行きがある感じ

h1要素とp要素の初期位置(左右に隠れてる時の位置)を、コンテンツの中心よりズラして配置し、コンテンツのスライドに合わせて徐々に中央に来るようスライドしてます。

h1要素とp要素は、コンテンツの中で、別にスライドしてる

遠くからスライドしてくる要素ほど速く動くので、やんわり遠近感が感じられる表現になるってわけで、これがパララックスってやつです。

よりパララックスがじっくり感じられるように、コンテンツ自体とh1要素とp要素それぞれに、transition-timing-functionで、ゆっくり始まってゆっくり終わる「easeInOutCubic」というイージングを適用したりしてます。

遅れて出てくる

コンテンツ自体の動きは変えずに、h1要素とp要素の動きをちょっと変えてるだけ。

上のサンプルと同じように、h1要素とp要素の初期位置をコンテンツの中心よりズラして配置し、transition-delayで、0.3秒ずつ遅れて出てくるように指定したり、transition-durationで、コンテンツよりも、変化にかかる時間を長めに指定してます。

さらに、変化の仕方transition-timing-functionで、ちょっと行き過ぎて戻る、既存の「easeOutBack」というイージングを、緩めにアレンジしたものを適用。

要素を立体的に

コンテンツの初期状態(左右に隠れてる時の状態)を、コンテンツの表面が内側を向くように、横に90°回転した状態にしてます。
その時にちゃんと立体的な表現になるように、親要素<div class="slideContents">perspectiveプロパティを追加。

  1. #slideshow .slideContents {
  2. -webkit-perspective: 1000px;
  3. perspective: 1000px;
  4. }

回転する様子がよく見れるように、初期位置をいつもより手前に指定したり、回転の最中に透明になるように、透明度だけtransition-durationを短めにしたり、アニメーション具合を確認しながら、満足な動きになるまで適宜、微調整。
したりなんだりで、できあがり。

アニメーションする

スライドする時の動きは変えずに、スライドした後、一度だけ、h1要素とp要素をアニメーションさせてます。
h1要素がぽよんと出てくる「h1Appear」というアニメーションと、同じくp要素がぽよんと出てくる「pAppear」というアニメーションを用意し、#switch4チェックされた時に一度だけ再生するよう、指定します。

  1. #switch4:checked ~ #slideshow .slideContents #slide4 h1 {
  2. -webkit-animation: h1Appear 1.5s;
  3. }
  4. #switch4:checked ~ #slideshow .slideContents #slide4 p {
  5. -webkit-animation: pAppear 1.3s;
  6. }

#switch4:checkedのh1要素とp要素だけにanimationを指定する事で、真ん中にスライドする時だけ、アニメーションが適用されます。※キーフレームの定義は46行め〜

いろいろアニメーション

これも、スライドする時の動きは変えず、h1要素とp要素に、個別にアニメーションを適用しています。
h1要素にはその中にspan要素を入れてて、h1には上下に跳ねるアニメーションを指定し、spanには前後に回転するアニメーションを指定することで、宙返りするアニメーションを表現しています。

p要素は、translate()で上下左右に移動と、rotate()で傾きを、アニメーション具合を確認しながら、良い感じなランダムになるよう適宜、微調整。

以上!ほとんど適宜、微調整です…。ちょっと考えて、ちょっと試して、ちょっと考えて、ちょっとずついじりながら動きを作っくのは楽しいですよー;)

目次に戻る

画面の端からニュッと出るメニュー

スマートフォンサイトなどでたまに見かけるこんなメニューも、CSSだけで作れます。
引き出しみたいに出し入れできるメニューだからドロワーメニューとかって言います。

開閉する仕組み

メニューが開閉する仕組みは、これまでのサンプル同様<input><label>を使った方法で、今回はラジオボタンじゃなくて、チェックボックスを使います:)

ページ全体のHTMLの構造は下記の通り。

  1. <body>
  2. <div id="wrapper">
  3. <input type="checkbox" id="navTgl">
  4. <label for="navTgl" class="open">≡</label>
  5. <label for="navTgl" class="close"></label>
  6. <nav class="menu">
  7. </nav>
  8. <div class="contents">
  9. <header>
  10. </header>
  11. <article>
  12. </article>
  13. <footer>
  14. </footer>
  15. </div>
  16. </div>
  17. </body>

メニューを開閉するためのボタンは2つ用意しておき、ひとつは開くと閉じるの両用、もうひとつを閉じる用としておきます。両用の<label for="navTgl" class="open">は、常に見えている、ボタンの形をしたもの。閉じる用の<label for="navTgl" class="close">は、全面を覆うように固定配置してあります。

そして、スイッチの役割となる<input type="checkbox">は、<div id="wrapper">内の一番最初に設置。

ニュッと出るメニューとそのページ全体の構造

これが:checkedになった時に、それ以降の兄弟要素<label><nav><div class="contents">のスタイルを変える仕組みです。

メニューがニュッと出て、コンテンツも右へスライド

全面を覆っている閉じるボタンは、メニューが閉じている時はpointer-events: noneでマウスでの操作を無効にしておき、メニューが開いた時にはautoにして、クリックできるようにします。スライドショーの矢印ボタンの時と方法は一緒ですねー:)

  1. .close {
  2. pointer-events: none;
  3. z-index: 1;
  4. width: 100%;
  5. height: 100%;
  6. transition: background-color .6s;
  7. }
  8. #navTgl:checked ~ .close {
  9. pointer-events: auto;
  10. background-color: rgba(0,0,0,.3);
  11. }

pointer-events: noneでマウスイベントが無効になるので、前面を覆っていても、その下のコンテンツには触ることができるんですねー:D

目次に戻る

ウィンドウの幅に合わせてメニューを使い分ける

上のサンプルみたいなメニューは、画面の幅が狭い時だけ使えればよくて、通常は普通のメニューを表示させときたいって時もあるでしょう。

  1. .open { display: none; }
  2. @media screen and (max-width: 480px) {
  3. .open { display: block; }
  4. }

上記のように指定すると、通常はメニューを開閉するボタンを非表示にしておいて、画面の横幅が480px以下の時だけ表示するようになります。
これはMedia Queries(メディアクエリ)という構文を使ってて、メディアの特性に合わせてスタイルを出し分けるための方法なのです。詳しくは後述

下のサンプルでは、Media Queriesを使って、ブラウザの横幅に合わせて、普通なメニューからドロワーメニューに切り替えています。
ブラウザの横幅を小さくしていくと、ヘッダーメニューがなくなって、引き出しボタンが現れると思います。

パッと切り替わるより、もうちょっと自然な感じに切り替わるようにしてみたいですね。CSSの指定を下記みたく変えてみました。

変えたところ(開閉するボタンのみ抜粋)

  1. /* パッと切り替わる指定 */
  2. .open {
  3. display: none;
  4. }
  5. @media screen and (max-width: 480px) {
  6. .open {
  7. display: block;
  8. }
  9. }
  10. /* 自然な感じに切り替わる指定 */
  11. .open {
  12. -webkit-transform: translate(0, -100%);
  13. transform: translate(0, -100%);
  14. }
  15. #navTgl:checked + .open {
  16. -webkit-transform: translate(250px, 0);
  17. transform: translate(250px, 0);
  18. }
  19. @media screen and (max-width: 480px) {
  20. .open {
  21. -webkit-transform: translate(0, 0);
  22. transform: translate(0, 0);
  23. }
  24. }

display: noneじゃなくて、要素の透明度を変えたり、位置を移動するようにして、それぞれtransitionを指定してアニメーションしてみました。

目次に戻る

目次に戻る

パララックス

JavaScriptでパララックスな表現をする場合には、要素ごとにスクロールスピードを変えることで、視差効果を生み出してたと思いますが、CSSではtransformの3D表現を使って、要素を実際に画面の手前と奥に配置することで、パララックスを表現できます:)※Internet Explorer、Firefoxでは確認できません…。

手前にパララックス

そんな訳で、要素を手前に配置して、パララックスしてみます!下図のような感じに、各要素を手前へ移動させることにしました。

手前から、アイキャッチ画像、ヘッダーナビ、リンクボタン、タイトルの順

手前への移動はtransformプロパティtranslateZ()を使います。
それから親要素には、遠近感を決めるためのperspectiveプロパティを指定します。ここでは200pxとして、200px離れたところから見てる感じにします。
遠近感の基準点(消失点)は、transform-originプロパティを指定してないので、初期値の親要素の中央になります。

  1. .parallax #wrapper {
  2. perspective: 200px;
  3. }

けど、下のサンプルは上手くいってませんねー…。

要素は手前に移動してるみたいですけれど、遠近感の基準点がサイト全体の中心になってるので、全体的に縦に広がっちゃってますね。しかも基準点ごとスクロールしてるので、パララックスしないわけです…X(。
サイト全体の中心じゃなくて、下図みたく、常にウィンドウの中心が基準になるようにすれば、上手くパララックスする気がします…!

これを、こう

なので、親要素の#wrapperの大きさをウィンドウの大きさと同じになるよう、下記指定を加えます。
さらに#wrapperにはoverflowプロパティを指定してスクロールバーを出して、「#wrapperの中でコンテンツがスクロールする」ようにしてみました。

  1. html, body, #wrapper {
  2. height: 100%;
  3. }
  4. #wrapper {
  5. overflow: auto;
  6. }

これで、下図のような構造になりました。
#wrapperはウィンドウの大きさに固定で、その中身だけ、#wrapperの中でスクロールします。

#wrapperは動かない、中のコンテンツだけスクロール

ちゃんとパララックスするようになりましたー:D

手前のものほど大きくなっちゃってるので、できれば各要素の大きさは元通りにしたいですね。各要素にtransformプロパティscale()を指定して、調整してみたいと思います。

視点から要素までの距離と、大きさの関係は下図みたいになると思います。
距離が近づくほど、反比例して大きくなって見えるんですねー。

横から見た図と大きさの調整方法

例えば、400px離れたところにある要素は、実際の大きさの半分に見えてる事になるので、元の大きさに戻すには、2倍に拡大すればよいという事になります。
100pxのところにある要素なら、2倍の大きさに見えてるので、元の大きさに戻すには、2分の1に縮小(0.5倍)すればよいという事になります。
つまり「要素までの距離 / 基準の距離 = 拡大する値」ということになりますね!

アイキャッチ画像の場合なら、60px手前に移動してるから、要素までの距離は140pxなので、「140px / 200px = 0.7」。現在の大きさから「0.7」倍すれば元の見ための大きさに戻るということです。
transformの値にscale()を追記。

  1. figure img {
  2. -webkit-transform: translateZ(60px) scale(0.7);
  3. transform: translateZ(60px) scale(0.7);
  4. }

他の要素も同じ要領で、元の見た目の大きさになるように調整すれば、できあがりー:D

目次に戻る

奥にパララックス

手前に配置した要素は通常よりも早くスクロールしてましたが、奥に配置すれば、通常よりも遅くスクロールする事になります。
下のサンプルは、各要素の重なり方が、上のサンプルとは逆順になるよう配置してます。

画面の横幅が狭い時に、横スクロールバーが出ちゃいますね…。
translateX()で手前に移動させて大きく見える時には、要素自体の大きさは変わらないので、スクロールバーは出ませんでしたが、scale()拡大した時には、要素自体が大きくなるため、#wrapperからハミ出た分スクロールバーが出ちゃうんですね。

見た目は元のサイズだけど、要素自体は拡大してる

ここでは#wrapperoverflow-y: hiddenと指定して、横スクロールバーだけ出ないようにしました;P。
※該当CSSは9行め

で、できあがり!

目次に戻る

あとがき

記事を書いてる最中にもいろいろ新たな発見とかがあって紆余曲折しながらすごくすごく長くなっちゃいましたが、なんとかキリが着けれてよかったです;D(Chromeは次のバージョンアップでtransformにベンダープレフィックス要らなくなるみたいだし!)
たぶん今後もっとよりよい書き方に気付いたり、新しい技術が出てくると思うので、どんどん更新していきたいです。

最後に、動くCSSを使ってサンプルのサンプルサイトを作ってみましたー:D
記事で紹介したCSSをいろいろ盛り込んでますので、ぜひ覗いて行ってくださいな。

CSS Animation - Lopan cafe

以上、動くCSSのためのメモでしたー。
最後まで読んでいただきありがとうございました!

Comment & Pingback

70 Comments! for 動くCSSのためのメモ。

  1. モカママ

    今回タブについての記事を参考にさせていただきました。
    とてもわかりやすく実装することができました。
    1点教えていただきたいのですが、タブの横並びのボタン部分がスマートフォンでははみ出して表示されます。
    コンテンツはおさまっています。
    ご教示いただけると幸いです。
    よろしくお願いいたします

    Reply

    • _watercolor

      > モカママさん
      コメントありがとうございます、お役に立てていただけてうれしいです!

      タブコンテンツのところですね。
      たしかに!記事中のサンプルだとタブボタンの文字数が少ないから大丈夫ですけれど、下のサンプルみたく、文字数が多いと改行しちゃうし、英単語とかは改行せずにタブボタンを押し広げちゃいますね。。しかも、チェックされているタブボタンの色の高さもバラバラです…X(

      画面の幅が狭いとタブボタンがハミ出しちゃう。

      ひとまず、タブボタンの高さを揃えるには、タブボタンのli要素とlabel要素に、以下の指定を追記すればよいです。(詳しくは、よこ並びのCSS。という記事の行数が違ってもボタンのサイズを揃えるの項を参照のこと;D。)

      1. .tabBtn li {
      2. overflow: hidden;
      3. }
      4. .tabBtn li label {
      5. margin: -40px 0;
      6. padding: 50px 10px;
      7. }

      タブボタンの高さは揃ったサンプル

      あとは、画面からハミ出しちゃうタブボタンをどうするか…、あまり良くない方法だと、無理やり改行する設定にしちゃう手があります。word-wrap: break-wordを指定すると、単語の途中でも要素の端まで来たら自動改行するようになります。

      1. .tabs li {
      2. word-wrap: break-word;
      3. }

      もしくは、ハミ出したタブボタンは、横にスクロールできるようにするという手もあります。
      ul要素に対して、縦方向のみスクロールできないように指定することで、横方向のみスクロールできるようにしています。もともとul要素に指定していたdisplay: tableのままだとスクロールコンテナにならないので、blockに変更しています。

      ※また、li要素の横幅が20%のままだと、画面の幅が広い時に、なぜかタブボタンが横幅いっぱいに広がりません¦(。。ここでは10%と指定しています(画面幅が広いほど、この値は小さい方が良いみたいです)

      1. .tabBtn {
      2. display: block;
      3. overflow-y: hidden;
      4. }
      5. .tabBtn li {
      6. width: 10%;
      7. }

      あるいは、いっそタブボタンをたて並びにするというのも、ひとつの手です。
      下のサンプルでは、画面の横幅が567px以下の時にはたて並びになるようにしています。

      ※567pxとは、iPhone5の縦の長さが568pxなので、“それ未満”(縦持ちの時のみ適用される)という値になります:D

      1. @media all and (max-width: 567px) {
      2. .tabBtn li {
      3. display: block;
      4. width: auto;
      5. border-right: 0;
      6. border-bottom: 1px solid #fff;
      7. }
      8. .tabBtn li:last-child {
      9. border-right: 0;
      10. }
      11. }

      てなもんで、今後ともLopan.jpをどうぞよろしくです;9

      Reply

      • モカママ

        できました!!
        ちなみに、横にスクロールを試してみました。
        今のところ4つしかないですが今後増えていく可能性があるので。
        一つの回答だけでなく、色々な提案をしてくださるところが流石です!
        本当に感謝してます。
        どうもありがとうございました。

        Reply

        • _watercolor

          > モカママさん
          よかったー:D
          お役に立てたのならうれしい限りですXD
          今後ともLopan.jpをどうぞよろしくです。

          Reply

  2. アシベ

    アニメーションのみならず、ラジオボタンとチェックボックスの利用法についても細かく記載されており助かります。
    ラジオボタンとチェックボックスの有無判定のラベルについてもとても勉強になります。
    ドロワーメニューもJqueryなしでやれそうですし・・・
    (ラベルなどそのまま普通に記述すると下の要素関連がチェックボックスなどで囲んでいる箇所までしか動いてくれないので困ってました)

    最近は、Jqueryを利用しなくてもある程度(よほど複雑ではない動きなら)のことはCSSのみでも再現できるようになってきていますね。
    いままではJqueryで指定した要素をクリックしたときの状態などをコードで打ち込んでいたりしましたが、チェックボックスやラジオボタン自身をクリックしても基本的には判定の有無で同じ動きが出来るんではないかと最近思い始めました。

    個人的な意見ですが、よくカルーセルで自動的にアニメーションしていくUIをみかけます。
    カルーセルと言えば、JqueryやJavascriptのプラグインなど(定番だとslick.js)が使われていますが、3つほど不満があります

    1:切り替わるアニメーションがはやいとほしい情報が流れてしまい次まで待つ必要がある。または誤クリックしてしまう。

    2:カルーセルの左右にある矢印に目が行ってしまう

    3:スマホ・タブレットなどでフリックしてスライドして入れ替わるのはいいが、●などのボタンを押しても同じ動きをするのでフリックして指を擦り減らすか●をクリックして移動させるかどちらがよいのか
    ※●は写真や情報の数を示すだけの存在なのか?

    など上記の3つの不満があります。

    結局動き的に同じなら(コーディングやメンテなどをする場合などを考慮するとプラグインの方が断然よいですが)
    ラジオボタンを利用してカルーセルの変わりに利用しても別に問題ないのではないかとおもいました。

    前置きが非常に長くなりましたが質問なのですが、あまり利用する機会は少ないとは思いますが(display:flex)で子要素コンテナ箇所を(display:flexのorder)を利用して一時的な要素の並べ替え(昇順・降順)をラジオボタンまたはチェックボックスで出来ないかと考えております。(:checked ~)の判定で出来るとは思うのですが

    Reply

    • アシベ

      先ほど質問しました。(display:flex)については記事内の例題を参考にしましたらうまくいきました。
      昇順・降順・表示の3つのボタンを用意しており、あらかじめ最初の1つ目のsection以外は非表示にして「表示」ボタンを押すと非表示状態の要素がアニメーション表示フェードインしてくるようにしていましたが、他のボタン(昇順・降順)を押すと最初の1つ目のsection以外の要素がまた非表示の状態になりました・・・(ボタンの切り替えで初期化?)
      やはりこのあたりはJqueryなどで判定の有無を管理したほうがいいのだと感じました。

      Reply

      • _watercolor

        > アシベさん
        いつもありがとうございますー!

        カルーセル、悩ましいですよね…。あると便利な場面もあれば、邪魔になることもあるので、ほんとうに必要なのかどうか見極めねばなりません。
        UIはデバイスに合わせて、デスクトップならクリックがしやすいので、左右の矢印とチョボがあっても良いのかなと思いますし、タッチデバイスならばフリックの方が自然な操作だと思うので、左右に続きがあることだけわかるようにレイアウトして、矢印もチョボもなくても良いかな、と思います:)

        フレキシブルボックスのorderプロパティを使う方法、「なるほど!」と思いましたが、orderプロパティは位置じゃなくて順番を指定するだけなので、スムーズなアニメーションは敵いませんでした…。
        けれども、コメントいただいたみたいに、フェードイン・フェードアウトで切り替える方法ならばうまい具合にスライドショーしましたね;D

        CSS Animation – orderプロパティでスライドショー

        「orderプロパティでスライドショー」のサンプルをダウンロードする

        ※とはいえ、input要素はあくまでフォームのための要素なので、動的な処理はやっぱり、JavaScriptを使った方がよっぽどスマートですね…X)

        Reply

        • アシベ

          コメントありがとうございます!
          サンプルもご用意していただきありがとうございます!!

          そうですね。orderプロパティは順番を指定しているだけでちゃんとした並び替えを望むのであればJavascriptなどが必要不可欠になりますね。しかし、コンテナの中身をちょこっと一度か二度変えれたらおもしろいかなと思いました。

          たしかに、もとを正せばinput要素は本来はフォームの部品の一部ですね。
          なので、動的にしたい場合にはおとなしくJavascriptになりますが近年のinput要素でもこんなことできるんだよ!という流れをみると、あぁ、こんなやり方もあるんだなぁとと感じる私的にはとても魅力的なものに映りました。

          ※最近は斜めラインを利用したデザインのサイトをよく見かけるようになりましたが、乱用はあまりしないでトップページかコンテンツの区切り程度に抑えたほうがいいかなと感じました。

          Reply

  3. ネオジム

    ドロワーメニューは色んな形のものがありますがCSSのみという形だと情報がなかなか少なかったり
    満足いく機能じゃなかったりで結果こちらにたどり着きました

    実装そのものは出来たのですが
    ドロワーメニュー展開時に、こちらのサンプルとは異なりContentsスペースが操作出来てしまいます
    試行錯誤してみたのですが原因がさっぱり…

    見落としやすいトラブルシューティングがあると嬉しいかもしれません

    Reply

    • _watercolor

      > ネオジムさん

      コメントでのご指摘ありがとうございます!
      画面の端からニュッと出るメニュー」のところ、たしかに、記事中のサンプルだと、ドロワーメニューを展開した時にコンテンツ部分がスクロールできなくなりますね…。
      理由は、ソースコードを表示するための、タブコンテンツが原因でした…X(すみません。

      スクロールする要素の上に、半透明の要素が重なって、カーソルの操作を邪魔してる状態。

      サンプルでは、「PREVIEW」タブを開いた時に表示される<div class="tab-container">に、overflow: auto;が指定してあって、このdiv要素の中身がスクロールする状態になってます。ドロワーメニューを開いた時に表示させている、半透明の<label for="navTgl" class="close">がそのスクロールされる要素の上に重なって、スクロールできなくしてる、ということみたいですXp

      サンプルと同じ状況を作るには、サンプルのソースコードの<div id="wrapper">をさらに<div class="container">などで括って、その要素の中身をスクロールするようにすればよいです。.containerに、以下のスタイルを指定すれば、その中身がスクロールするようになります。

      1. .container {
      2. overflow: auto;
      3. width: 100vw;
      4. height: 100vh;
      5. }

      ※下の、スクロールできる方のサンプルでは、ウィンドウの中身(html要素)がスクロールしている状態になります。比べてみると、スクロールできない方は、スクロールバーが半透明の要素の下に隠れてて、スクロールできる方は、スクロールバーが半透明の要素の上にあるのがわかりますね…!

      詳しくはサンプルをダウンロードして見てくださいませーX)

      上のサンプルをダウンロードする

      Reply

  4. mach3

    はじめまして!
    実践的なサンプルの数々、とても為になり有り難いかぎりでございます!
    一つ質問させていただきたいのですが、
    サンプルの横にスライドして切り替わるタブをラジオボタンではなく、aタグのアンカーバージョンで作成しているのですが、
    例えばタブ5を表示していてページをリロードしたり、直接URLの打ち込みで(アドレス末尾に#tab-5というふうに)タブ5を表示させると、一度タブ1を表示して、そこから横にスライドしてタブ5が
    表示されてしまうのですが、直接タブ5を表示させたいのですが方法はございますか?
    まどろっこしい質問で恐縮ですがお教えいただけますと幸いです!お手数をお掛けしますがよろしくお願いします。

    Reply

    • _watercolor

      > mach3さん

      はじめまして、_watercolorです。
      こちらこそありがとうございます、読んでいただけていて嬉しい限りですXD

      ご質問について、いろいろ試してみたのですけれど、URLの末尾にアンカーリンクを付けた状態だと、どうしてもスライドしてしまいますねー…X((※Chromeは最初のアクセス時だけは大丈夫ですけれど、リロードするとスライドしちゃいます…。)
      なので、こちらの回答と同じ要領で、アンカーリンクのないURLでリンクした時の初期位置を、5番めのタブが表示された状態になるようにしてみました:)アンカーリンクが付いた状態でリロードした時には、5番めのタブからスライドするカタチになってしまいますけど…。

      横にスライドして切り替わるタブコンテンツ(5番めのタブがデフォルトなタイプ)

      ポイントは下記箇所。アンカーリンクも何もないデフォルトの状態で、5番めのタブが選択されてる状態にしておきます。
      ただし、そのままだと、常に5番めのタブが開きっぱなしになっちゃうので、.switchの要素のどれかが:targetの状態になったら、5番めのタブは非表示になるようにしとかないといけません(5〜7行め)

      5番めのタブボタンの色を変えておく
      1. /* ハッシュがない時は 5 をデフォルトにする */
      2. .tabBtn li [href="#tab-5"] {
      3. background-color: #cd5c5c;
      4. }
      5. .switch:target ~ .tabBtn li [href="#tab-5"] {
      6. background-color: #20b2aa;
      7. }
      5番めのタブコンテンツを表示しておく
      1. /* ハッシュがない時は 5 をデフォルトにする */
      2. .tabContents section:nth-child(5) {
      3. opacity: 1;
      4. }
      5. .switch:target ~ .tabContents section:nth-child(5) {
      6. opacity: 0.1;
      7. }
      8. .tabContents {
      9. -webkit-transform: translateX(-80%);
      10. transform: translateX(-80%);
      11. }

      サンプルの一式は下記からダウンロードいただけます;)

      「5番めのタブがデフォルトなタイプ」のサンプルをダウンロードする

      てなもんで、今後ともLopan.jpをどうぞよろしくです!

      Reply

      • mach3

        迅速ご丁寧なご回答、そしてサンプルまでご提供いただき誠にありがとうございます!
        本来、単一ページでそれぞれ展開するべく5ページを横にアニメートするタブ内で展開したかったので外部からのリンク等でダイレクトに表示させたかった次第でございました。
        やはり、URLでリンクした時の(リロードも含め)スライド挙動は仕方ないことだったのですね。
        自身でネチネチ考えていたのですがwatercolor様よりご回答いただきスッキリいたしました。
        いただいたサンプルもチャレンジさせていただきます。
        重ね重ねになりますが、本当にありがとうございました!
        引続き実践的な記事を楽しみに致しております!

        Reply

        • _watercolor

          > mach3さん

          いえいえ。こちらも勉強になりましたー。
          今後なにか良策が見つかったらこっそり更新するかもです;)
          ではでは、乞うご期待よろしくです!

          Reply

  5. Pingback:CSSだけで実装する、いまどきのマウスオーバーアニメーションがスニペットサイト6選。
  6. chai

    はじめまして、chaiと申します。
    私は、HTML・CSS初心者でして
    画像のスライドをどうやって作るのか、いろんなページをみながら
    勉強しております。
    こちらのサイトが一番参考になりました。
    本当にありがとうございます。

    その中でわからない部分があるので
    ぜひ、ご教示いただきたいのですが、

    タブ切り替えで横スライドさせるCSSがあると思うのですが
    上に付いてるタブ欄を下にやるには、どのようなhtmlにしたらよいでしょうか?
    初歩的すぎる質問で大変恐縮ですが、ご教示いただけると助かります。

    Reply

    • _watercolor

      > chaiさん

      はじめまして。
      ブログ読んでいただいてありがとうございます!
      参考にしていただけてうれしい限りですX)。

      横にスライドして切り替わる」のところですねー。
      上にあるタブを下に配置するには、単純にタブのhtml要素をコンテンツの下に移動すればよいですよ!
      サンプルでいうと、<ul class="tabBtn">を、<div class="tabContents">の下に移動します。

      HTML
      1. <div class="tabs">
      2. <input type="radio" name="switch" id="tab-1" checked>
      3. <input type="radio" name="switch" id="tab-2">
      4. <input type="radio" name="switch" id="tab-3">
      5. <input type="radio" name="switch" id="tab-4">
      6. <input type="radio" name="switch" id="tab-5">
      7. <ul class="tabBtn">
      8. <li><label for="tab-1">タブ1</label></li>
      9. <li><label for="tab-2">タブ2</label></li>
      10. <li><label for="tab-3">タブ3</label></li>
      11. <li><label for="tab-4">タブ4</label></li>
      12. <li><label for="tab-5">タブ5</label></li>
      13. </ul>
      14. <div class="tabContents">
      15. <section>
      16. ... 中略 ...
      17. </section>
      18. </div>
      19. </div>

      1. <div class="tabs">
      2. <input type="radio" name="switch" id="tab-1" checked>
      3. <input type="radio" name="switch" id="tab-2">
      4. <input type="radio" name="switch" id="tab-3">
      5. <input type="radio" name="switch" id="tab-4">
      6. <input type="radio" name="switch" id="tab-5">
      7. <div class="tabContents">
      8. <section>
      9. ... 中略 ...
      10. </section>
      11. </div>
      12. <ul class="tabBtn">
      13. <li><label for="tab-1">タブ1</label></li>
      14. <li><label for="tab-2">タブ2</label></li>
      15. <li><label for="tab-3">タブ3</label></li>
      16. <li><label for="tab-4">タブ4</label></li>
      17. <li><label for="tab-5">タブ5</label></li>
      18. </ul>
      19. </div>

      タブボタンが下にあるタブコンテンツ

      スライドを動かすために必要な条件は「input要素が、動かしたい要素よりも上にあること」なので、ul要素の場所はどこでも動かして大丈夫なのです:D。
      「タブボタンが下にあるタブコンテンツ」のサンプルを以下に置いてますので、ダウンロードして見てみてくださいませ;)。

      「タブボタンが下にあるタブコンテンツ」のサンプルをダウンロードする

      というわけで、今後ともLopan.jpをどうぞよろしく、です!

      Reply

      • chai

        ありがとうございます!
        先程、教えて頂いた方法でうまくできました。
        かなり悩んでいたので解決でき本当に助かりました。
        今後とも参考にさせて頂きます!

        Reply

        • _watercolor

          > chaiさん
          よかったですー;)。
          今後ともよろしくです!

          Reply

  7. ゴーディー

    6秒おきに切り替わる
    をコピペしてみたのですが、上手くうごかなかったのですが、どうすればいいでしょうか?

    HTML
    1. <div id="wrapper">
    2. <div id="slideshow">
    3. <div class="slideContents">
    4. <section id="slide1">
    5. <img src="../img/slide_01.png">
    6. </section>
    7. <section id="slide2">
    8. <img src="../img/slide_02.png">
    9. </section>
    10. <section id="slide3">
    11. <img src="../img/slide_03.png">
    12. </section>
    13. <section id="slide4">
    14. <img src="../img/slide_04.png">
    15. </section>
    16. <section id="slide5">
    17. <img src="../img/slide_05.png">
    18. </section>
    19. </div>
    20. </div>
    21. </div>
    CSS
    1. .slideContents section {
    2. -webkit-animation: autoplay 30s infinite;
    3. animation: autoplay 30s infinite;
    4. }
    5. .slideContents #slide1 {
    6. position: relative;
    7. -webkit-animation-delay: 0;
    8. animation-delay: 0;
    9. }
    10. .slideContents #slide2 {
    11. -webkit-animation-delay: -24s;
    12. animation-delay: -24s;
    13. }
    14. .slideContents #slide3 {
    15. -webkit-animation-delay: -18s;
    16. animation-delay: -18s;
    17. }
    18. .slideContents #slide4 {
    19. -webkit-animation-delay: -12s;
    20. animation-delay: -12s;
    21. }
    22. .slideContents #slide5 {
    23. -webkit-animation-delay: -6s;
    24. animation-delay: -6s;
    25. }
    26. @-webkit-keyframes autoplay {
    27. 0% { -webkit-transform: translateX(0); }
    28. 16% { -webkit-transform: translateX(0); }
    29. 20% { -webkit-transform: translateX(-100%); }
    30. 20.001% { -webkit-transform: translateX(100%); }
    31. 96% { -webkit-transform: translateX(100%); }
    32. 100% { -webkit-transform: translateX(0); }
    33. }
    34. @keyframes autoplay {
    35. 0% { transform: translateX(0); }
    36. 16% { transform: translateX(0); }
    37. 20% { transform: translateX(-100%); }
    38. 20.001% { transform: translateX(100%); }
    39. 96% { transform: translateX(100%); }
    40. 100% { transform: translateX(0); }
    41. }

    Reply

    • _watercolor

      > ゴーディーさん
      コメントありがとうございますー。

      記事内のソースコードは解説してないところはハショっちゃってるので、そのままだと不十分なんです…、わかりにくくてごめんなさいX(。
      6秒おきに切り替わるスライドショーのソースコードぜんぶを以下に置いてますので、ダウンロードしてみてくださいー!
      手短ですみませんが、詳しくはサンプルのファイルを参照くださいませませ…X)!

      「6秒おきに切り替わるスライドショー」のサンプルをダウンロードする

      Reply

  8. Pingback:ブログカードのデザインにcss3でアニメーションを追加しました – ionna
  9. hiyashikyuri

    普段サーバーばっかりなので、フロントの表現力に感激しました!

    良い記事をありがとうございました。また参考にさせて頂きます!

    Reply

    • _watercolor

      > hiyashikyuriさん
      コメントありがとうございます!
      サーバーは苦手です…、けど、フロント楽しんでいただけてよかったです:D。
      今後とも、どうぞよろしくです!

      Reply

  10. ちゃっぴー

    こんにちは
    記事を拝見しました。
    勉強させてもらっています。

    質問なのですが、少し説明しづらいのですが、
    両サイドから画像がでてきて真ん中でぶつかって止まる →■■←
    みたいな事もアニメーションで可能なのでしょうか?

    メインイメージのスライド部分に使いたいなと思いまして
    お忙しいと思いますが、返信頂けると幸いです。

    よろしくお願い致します。

    Reply

    • _watercolor

      > ちゃっぴーさん

      コメントありがとうございます。
      両サイドから画像が出てくるスライドショー、できますよ;)!

      試しに作ってみましたので、見てみてくださいませ。こんな感じでよかったでしょうか…。

      http://sample.lopan.jp/css-animation/slideshow/sample-both.html

      HTMLの構造は、スライドショーのところで紹介しているものとほとんど同じで、section要素の中の画像を2つずつにして、それぞれ、left-imgright-imgというclass名を付けてます。

      1. <div class="slideContents">
      2. <section id="slide1">
      3. <img src="../img/pain_campagne.jpg" alt="" width="300" height="200" class="left-img">
      4. <img src="../img/pain_spandauer.jpg" alt="" width="300" height="200" class="right-img">
      5. </section>
      6. <section id="slide2">
      7. ...

      記事の中で紹介しているものは、チェックされている<input>が切り替わるたびに、.slideContentsをスライドさせてました。
      けれど上のサンプルでは、その中の2つの画像を動かすことにしてます。チェックされてない時は左右に配置しておいて、チェックされてる時だけ真ん中にくるようにしてるんです。
      詳しくは下記に、ファイルをまとめましたので、ダウンロードしてみてくださいませX)。

      「両側から出てくるスライドショー」のサンプルをダウンロードする

      上のサンプルだとぶつかってる感じがしないので、animationプロパティを使って、「ぶつかってる感じ」の動きも作ってみましたー:D。
      HTMLの構造は上のサンプルと同じなのですけれど、CSSが違って、スライドしてくる画像の動きを@keyframesで作って、それをanimationプロパティで指定してます。
      こちらのサンプルも、上のダウンロードファイルに入れてますので、見てみてくださいーX(。

      http://sample.lopan.jp/css-animation/slideshow/sample-both-2.html

      ではでは、今後ともLopan.jpをどうぞよろしくですXD!

      Reply

      • ちゃっぴー

        返信ありがとうございます。
        サンプルを作ってくださったのもそうですが、返信が来たことに感激です!!

        まさに、こんな感じですありがとうございました。
        スライドの部分でも紹介されいているようにオートプレイも可能なのでしょうか?
        また、分からなかったら参考にさせていただきたく思います!

        Reply

        • _watercolor

          > ちゃっぴーさん
          いえいえ、よかったー。お返事ありがとうございました。
          オートプレイもできますよ!すぐ見せれなくてごめんなさいですけれど…、
          お時間のあるときに作ってみようかなーと思いますーX)。
          ではではー!

          Reply

  11. eric88

    こんにちわ。いつも参考にさせて頂いてます。
    丁寧で可愛くて解りやすいです!

    1点質問よろしいでしょうか…
    「:targetを使ってタブコンテンツ」の実装をしたのですが、
    初めに1つ目のタブを表示させたいのですがうまくいきません。
    チェックボタンでやってみたものは大丈夫なのですが、
    targetをタブ1のどこかに記述しておくのでしょうか?
    cssで何か追記するのでしょうか?

    色々やってみてもうまくいかないので教えて頂けると嬉しいです…

    Reply

    • _watercolor

      > eric88さん
      こんにちわ!ブログ読んでくれてありがとうございます:D。

      :targetを使ってタブコンテンツのところですねー。
      ここは、:targetというセレクタを使って、表示するタブを選択しているので、
      CSSじゃなく、アドレスバーのURLの末尾に「#tab-1」とか、タブに付けているid属性を記述しておかないといけないんです。

      http://sample.lopan.jp/css-animation/tabs/sample-href.html#tab-1

      最初から一番めのタブが表示されるように指定しておけば、URLの末尾に何もなくても一番めのタブが表示されますけど、

      1. .tabBtn li [href="#tab-1"] {
      2. background-color: #cd5c5c;
      3. }
      4. .tabContents section:nth-child(1) {
      5. opacity: 1;
      6. background-color: #fff;
      7. }

      けどその場合、どれかが選択されたら非表示にするための指定も追加しないといけません。。

      1. .switch:target ~ .tabBtn li [href="#tab-1"] {
      2. background-color: lightSeaGreen;
      3. }
      4. .switch:target ~ .tabContents section:nth-child(1) {
      5. opacity: 0.1;
      6. background-color: transparent;
      7. }

      下記にサンプルを置いてみましたので見てみてくださいませ。

      http://sample.lopan.jp/css-animation/tabs/sample-href2.html

      ぜひ、いろいろ試してみてくださいーX)。
      ではでは、今後ともLopan.jpをどうぞよろしくです!

      Reply

      • eric88

        早急の返信ありがとうございます!
        丁寧な解説とサンプルのおかげで無事に実装することができました‼
        人気サイトなので数日は無理だと思っていたのですが…

        おかげ様で先ほどお客様に見て頂いたのですが、とても喜んで下さってました。
        できるだけjs使わないでほしいとの依頼だったので本当に感謝です!
        これからも色々勉強させて頂きます。
        ありがとうございました^^

        Reply

        • _watercolor

          > eric88さん
          お返事ありがとうございます!
          無事解決できたようで何よりですー;D。

          Reply

  12. りも子

    記事を拝見しました。
    参考にさせてもらっています。

    質問なのですが、「詳細はあとから表示する」の項目で、type2(画像がくるんと回るやつです)の裏面も画像にすることは可能ですか?
    もし可能であれば、教えていただけると嬉しいです!

    Reply

    • _watercolor

      > りも子さん
      コメントいただきありがとうございますー!

      さっそくさっそくご質問についてですが、くるんと裏返るやつ、もちろん両面とも画像にすることもできますよXD!
      記事で紹介しているサンプルは、img要素を表面、dl要素を裏面にしてますけれど、

      1. <li class="type2">
      2. <img src="img/image.png">
      3. <dl>... 中略 ...</dl>
      4. </li>

      そのdl要素のところをimg要素に変えればよいです。cssで指定する時のために、どっちが表でどっちが裏だか分かるように、class名をつけておくとわかりよいです:)。

      1. <li class="type2-2">
      2. <img src="img/image.png" class="front">
      3. <img src="img/image2.png" class="back">
      4. </li>

      記事中のサンプルと同じく、「表面だけ」、「裏面だけ」、「両面ある」のを並べてみました。
      http://sample.lopan.jp/css-animation/hover/sample-details-hidden-2.html

      詳しくは下記に、両面あるのだけをファイルにまとめましたので、ダウンロードしてみてくださいませー;)。

      「くるんと裏返っても画像」のサンプルをダウンロードする

      ではでは、今後ともLopan.jpをよろしくです!

      Reply

      • りも子

        ありがとうございます!
        無事実装できました!!

        もっと欲を言うと、このクルクルするヤツを横並びにしたいのですが…
        何度やっても縦に並んでしまいます…orz

        お手数かけますが、ぜひ横並びにする方法を教えていただければ、嬉しいです。

        何度もすいません

        Reply

        • りも子

          いろいろと試してるうちにできるようになりました!!
          本当にありがとうございました(*‘∀‘)

          Reply

          • _watercolor

            >りも子さん
            あわゎ、お返事遅くてごめんなさい…X(!
            横並びできてよかったです。
            コメントありがとうございますーXD♪!

  13. まさっく

    スライドショーを導入したら、スクロールするときにどこの画面にもついてくる要素(?)に被さってしまいました。
    解決法を教えてください!(実は初心者なので、ここはあまり立ち入ったことのない領域でした…)
    (その様子は「ウェブサイトで」貼らせて頂いたページを見て頂ければお分かりいただけるかと思います)

    Reply

    • _watercolor

      > まさっくさん
      コメントありがとうございます。

      サイト拝見させていただきましたー:)。
      さっそく、ご質問いただいた内容ですが、div#header-fixedという要素に、z-indexプロパティで「2」以上の値を指定すれば直ると思います!
      要素が重なってしまう場合はたいてい「z-index」というプロパティで解決することが多いです。
      ヘッダーなので、今後のことを考えてz-index: 100;とかにしておくとよいかも:D。

      z-indexプロパティについて詳しくは下記ページをご参照くださいー。

      z-index-スタイルシートリファレンス – HTMLクイックリファレンス

      ではでは、今後ともLopan.jpをよろしくです;)!

      Reply

      • まさっく

        ご返信ありがとうございます!無事直りました(笑)
        これからもこのサイトを参考にさせて頂きたいと思います、宜しくお願い致します。

        Reply

        • _watercolor

          > まさっくさん
          はーい、よかったー。
          今後ともよろしくです;D!

          Reply

  14. Pingback:hover時に素敵な動きを加えてくれるcss3アニメーション10選 | モノづくりブログ - 株式会社8bit
  15. masac225

    CSSの無限の可能性を体感しました!
    私がしたかったことがJS無しで再現が可能だったとは全く思っていませんでした(笑)
    上の方と同じように、ブックマークに登録させて頂きました。
    横スライドのタブメニューや、スライドショーなどが個人的には驚きました(^^)/

    Reply

    • _watercolor

      > masac225さん
      ありがとうございますー!
      CSSでアニメーションを表現できるようになったおかげで、今までJavaScriptで作っていた「動き」も簡単に実装できるようになりましたねー。
      ※ただし、記事ではinput要素などを使ってやってるところは、JavaScriptでclass名を書き換える方がよっぽどスマートなのであしからず…X)。

      Reply

  16. kannam_style

    cssでここまで出来ることに感動しました!
    学習の参考にさせていたただきます!

    Reply

    • _watercolor

      > kannam_styleさん
      はーい、コメントありがとうございますX)!
      どうぞご参考までに;)。

      Reply

  17. Pingback:[CSS]たった1行!サイト内のリンクを乱暴にふわっとかわいい感じにするカスタマイズ | たらハコ
  18. ぽんこつ

    CSS初心者なのですが、サンプルと丁寧な解説がとても勉強になりました!
    テクニックだけでなくサイト全体のデザインも素敵で参考になります。
    ありがとうございました!

    Reply

    • _watercolor

      > ぽんこつさん
      コメントありがとうございます!
      参考にしていただけて、記事もよろこんでおりますよーXD。

      Reply

  19. Pingback:CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類+α】 | CreativeTips
  20. chicoro

    いつも勉強させて頂いております!
    スライドショーの部分なのですが、animation-delayとkey-frameで無事実装出来ました!
    しかし、IEとFirefoxでは動かず、、、-moz-やら-o-やら-ms-やら色々付け加えてやってみたんですけどダメでした。
    動きを見る限り、translateX(100%)の部分が、実際100%動いていない様子です。。。

    このサイトのCSSを見る限り同じ仕組みで、ただanimation-delayが「-」でないところと、translateがopacityなのですが、これだとIEでもうまく動作しています。
    http://codepen.io/leemark/pen/vzCdo

    スライドショーで何か解決策はないでしょうか??

    よろしくお願い致します。

    Reply

    • _watercolor

      > chicoroさん
      お返事が遅くなっちゃいまして申し訳ないです。
      もう解決しちゃってるかもしれないですが…、6秒おきに切り替わるのところですよね。
      …たしかにIEだとtranslateX(-100%)が10%くらいになっちゃってますね…(いま確認しました)!
      ご連絡くれてありがとうですX)!

      僕も結局わからずじまいだったので、translateX(-800px)にして、スライドした時だけ透明にしてごまかしてみましたX(!

      http://sample.lopan.jp/css-animation/slideshow/sample-timer-fix2.html

      1. @keyframes autoplay {
      2. 0%, 16%, 100% { transform: translateX(0); opacity: 1; }
      3. 20% { transform: translateX(-800px); opacity: 0; }
      4. 20.001%, 96% { transform: translateX(800px); opacity: 0; }
      5. }

      もっとすてきな解決策などありましたらご教示いただけるとありがたいですー!
      どうぞよろしくお願いいたします。

      Reply

  21. もす

    細かいところまで分かりやすい解説がありめちゃくちゃタメになりました!!(*´艸`*)
    ありがとうございます☆

    Reply

    • _watercolor

      > もすさん
      お返事が遅くなっちゃいました、ごめんなさいX(。
      こちらこそ、読んでくださってありがとうございますです☆

      Reply

  22. Pingback:Direction-Aware Hover Effect | HAKONIWA
  23. ひろこ

    こんばんは。
    すごく為になる記事ありがとうございます。
    1点お伺いしたいのですが、こちらの「ボタンでございます」(押すとへこむ)のcssを入れると他の箇所に干渉しているのか、ホバー時に前後のスペースがブラックアウトしてしまいます。当方素人の為、テンプレートを使用しており、cssの知識が全くありません。他のコードを見ないともちろん分からないとは思いますが、思い当たる原因や、「これを付け加えたらいいよ」などの何かいい方法あったらご教示くださいませ。お手数をお掛けしますがよろしくお願いします。

    Reply

    • _watercolor

      > ひろこさん、こんばんは。
      コメントありがとうございます。
      うーん…、黒くなっちゃうんですか?
      もしかしたら、ホバー時に背景が黒くなるようなスタイルがどこかにあるのかもしれないですねー。
      「.btn a:hover」のところを、下記のように記述すると直るかもしれません。

      background-color: #3cc4bd !important;

      一度試してみてくださいー。。
      ではでは、今後ともLopan.jpをよろしくです:)!

      Reply

      • ひろこ

        早速のご返事ありがとうございます!一度試してみます。今後もよろしくお願い致します。

        Reply

  24. shige

    CSSでアニメーション、こんなのできないかな〜っと思って辿り着きました。
    とっても内容の濃い、素晴らしい記事で感動しました。
    良い勉強させていただきました\(^o^)/
    真似させていただいて、実際に作ってみたいなと^^
    ありがとうございました!

    Reply

    • _watercolor

      > shigeさん
      コメントありがたいですー!
      ぜひ、いろいろ試してみてくださいねー:D!

      Reply

  25. Joseph Kani

    とっても参考になりました^-^

    Reply

    • _watercolor

      > Joseph Kaniさん!
      ありがとうございます!
      よかった、うれしいです;D。

      Reply

  26. くまモン

    アニメーションの演出部分で構造が詳しく書いてあり、とても勉強になりました!
    今後の情報も楽しみにしております(´∀`)

    Reply

    • _watercolor

      > くまモンさん
      ありがとうございます!コメントいただけてうれしいです:)。
      CSSでもかんたんにアニメーションが作れるようになったし、GIFアニメとかSVGとかcanvasとかを使って、生き生きしたサイトが増えてきました。
      中でもCSSのアニメーションは割とかんたんに、(いつものHTML+CSSコーディングの流れで)使う事ができると思って、今回まとめてみました。
      今後Lopanもじゃんじゃん動いて(動かして)いきたいと思ってますので、どうぞよろしくお願いしますーX)!

      Reply

  27. Pingback:Twitter 人気のつぶやき 5/31~6/13 2014 | Webクリエイターボックス
  28. gonzalez

    すごいです! ありがとうございました。FBで紹介させていただきました。

    Reply

    • _watercolor

      > gonzalezさん
      紹介していただきありがとうございますー!
      励みになります:D!

      Reply

  29. Pingback:先週(2014/06/02〜06)のオススメ記事「考える力の弱い人へ」他 | Select *
  30. 55cheese

    凄い!
    ボリュームも凄いし、まとめ方も分かりやすいし!
    永久保存版ブックマークしておきました!

    Reply

    • _watercolor

      > 55cheeseさん
      コメントありがとうございます!
      よかったー、そう言ってもらえると励みになるのですXD。
      ただ、メモなので、参考程度にどうぞー!
      情報ってどんどん古くなるので…X)。

      Reply

コメントを残す