動くCSSのためのメモ。
なんだかCSSでできる事がどんどん増えてきましたね。以前はJavaScriptを使って実装していた動くコンテンツも、CSSだけで表現されてるのをよく見ます。そんなわけで、ここいらで、CSSで動かすエフェクトについて、まとめてみたいと思います:)。
CSSで動かす
「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。
例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。
そんなCSSでのアニメーションを使って作るエフェクトをいくつかご紹介。
お品書き
動かすためのマストプロパティ
CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティとanimationプロパティ！
関連するプロパティを以下に書き出してみました。記事内ではこれらを使い倒して、いろんなエフェクトを表現してます。
transitionプロパティ
transition-property- 効果を適用したいプロパティ名を指定します。
all（初期値）none- cssプロパティ名（
widthとかmarginとかtransformとか…）
- ※
transitionを適用できるプロパティは、プロパティの値を数値で表現できるものすべて。colorの値に使われるredやlightSeaGreenなどの色名も、RGBなどの数値で表すことができるのでちゃんと適用されます。 transition-duration- 変化の開始から完了までにかかる時間を、秒数で指定します。
0s（初期値）- 秒数
- ※1秒（1000ミリ秒） =
1s（1000ms）。transition-timing-function- 変化の仕方（イージング）を指定します。
ease（初期値）linearease-inease-outease-in-outstep-startstep-endsteps()cubic-bezier()
- ※cubic-bezier関数を使えばオリジナルなイージングを作ることもできます。詳しくはこちらの記事を参照のこと。
transition-delay- 変化を開始するまでの待ち時間を、秒数で指定します。
0s（初期値）- 秒数
- ※マイナスの値を指定すると、その分進んだ時点から変化を開始します。詳しくはマウスオーバーエフェクトのページで後述。
animationプロパティ
animation-name- 適用したいアニメーション名を指定します。
none（初期値）- アニメーション名
animation-duration- アニメーションの一回分の長さを、秒数で指定します。
0s（初期値）
- ※
transition-durationと同様。 animation-timing-function- アニメーションの仕方（イージング）を指定します。
ease（初期値）
- ※
transition-timing-functionと同様。 animation-delay- アニメーションを開始するまでの待ち時間を、秒数で指定します。
0s（初期値）
- ※
transition-delayと同様。 animation-iteration-count- アニメーションを繰り返す回数を指定します。
1（初期値）- 回数
infinite
- ※
infiniteは無限にアニメーションが繰り返されます。回数を小数点以下に指定した場合は途中までアニメーションします。 animation-direction- 偶数回めのアニメーションを折り返すか、始めに戻すかを指定します。※詳しくはマウスオーバーエフェクトのページで後述。
normal（初期値）reversealternatealternate-reverse
- ※
reverseは@keyframesで定義したアニメーションが逆再生で繰り返されます。alternateは、偶数回めのみ逆再生（折り返し）します。 animation-play-state- アニメーションを再生させたり一時停止させたりできます。
running（初期値）paused
animation-fill-mode- アニメーションの前後に、スタイルをどう適用するかを指定します。※詳しくはマウスオーバーエフェクトのページで後述。
none（初期値）forwardsbackwardsboth
Comment & Pingback
81 Comments! for 動くCSSのためのメモ。
55cheese
凄い！
ボリュームも凄いし、まとめ方も分かりやすいし！
永久保存版ブックマークしておきました！
_watercolor
> 55cheeseさん
コメントありがとうございます！
よかったー、そう言ってもらえると励みになるのですXD。
ただ、メモなので、参考程度にどうぞー！
情報ってどんどん古くなるので…X)。
gonzalez
すごいです！ ありがとうございました。FBで紹介させていただきました。
_watercolor
> gonzalezさん
紹介していただきありがとうございますー！
励みになります:D！
くまモン
アニメーションの演出部分で構造が詳しく書いてあり、とても勉強になりました！
今後の情報も楽しみにしております(´∀｀)
_watercolor
> くまモンさん
ありがとうございます！コメントいただけてうれしいです:)。
CSSでもかんたんにアニメーションが作れるようになったし、GIFアニメとかSVGとかcanvasとかを使って、生き生きしたサイトが増えてきました。
中でもCSSのアニメーションは割とかんたんに、(いつものHTML+CSSコーディングの流れで）使う事ができると思って、今回まとめてみました。
今後Lopanもじゃんじゃん動いて（動かして）いきたいと思ってますので、どうぞよろしくお願いしますーX)！
Joseph Kani
とっても参考になりました^-^
_watercolor
> Joseph Kaniさん！
ありがとうございます！
よかった、うれしいです;D。
shige
CSSでアニメーション、こんなのできないかな〜っと思って辿り着きました。
とっても内容の濃い、素晴らしい記事で感動しました。
良い勉強させていただきました＼(^o^)／
真似させていただいて、実際に作ってみたいなと＾＾
ありがとうございました！
_watercolor
> shigeさん
コメントありがたいですー！
ぜひ、いろいろ試してみてくださいねー:D！
ひろこ
こんばんは。
すごく為になる記事ありがとうございます。
１点お伺いしたいのですが、こちらの「ボタンでございます」（押すとへこむ）のcssを入れると他の箇所に干渉しているのか、ホバー時に前後のスペースがブラックアウトしてしまいます。当方素人の為、テンプレートを使用しており、cssの知識が全くありません。他のコードを見ないともちろん分からないとは思いますが、思い当たる原因や、「これを付け加えたらいいよ」などの何かいい方法あったらご教示くださいませ。お手数をお掛けしますがよろしくお願いします。
_watercolor
> ひろこさん、こんばんは。
コメントありがとうございます。
うーん…、黒くなっちゃうんですか？
もしかしたら、ホバー時に背景が黒くなるようなスタイルがどこかにあるのかもしれないですねー。
「.btn a:hover」のところを、下記のように記述すると直るかもしれません。
background-color: #3cc4bd !important;一度試してみてくださいー。。
ではでは、今後ともLopan.jpをよろしくです:)！
ひろこ
早速のご返事ありがとうございます！一度試してみます。今後もよろしくお願い致します。
もす
細かいところまで分かりやすい解説がありめちゃくちゃタメになりました！！(*´艸｀*)
ありがとうございます☆
_watercolor
> もすさん
お返事が遅くなっちゃいました、ごめんなさいX(。
こちらこそ、読んでくださってありがとうございますです
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
スライドショーで何か解決策はないでしょうか？？
よろしくお願い致します。
_watercolor
> chicoroさん
お返事が遅くなっちゃいまして申し訳ないです。
もう解決しちゃってるかもしれないですが…、6秒おきに切り替わるのところですよね。
…たしかにIEだとtranslateX(-100%)が10%くらいになっちゃってますね…（いま確認しました）！
ご連絡くれてありがとうですX)！
僕も結局わからずじまいだったので、translateX(-800px)にして、スライドした時だけ透明にしてごまかしてみましたX(！
動くCSSのためのメモ。 – 6秒おきに切り替わるスライドショー（IEのための）
@keyframes autoplay {0%, 16%, 100% { transform: translateX(0); opacity: 1; }20% { transform: translateX(-800px); opacity: 0; }20.001%, 96% { transform: translateX(800px); opacity: 0; }}もっとすてきな解決策などありましたらご教示いただけるとありがたいですー！
どうぞよろしくお願いいたします。
ぽんこつ
CSS初心者なのですが、サンプルと丁寧な解説がとても勉強になりました！
テクニックだけでなくサイト全体のデザインも素敵で参考になります。
ありがとうございました！
_watercolor
> ぽんこつさん
コメントありがとうございます！
参考にしていただけて、記事もよろこんでおりますよーXD。
kannam_style
cssでここまで出来ることに感動しました！
学習の参考にさせていたただきます！
_watercolor
> kannam_styleさん
はーい、コメントありがとうございますX)！
どうぞご参考までに;)。
masac225
CSSの無限の可能性を体感しました！
私がしたかったことがJS無しで再現が可能だったとは全く思っていませんでした(笑)
上の方と同じように、ブックマークに登録させて頂きました。
横スライドのタブメニューや、スライドショーなどが個人的には驚きました(^^)/
_watercolor
> masac225さん
ありがとうございますー！
CSSでアニメーションを表現できるようになったおかげで、今までJavaScriptで作っていた「動き」も簡単に実装できるようになりましたねー。
※ただし、記事ではinput要素などを使ってやってるところは、JavaScriptでclass名を書き換える方がよっぽどスマートなのであしからず…X)。
まさっく
スライドショーを導入したら、スクロールするときにどこの画面にもついてくる要素(?)に被さってしまいました。
解決法を教えてください！(実は初心者なので、ここはあまり立ち入ったことのない領域でした…)
(その様子は「ウェブサイトで」貼らせて頂いたページを見て頂ければお分かりいただけるかと思います)
_watercolor
> まさっくさん
コメントありがとうございます。
サイト拝見させていただきましたー:)。
さっそく、ご質問いただいた内容ですが、
div#header-fixedという要素に、z-indexプロパティで「2」以上の値を指定すれば直ると思います！要素が重なってしまう場合はたいてい「z-index」というプロパティで解決することが多いです。
ヘッダーなので、今後のことを考えて
z-index: 100;とかにしておくとよいかも:D。z-indexプロパティについて詳しくは下記ページをご参照くださいー。
ではでは、今後ともLopan.jpをよろしくです;)！
まさっく
ご返信ありがとうございます！無事直りました(笑)
これからもこのサイトを参考にさせて頂きたいと思います、宜しくお願い致します。
_watercolor
> まさっくさん
はーい、よかったー。
今後ともよろしくです;D！
りも子
記事を拝見しました。
参考にさせてもらっています。
質問なのですが、「詳細はあとから表示する」の項目で、type2(画像がくるんと回るやつです)の裏面も画像にすることは可能ですか？
もし可能であれば、教えていただけると嬉しいです！
_watercolor
> りも子さん
コメントいただきありがとうございますー！
さっそくさっそくご質問についてですが、くるんと裏返るやつ、もちろん両面とも画像にすることもできますよXD！
記事で紹介しているサンプルは、img要素を表面、dl要素を裏面にしてますけれど、
<li class="type2"><img src="img/image.png"><dl>... 中略 ...</dl></li>そのdl要素のところをimg要素に変えればよいです。cssで指定する時のために、どっちが表でどっちが裏だか分かるように、class名をつけておくとわかりよいです:)。
<li class="type2-2"><img src="img/image.png" class="front"><img src="img/image2.png" class="back"></li>記事中のサンプルと同じく、「表面だけ」、「裏面だけ」、「両面ある」のを並べてみました。
動くCSSのためのメモ。 – くるんと裏返っても画像
詳しくは下記に、両面あるのだけをファイルにまとめましたので、ダウンロードしてみてくださいませー;)。
ではでは、今後ともLopan.jpをよろしくです！
りも子
ありがとうございます！
無事実装できました！！
もっと欲を言うと、このクルクルするヤツを横並びにしたいのですが…
何度やっても縦に並んでしまいます…orz
お手数かけますが、ぜひ横並びにする方法を教えていただければ、嬉しいです。
何度もすいません
りも子
いろいろと試してるうちにできるようになりました！！
本当にありがとうございました(*‘∀‘)
_watercolor
>りも子さん
あわゎ、お返事遅くてごめんなさい…X(！
横並びできてよかったです。
コメントありがとうございますーXD♪！
eric88
こんにちわ。いつも参考にさせて頂いてます。
丁寧で可愛くて解りやすいです！
1点質問よろしいでしょうか…
「:targetを使ってタブコンテンツ」の実装をしたのですが、
初めに1つ目のタブを表示させたいのですがうまくいきません。
チェックボタンでやってみたものは大丈夫なのですが、
targetをタブ1のどこかに記述しておくのでしょうか？
cssで何か追記するのでしょうか？
色々やってみてもうまくいかないので教えて頂けると嬉しいです…
_watercolor
> eric88さん
こんにちわ！ブログ読んでくれてありがとうございます:D。
:targetを使ってタブコンテンツのところですねー。
ここは、
:targetというセレクタを使って、表示するタブを選択しているので、CSSじゃなく、アドレスバーのURLの末尾に「#tab-1」とか、タブに付けているid属性を記述しておかないといけないんです。
最初から一番めのタブが表示されるように指定しておけば、URLの末尾に何もなくても一番めのタブが表示されますけど、
.tabBtn li [href="#tab-1"] {background-color: #cd5c5c;}.tabContents section:nth-child(1) {opacity: 1;background-color: #fff;}けどその場合、どれかが選択されたら非表示にするための指定も追加しないといけません。。
.switch:target ~ .tabBtn li [href="#tab-1"] {background-color: lightSeaGreen;}.switch:target ~ .tabContents section:nth-child(1) {opacity: 0.1;background-color: transparent;}ぜひ、いろいろ試してみてくださいーX)。
ではでは、今後ともLopan.jpをどうぞよろしくです！
eric88
早急の返信ありがとうございます！
丁寧な解説とサンプルのおかげで無事に実装することができました‼
人気サイトなので数日は無理だと思っていたのですが…
おかげ様で先ほどお客様に見て頂いたのですが、とても喜んで下さってました。
できるだけjs使わないでほしいとの依頼だったので本当に感謝です！
これからも色々勉強させて頂きます。
ありがとうございました^^
_watercolor
> eric88さん
お返事ありがとうございます！
無事解決できたようで何よりですー;D。
ちゃっぴー
こんにちは
記事を拝見しました。
勉強させてもらっています。
質問なのですが、少し説明しづらいのですが、
両サイドから画像がでてきて真ん中でぶつかって止まる →■■←
みたいな事もアニメーションで可能なのでしょうか？
メインイメージのスライド部分に使いたいなと思いまして
お忙しいと思いますが、返信頂けると幸いです。
よろしくお願い致します。
_watercolor
> ちゃっぴーさん
コメントありがとうございます。
両サイドから画像が出てくるスライドショー、できますよ;)！
試しに作ってみましたので、見てみてくださいませ。こんな感じでよかったでしょうか…。
HTMLの構造は、スライドショーのところで紹介しているものとほとんど同じで、section要素の中の画像を2つずつにして、それぞれ、
left-imgとright-imgというclass名を付けてます。<div class="slideContents"><section id="slide1"><img src="../img/pain_campagne.jpg" alt="" width="300" height="200" class="left-img"><img src="../img/pain_spandauer.jpg" alt="" width="300" height="200" class="right-img"></section><section id="slide2">︙記事の中で紹介しているものは、チェックされている
<input>が切り替わるたびに、.slideContentsをスライドさせてました。けれど上のサンプルでは、その中の2つの画像を動かすことにしてます。チェックされてない時は左右に配置しておいて、チェックされてる時だけ真ん中にくるようにしてるんです。
詳しくは下記に、ファイルをまとめましたので、ダウンロードしてみてくださいませX)。
上のサンプルだとぶつかってる感じがしないので、animationプロパティを使って、「ぶつかってる感じ」の動きも作ってみましたー:D。
HTMLの構造は上のサンプルと同じなのですけれど、CSSが違って、スライドしてくる画像の動きを
@keyframesで作って、それをanimationプロパティで指定してます。こちらのサンプルも、上のダウンロードファイルに入れてますので、見てみてくださいーX(。
ではでは、今後ともLopan.jpをどうぞよろしくですXD！
ちゃっぴー
返信ありがとうございます。
サンプルを作ってくださったのもそうですが、返信が来たことに感激です!!
まさに、こんな感じですありがとうございました。
スライドの部分でも紹介されいているようにオートプレイも可能なのでしょうか？
また、分からなかったら参考にさせていただきたく思います!
_watercolor
> ちゃっぴーさん
いえいえ、よかったー。お返事ありがとうございました。
オートプレイもできますよ！すぐ見せれなくてごめんなさいですけれど…、
お時間のあるときに作ってみようかなーと思いますーX)。
ではではー！
hiyashikyuri
普段サーバーばっかりなので、フロントの表現力に感激しました！
良い記事をありがとうございました。また参考にさせて頂きます！
_watercolor
> hiyashikyuriさん
コメントありがとうございます！
サーバーは苦手です…、けど、フロント楽しんでいただけてよかったです:D。
今後とも、どうぞよろしくです！
ゴーディー
6秒おきに切り替わる
をコピペしてみたのですが、上手くうごかなかったのですが、どうすればいいでしょうか？
<div id="wrapper"><div id="slideshow"><div class="slideContents"><section id="slide1"><img src="../img/slide_01.png"></section><section id="slide2"><img src="../img/slide_02.png"></section><section id="slide3"><img src="../img/slide_03.png"></section><section id="slide4"><img src="../img/slide_04.png"></section><section id="slide5"><img src="../img/slide_05.png"></section></div></div></div>.slideContents section {-webkit-animation: autoplay 30s infinite;animation: autoplay 30s infinite;}.slideContents #slide1 {position: relative;-webkit-animation-delay: 0;animation-delay: 0;}.slideContents #slide2 {-webkit-animation-delay: -24s;animation-delay: -24s;}.slideContents #slide3 {-webkit-animation-delay: -18s;animation-delay: -18s;}.slideContents #slide4 {-webkit-animation-delay: -12s;animation-delay: -12s;}.slideContents #slide5 {-webkit-animation-delay: -6s;animation-delay: -6s;}@-webkit-keyframes autoplay {0% { -webkit-transform: translateX(0); }16% { -webkit-transform: translateX(0); }20% { -webkit-transform: translateX(-100%); }20.001% { -webkit-transform: translateX(100%); }96% { -webkit-transform: translateX(100%); }100% { -webkit-transform: translateX(0); }}@keyframes autoplay {0% { transform: translateX(0); }16% { transform: translateX(0); }20% { transform: translateX(-100%); }20.001% { transform: translateX(100%); }96% { transform: translateX(100%); }100% { transform: translateX(0); }}_watercolor
> ゴーディーさん
コメントありがとうございますー。
記事内のソースコードは解説してないところはハショっちゃってるので、そのままだと不十分なんです…、わかりにくくてごめんなさいX(。
6秒おきに切り替わるスライドショーのソースコードぜんぶを以下に置いてますので、ダウンロードしてみてくださいー！
手短ですみませんが、詳しくはサンプルのファイルを参照くださいませませ…X)！
chai
はじめまして、chaiと申します。
私は、HTML・CSS初心者でして
画像のスライドをどうやって作るのか、いろんなページをみながら
勉強しております。
こちらのサイトが一番参考になりました。
本当にありがとうございます。
その中でわからない部分があるので
ぜひ、ご教示いただきたいのですが、
タブ切り替えで横スライドさせるCSSがあると思うのですが
上に付いてるタブ欄を下にやるには、どのようなhtmlにしたらよいでしょうか？
初歩的すぎる質問で大変恐縮ですが、ご教示いただけると助かります。
_watercolor
> chaiさん
はじめまして。
ブログ読んでいただいてありがとうございます！
参考にしていただけてうれしい限りですX)。
「横にスライドして切り替わる」のところですねー。
上にあるタブを下に配置するには、単純にタブのhtml要素をコンテンツの下に移動すればよいですよ！
サンプルでいうと、
<ul class="tabBtn">を、<div class="tabContents">の下に移動します。<div class="tabs"><input type="radio" name="switch" id="tab-1" checked><input type="radio" name="switch" id="tab-2"><input type="radio" name="switch" id="tab-3"><input type="radio" name="switch" id="tab-4"><input type="radio" name="switch" id="tab-5"><ul class="tabBtn"><li><label for="tab-1">タブ1</label></li><li><label for="tab-2">タブ2</label></li><li><label for="tab-3">タブ3</label></li><li><label for="tab-4">タブ4</label></li><li><label for="tab-5">タブ5</label></li></ul><div class="tabContents"><section>... 中略 ...</section></div></div>↓<div class="tabs"><input type="radio" name="switch" id="tab-1" checked><input type="radio" name="switch" id="tab-2"><input type="radio" name="switch" id="tab-3"><input type="radio" name="switch" id="tab-4"><input type="radio" name="switch" id="tab-5"><div class="tabContents"><section>... 中略 ...</section></div><ul class="tabBtn"><li><label for="tab-1">タブ1</label></li><li><label for="tab-2">タブ2</label></li><li><label for="tab-3">タブ3</label></li><li><label for="tab-4">タブ4</label></li><li><label for="tab-5">タブ5</label></li></ul></div>スライドを動かすために必要な条件は「input要素が、動かしたい要素よりも上にあること」なので、ul要素の場所はどこでも動かして大丈夫なのです:D。
「タブボタンが下にあるタブコンテンツ」のサンプルを以下に置いてますので、ダウンロードして見てみてくださいませ;)。
というわけで、今後ともLopan.jpをどうぞよろしく、です！
chai
ありがとうございます！
先程、教えて頂いた方法でうまくできました。
かなり悩んでいたので解決でき本当に助かりました。
今後とも参考にさせて頂きます！
_watercolor
> chaiさん
よかったですー;)。
今後ともよろしくです！
mach3
はじめまして！
実践的なサンプルの数々、とても為になり有り難いかぎりでございます！
一つ質問させていただきたいのですが、
サンプルの横にスライドして切り替わるタブをラジオボタンではなく、aタグのアンカーバージョンで作成しているのですが、
例えばタブ5を表示していてページをリロードしたり、直接URLの打ち込みで（アドレス末尾に#tab-5というふうに）タブ5を表示させると、一度タブ1を表示して、そこから横にスライドしてタブ5が
表示されてしまうのですが、直接タブ5を表示させたいのですが方法はございますか？
まどろっこしい質問で恐縮ですがお教えいただけますと幸いです！お手数をお掛けしますがよろしくお願いします。
_watercolor
> mach3さん
はじめまして、_watercolorです。
こちらこそありがとうございます、読んでいただけていて嬉しい限りですXD！
ご質問について、いろいろ試してみたのですけれど、URLの末尾にアンカーリンクを付けた状態だと、どうしてもスライドしてしまいますねー…X(。（※Chromeは最初のアクセス時だけは大丈夫ですけれど、リロードするとスライドしちゃいます…。）
なので、こちらの回答と同じ要領で、アンカーリンクのないURLでリンクした時の初期位置を、5番めのタブが表示された状態になるようにしてみました:)。アンカーリンクが付いた状態でリロードした時には、5番めのタブからスライドするカタチになってしまいますけど…。
ポイントは下記箇所。アンカーリンクも何もないデフォルトの状態で、5番めのタブが選択されてる状態にしておきます。
ただし、そのままだと、常に5番めのタブが開きっぱなしになっちゃうので、
.switchの要素のどれかが:targetの状態になったら、5番めのタブは非表示になるようにしとかないといけません（5〜7行め）。/* ハッシュがない時は 5 をデフォルトにする */.tabBtn li [href="#tab-5"] {background-color: #cd5c5c;}.switch:target ~ .tabBtn li [href="#tab-5"] {background-color: #20b2aa;}/* ハッシュがない時は 5 をデフォルトにする */.tabContents section:nth-child(5) {opacity: 1;}.switch:target ~ .tabContents section:nth-child(5) {opacity: 0.1;}.tabContents {-webkit-transform: translateX(-80%);transform: translateX(-80%);}サンプルの一式は下記からダウンロードいただけます;)。
てなもんで、今後ともLopan.jpをどうぞよろしくです！
mach3
迅速ご丁寧なご回答、そしてサンプルまでご提供いただき誠にありがとうございます！
本来、単一ページでそれぞれ展開するべく5ページを横にアニメートするタブ内で展開したかったので外部からのリンク等でダイレクトに表示させたかった次第でございました。
やはり、URLでリンクした時の（リロードも含め）スライド挙動は仕方ないことだったのですね。
自身でネチネチ考えていたのですがwatercolor様よりご回答いただきスッキリいたしました。
いただいたサンプルもチャレンジさせていただきます。
重ね重ねになりますが、本当にありがとうございました！
引続き実践的な記事を楽しみに致しております！
_watercolor
> mach3さん
いえいえ。こちらも勉強になりましたー。
今後なにか良策が見つかったらこっそり更新するかもです;)。
ではでは、乞うご期待よろしくです！
ネオジム
ドロワーメニューは色んな形のものがありますがCSSのみという形だと情報がなかなか少なかったり
満足いく機能じゃなかったりで結果こちらにたどり着きました
実装そのものは出来たのですが
ドロワーメニュー展開時に、こちらのサンプルとは異なりContentsスペースが操作出来てしまいます
試行錯誤してみたのですが原因がさっぱり…
見落としやすいトラブルシューティングがあると嬉しいかもしれません
_watercolor
> ネオジムさん
コメントでのご指摘ありがとうございます！
「画面の端からニュッと出るメニュー」のところ、たしかに、記事中のサンプルだと、ドロワーメニューを展開した時にコンテンツ部分がスクロールできなくなりますね…。
理由は、ソースコードを表示するための、タブコンテンツが原因でした…X(。すみません。
サンプルでは、「PREVIEW」タブを開いた時に表示される
<div class="tab-container">に、overflow: auto;が指定してあって、このdiv要素の中身がスクロールする状態になってます。ドロワーメニューを開いた時に表示させている、半透明の<label for="navTgl" class="close">がそのスクロールされる要素の上に重なって、スクロールできなくしてる、ということみたいですXp。サンプルと同じ状況を作るには、サンプルのソースコードの
<div id="wrapper">をさらに<div class="container">などで括って、その要素の中身をスクロールするようにすればよいです。.containerに、以下のスタイルを指定すれば、その中身がスクロールするようになります。.container {overflow: auto;width: 100vw;height: 100vh;}※下の、スクロールできる方のサンプルでは、ウィンドウの中身（html要素）がスクロールしている状態になります。比べてみると、スクロールできない方は、スクロールバーが半透明の要素の下に隠れてて、スクロールできる方は、スクロールバーが半透明の要素の上にあるのがわかりますね…！
詳しくはサンプルをダウンロードして見てくださいませーX)
アシベ
アニメーションのみならず、ラジオボタンとチェックボックスの利用法についても細かく記載されており助かります。
ラジオボタンとチェックボックスの有無判定のラベルについてもとても勉強になります。
ドロワーメニューもJqueryなしでやれそうですし・・・
(ラベルなどそのまま普通に記述すると下の要素関連がチェックボックスなどで囲んでいる箇所までしか動いてくれないので困ってました)
最近は、Jqueryを利用しなくてもある程度(よほど複雑ではない動きなら)のことはCSSのみでも再現できるようになってきていますね。
いままではJqueryで指定した要素をクリックしたときの状態などをコードで打ち込んでいたりしましたが、チェックボックスやラジオボタン自身をクリックしても基本的には判定の有無で同じ動きが出来るんではないかと最近思い始めました。
個人的な意見ですが、よくカルーセルで自動的にアニメーションしていくUIをみかけます。
カルーセルと言えば、JqueryやJavascriptのプラグインなど(定番だとslick.js)が使われていますが、3つほど不満があります
1:切り替わるアニメーションがはやいとほしい情報が流れてしまい次まで待つ必要がある。または誤クリックしてしまう。
2:カルーセルの左右にある矢印に目が行ってしまう
3:スマホ・タブレットなどでフリックしてスライドして入れ替わるのはいいが、●などのボタンを押しても同じ動きをするのでフリックして指を擦り減らすか●をクリックして移動させるかどちらがよいのか
※●は写真や情報の数を示すだけの存在なのか？
など上記の3つの不満があります。
結局動き的に同じなら(コーディングやメンテなどをする場合などを考慮するとプラグインの方が断然よいですが)
ラジオボタンを利用してカルーセルの変わりに利用しても別に問題ないのではないかとおもいました。
前置きが非常に長くなりましたが質問なのですが、あまり利用する機会は少ないとは思いますが(display:flex)で子要素コンテナ箇所を(display:flexのorder)を利用して一時的な要素の並べ替え(昇順・降順)をラジオボタンまたはチェックボックスで出来ないかと考えております。(:checked ~)の判定で出来るとは思うのですが
アシベ
先ほど質問しました。(display:flex)については記事内の例題を参考にしましたらうまくいきました。
昇順・降順・表示の3つのボタンを用意しており、あらかじめ最初の1つ目のsection以外は非表示にして「表示」ボタンを押すと非表示状態の要素がアニメーション表示フェードインしてくるようにしていましたが、他のボタン(昇順・降順)を押すと最初の1つ目のsection以外の要素がまた非表示の状態になりました・・・(ボタンの切り替えで初期化?)
やはりこのあたりはJqueryなどで判定の有無を管理したほうがいいのだと感じました。
_watercolor
> アシベさん
いつもありがとうございますー！
カルーセル、悩ましいですよね…。あると便利な場面もあれば、邪魔になることもあるので、ほんとうに必要なのかどうか見極めねばなりません。
UIはデバイスに合わせて、デスクトップならクリックがしやすいので、左右の矢印とチョボがあっても良いのかなと思いますし、タッチデバイスならばフリックの方が自然な操作だと思うので、左右に続きがあることだけわかるようにレイアウトして、矢印もチョボもなくても良いかな、と思います:)。
フレキシブルボックスのorderプロパティを使う方法、「なるほど！」と思いましたが、orderプロパティは位置じゃなくて順番を指定するだけなので、スムーズなアニメーションは敵いませんでした…。
けれども、コメントいただいたみたいに、フェードイン・フェードアウトで切り替える方法ならばうまい具合にスライドショーしましたね;D！
※とはいえ、input要素はあくまでフォームのための要素なので、動的な処理はやっぱり、JavaScriptを使った方がよっぽどスマートですね…X)。
アシベ
コメントありがとうございます!
サンプルもご用意していただきありがとうございます!!
そうですね。orderプロパティは順番を指定しているだけでちゃんとした並び替えを望むのであればJavascriptなどが必要不可欠になりますね。しかし、コンテナの中身をちょこっと一度か二度変えれたらおもしろいかなと思いました。
たしかに、もとを正せばinput要素は本来はフォームの部品の一部ですね。
なので、動的にしたい場合にはおとなしくJavascriptになりますが近年のinput要素でもこんなことできるんだよ!という流れをみると、あぁ、こんなやり方もあるんだなぁとと感じる私的にはとても魅力的なものに映りました。
※最近は斜めラインを利用したデザインのサイトをよく見かけるようになりましたが、乱用はあまりしないでトップページかコンテンツの区切り程度に抑えたほうがいいかなと感じました。
モカママ
今回タブについての記事を参考にさせていただきました。
とてもわかりやすく実装することができました。
1点教えていただきたいのですが、タブの横並びのボタン部分がスマートフォンでははみ出して表示されます。
コンテンツはおさまっています。
ご教示いただけると幸いです。
よろしくお願いいたします
_watercolor
> モカママさん
コメントありがとうございます、お役に立てていただけてうれしいです！
タブコンテンツのところですね。
たしかに！記事中のサンプルだとタブボタンの文字数が少ないから大丈夫ですけれど、下のサンプルみたく、文字数が多いと改行しちゃうし、英単語とかは改行せずにタブボタンを押し広げちゃいますね。。しかも、チェックされているタブボタンの色の高さもバラバラです…X(。
ひとまず、タブボタンの高さを揃えるには、タブボタンのli要素とlabel要素に、以下の指定を追記すればよいです。（詳しくは、よこ並びのCSS。という記事の行数が違ってもボタンのサイズを揃えるの項を参照のこと;D。）
.tabBtn li {overflow: hidden;}.tabBtn li label {margin: -40px 0;padding: 50px 10px;}あとは、画面からハミ出しちゃうタブボタンをどうするか…、あまり良くない方法だと、無理やり改行する設定にしちゃう手があります。
word-wrap: break-wordを指定すると、単語の途中でも要素の端まで来たら自動改行するようになります。.tabs li {word-wrap: break-word;}もしくは、ハミ出したタブボタンは、横にスクロールできるようにするという手もあります。
ul要素に対して、縦方向のみスクロールできないように指定することで、横方向のみスクロールできるようにしています。もともとul要素に指定していた
display: tableのままだとスクロールコンテナにならないので、blockに変更しています。※また、li要素の横幅が
20%のままだと、画面の幅が広い時に、なぜかタブボタンが横幅いっぱいに広がりません¦(。。ここでは10%と指定しています（画面幅が広いほど、この値は小さい方が良いみたいです）。.tabBtn {display: block;overflow-y: hidden;}.tabBtn li {width: 10%;}あるいは、いっそタブボタンをたて並びにするというのも、ひとつの手です。
下のサンプルでは、画面の横幅が567px以下の時にはたて並びになるようにしています。
※567pxとは、iPhone5の縦の長さが568pxなので、“それ未満”（縦持ちの時のみ適用される）という値になります:D。
@media all and (max-width: 567px) {.tabBtn li {display: block;width: auto;border-right: 0;border-bottom: 1px solid #fff;}.tabBtn li:last-child {border-right: 0;}}てなもんで、今後ともLopan.jpをどうぞよろしくです;9！
モカママ
できました！！
ちなみに、横にスクロールを試してみました。
今のところ４つしかないですが今後増えていく可能性があるので。
一つの回答だけでなく、色々な提案をしてくださるところが流石です！
本当に感謝してます。
どうもありがとうございました。
_watercolor
> モカママさん
よかったー:D！
お役に立てたのならうれしい限りですXD！
今後ともLopan.jpをどうぞよろしくです。
noma
サイトを作っているんですが、URLを”参考にした”ということで、
貼り付けてもいいですか？
_watercolor
> nomaさん
コメントありがとうございますー！
サイトがブログならばOKです（なにか商品を紹介するサイトとか、WebサービスとかのサイトならNGですX)）。
てなもんで、よろしくお願いいたします。
＃サイト作り頑張ってくださーいー;D！
139osos
CSSの練習に活用させていただきました！初心者ですが非常に分かりやすく参考になりました。
スライドの部分のCSSを参考に作っていたのですが、１つどうにもうまくいかない点があったので質問をさせてください。
#wrapperの中に記述したoverflow:hidden;がどうにも適用されず、右で次に流れるスライドが待機していたり左には流れていったスライドが見えてしまったりという状況から解決しません…自分でわかる限りは調べたり読み返したり試行錯誤したのですがどうにも手詰まりです。
コードを見ないと分からない等あるかもしれませんが、考えられる可能性を教えていただけないでしょうか。
_watercolor
> 139ososさん
コメントありがとうございますー。
スライドショーのところですね。
なんと…！記事中のサンプルのHTMLに
#wrapperにあたる要素が書かれてないのが原因ですね、ごめんなさい！サンプルコードが分かりづらく、こちらの不手際でお手数おかけしてしまいすみません…X(！
<div id="wrapper"><input type="radio" name="slideshow" id="switch1" checked><input type="radio" name="slideshow" id="switch2"><!-- 中略 --></p></div></div>以下に、スライドショーの部分だけひとまとめにしたファイルを用意しましたので、見てみてくださいX)！
（HTMLやCSSはダウンロードして見てみてくださいませ。。）
※#wrapper要素を省いたり、input要素を#slideshow要素の中に入れたりして、記事中のサンプルよりもシンプルな構造にしてます。わからないところがあったらまたコメントくださいませ…:)
ではでは、今後ともLopan.jpをどうぞよろしくです;D！
bjorn
はじめまして。
このサイトを見て、パララックスひいてはCSSの事を深く知る事が出来ました。
とてもわかりやすく、デザインも親しみやすくて最後まで挫ける事なく色々と実装できました。
本当にありがとうございます。
ひとつ、質問があります。
パララックスを実装するとモーダル機能が失われてしまいます。
bootstrap4を基本にして色々試行錯誤しながら作っています。
お手数をおかけしますが、もし、解決できそうならお力添えを是非お願いしたいです。
よろしくおねがいします。
_watercolor
> bjornさん
はじめまして、コメントありがとうございます。
参考にしていただけて記事も喜んでおりますX)！
さてさて、ご質問についてです。
以下に、試しに、記事中のパララックスのサンプルに、Bootstrap 4のモーダルを実装してみました。「この記事を読む」ボタンをクリックするとモーダルが開くようにしてます:D。
パララックスするために、
#wrapper要素の中身をスクロールするようにしている関係で、モーダル用に用意した要素が見切れちゃうのかなと思います。なので、モーダルとして開く要素を#wrapper要素の外に書いて、以下のような構造になるようにしてみました。<body><div id="wrapper" class="parallax">...</div><div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">...</div></body>どうでしょうか…、こちらで解決できればうれしいです。
てなもんで、今後ともLopan.jpをどうぞよろしくです！
ちとせあめ
記事を拝見しました。
参考にさせてもらっています。
質問なのですが、「詳細はあとから表示する」の項目で、画像を長方形にして、後から表示するものも同じようにしたいのですが、どこをいじればいいのでしょうか？
もし可能であれば、教えていただけると嬉しいです。
_watercolor
> ちとせあめさん
こんにちは、コメントありがとうございます。
詳細はあとから表示するのところ、たしかに、違うサイズの画像に変えるとレイアウトが崩れちゃいますね…X(
というのも、上のサンプルでは、画像を括っているli要素やdl要素にまで、width/heightプロパティで、がっちりpx単位でサイズを指定してるから、画像サイズが変わっても、li要素の大きさは一定なのですよね…。
li要素とdl要素のサイズの指定を
pxでなくて、%で指定しなおせば、画像サイズに合わせて要素のサイズも変わるはずです:)ここでは、li要素にはサイズを指定せず要素の内容に準拠した大きさになるようにして、dl要素はli要素内をみっちり埋めるように縦横
100%という指定にしてます。.details {list-style: none;top: 0;height: 180px;margin: 0;padding: 0;text-align: center;}.details li,.details dl {width: 200px;height: 180px;width: 100%;height: 100%;}画像がちゃんと表示されるようになりましたけれど、なんだかガタガタしてるし、あとから出てくる要素の大きさもチグハグしてますね…。
底辺が揃ってないのは、vertical-alignプロパティの初期値
baselineの所為:(。li要素にvertical-align: bottom指定して底辺で揃えて、img要素にはvertical-align: middleを指定します。.details li {display: inline-block;position: relative;margin: 0 5px;letter-spacing: 0;vertical-align: bottom;}.details li img {vertical-align: middle;}うん、いい感じ。
あとは、3つめのサンプルの背景の::before/::after擬似要素も、
pxでサイズ指定してました。これも%で指定し直します。width/heightプロパティだけじゃなく、変形するときのtransformプロパティのサイズも%に変更します。.details .type3 dl::before,.details .type3 dl::after {content: "";display: block;position: absolute;top: 0;left: 0;width: 100px;height: 180px;width: 50%;height: 100%;background: #cd5c5c;opacity: 0;transition: opacity .6s, transform .6s;}.details .type3 dl::before {transform: translateX(-175px) skew(-30deg);transform: translateX(-175%) skew(-30deg);}.details .type3 dl::after {transform: translateX(275px) skew(-30deg);transform: translateX(275%) skew(-30deg);}.details .type3:hover dl::after {transform: translateX(100px) skew(0);transform: translateX(100%) skew(0);}画像サイズに合わせて、あとから出てくる要素のサイズも変わるようになりましたね！
詳しくは、下記サンプルを参照してみてくださいー。ではではX)。
ちとせあめ
丁寧にわかりやすく教えていただきありがとうございます！！
とても参考になりました！！