JavaScriptは適切に利用することが大事!HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
Post on:2017年10月17日
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。
スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。
HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。
You can get pretty far in making a slider with just HTML and CSS
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- Step 1: 最初にセマンティックなマークアップ
- Step 2: flexboxを使ってスライダーを実装
- Step 3: スマホの操作に対応
- Step 4: スナップするポイントを設定
- Step 5: ジャンプリンクの設定
- Step 6: よりスムーズな動きにする
- Step 7: 必要ない場合は非表示に
- Step 8: 演出を加える
- Step 9: スライダーの完成
- HTMLとCSSで実装した時の限界
- ほかに制限はありますか?
Step 1: 最初にセマンティックなマークアップ
スライダーの各スライドの実装は、下記のように簡単です。
1 2 3 4 5 6 7 |
<div class="slider"> <div class="slide" id="slide-1"></div> <div class="slide" id="slide-2"></div> <div class="slide" id="slide-3"></div> <div class="slide" id="slide-4"></div> <div class="slide" id="slide-5"></div> </div> |
Step 2: flexboxを使ってスライダーを実装
flexboxを使用すると、数行のCSSで各スライドを互いに隣り合わせて配置し、スクロールさせることができます。
1 2 3 4 5 6 7 8 9 10 11 |
.slider { width: 300px; height: 300px; display: flex; overflow-x: auto; } .slide { width: 300px; flex-shrink: 0; height: 100%; } |
ここまでの実装で、下記のようになります。
flexboxの実装は、下記が詳しいです。
Step 3: スマホの操作に対応
Webkitベースのブラウザで、スワイプ操作ができるように指定します。
1 2 3 4 5 |
.slider { ... -webkit-overflow-scrolling: touch; } |
スワイプ操作で、するするスクロールさせることができます。
Step 4: スナップするポイントを設定
各スライドをスナップポイントで所定の場所にスナップさせます。
1 2 3 4 5 6 7 8 9 10 |
.slider { ... -webkit-scroll-snap-points-x: repeat(300px); -ms-scroll-snap-points-x: repeat(300px); scroll-snap-points-x: repeat(300px); -webkit-scroll-snap-type: mandatory; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; } |
これで操作が快適になります。
Step 5: ジャンプリンクの設定
スライダーはおそらく特定のスライドにジャンプするための小さなUIを持っているので、正しいスライドにジャンプするアンカーリンクを実装します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="slide-wrap"> <a href="#slide-1">1</a> <a href="#slide-2">2</a> <a href="#slide-3">3</a> <a href="#slide-4">4</a> <a href="#slide-5">5</a> <div class="slider"> <div class="slide" id="slide-1">1</div> <div class="slide" id="slide-2">2</div> <div class="slide" id="slide-3">3</div> <div class="slide" id="slide-4">4</div> <div class="slide" id="slide-5">5</div> </div> </div> |
関連するコンテンツやセマンティックなものへのリンクとして実際に動作するリンクをアンカーにするので、問題はありません。
スライダーの上に、アンカーリンクを配置します。
Step 6: よりスムーズな動きにする
デスクトップでもスマホでも、スライダーの動きがよりスムーズになるようにします。
1 2 3 4 5 |
.slides { ... scroll-behavior: smooth; } |
Step 7: 必要ない場合は非表示に
ブラウザが「scroll-snap-type」をサポートしている場合はスナップするので、ボタンを非表示にしておきます。
1 2 3 4 5 |
@supports (scroll-snap-type) { .slider > a { display: none; } } |
Step 8: 演出を加える
スライドがアクティブな時、演出を加えてみます。
スライドをナビゲートするボタンの1つがクリックされると、URLは#hashに変わり、その時に「:target」が有効になります。
1 2 3 |
.slides > div:target { transform: scale(0.8); } |
アクティブ時にスケールを変更するエフェクトを加えました。
チェックボックスのハックを使って、このエフェクトを実装することもできます。しかし、その実装はセマンティックでも、アクセシブルでもありません。
Step 9: スライダーの完成
これでスライダーが完成しました。
実装は、下記ページで確認できます。
See the Pen Real Simple Slider by Chris Coyier (@chriscoyier) on CodePen.
HTMLとCSSで実装した時の限界
「:target」を使う実装はきちんとしたテクニックですが、例えば、ページがハッシュなしで読み込まれた場合はうまくいきません。また、ユーザーがボタンを使用せずにスクロールまたはフリックした場合も同じです。私は、HTMLとCSSだけでこれを回避する方法はないと思いますし、HTMLとCSSの完全な失敗ではないと思います。それはJavascriptの領域です。
JavaScriptはアクティブなスライドが何であるかを知ることができ、アクティブなスライドを設定できます。Intersection Observer APIを使うと簡単です。
参考: 要素がビューポートに表示されているかを判定できる -Intersection Observer
ほかに制限はありますか?
ここではHTMLとCSSでどこまでできるのか、試してみました。
- マウスでフリックできるようにしたいですか?
それはマウスの標準的な動作ではないため、DOMイベントを使用してJavaScriptで実装する必要があります。 - スライドが変更されたときを知りたいですか? コールバックのように?
それはJavaScriptの領域です。 - 自動再生が必要ですか?
チェックボックスをチェックして、@keyframesでアニメーションを制御することで、初歩的な何かを行うことができるかもしれませんが、限定的な対応になります。 - 無限に一方向にスクロールさせ、必要に応じて繰り返しますか?
それは、DOM内でクローンを作成したり、物を動かしたりする必要があります。marqueeタグの誤用です。
私がここで言いたいことは、JavaScriptを必要とする前にできることがたくさんあるということだけです。ベースをしっかりすることで、あなたがその上に何をするにかかかわらず、素晴らしいフォールバックを提供することができます。
sponsors