CSSで作るスライダーHTML

CSSだけで作るレスポンシブ対応「アコーディオンスライダー」(コピペOK)

この記事は最終更新から２年以上経過しており、内容が古い可能性があります

HTMLとCSSだけで動くアコーディオンSlider。

パネル数、サイズ、タイトルの有無もカスタマイズ自在。横幅%指定、高さも横幅に連動して可変するのでレスポンシブもバッチリです。

リンクやテキスト、画像も入れられるアコーディオンスライダーは、バナーにもナビゲーションメニューにも使えて結構便利。

スマホでもhoverが反応するようontouchstart="" を設定しています^^;

CSSだけで動かしているから、とっても軽い!!
コードもシンプルなので、カスタマイズも簡単ですよ~^^v

同じテーマの記事
このページの目次
  1. Demo
  2. html
    1. HTMLコード(コピペOK)
    2. HTML カスタマイズと注意点
  3. CSS
    1. CSSコード(コピペOK)
      1. 基本パターン全コード (このままコピペで利用できます)
    2. CSSカスタマイズと注意点
      1. 1. 共通設定
      2. 2. パネル( li ) 個別設定 / アコーディオン初期位置など
      3. 3. アコーディオン設定 / パネルの動き

Demo

これが出来上り^^

html

  • PC      ⇒ hoverでパネルが動き、マウスが離れると元の位置に戻ります。
    スマホ ⇒ タップでパネルが動き、他をタッチすると元の位置に戻ります。
  • パネル(<li>~</li>)ごとに、自由にテキストや画像を入れたり、リンクの有無を設定できます^^

HTMLコード(コピペOK)

<div class="slider-box" ontouchstart="">
  <ul>
    <!-- 新しいパネルはこの位置に追加します -->
    <li class="item5"><a href="#"></a></li>
    <li class="item4"><a href="#"></a></li>
    <li class="item3"><a href="#"></a></li>
    <li class="item2"><a href="#"></a></li>
    <li class="item1"><a href="#"></a></li>
  </ul>
</div>

HTML カスタマイズと注意点

  • 一番下の<li>~</li>(パネル)が一番左 (最初に開いているパネル) になり、上に行くほど右側の重なりになります。
  • hoverした際に「下に書かれたli (左パネル)」が連動して動くようになります。
    上にあるli (例えば item2 で item3 )を動かすことはできません。
  • パネル(<li>~</li>)を増減しやすいように連番を入れています。新しいパネル(<li>~</li>)を増やす場合は、上に追加し、class=”item6″、class=”item7″、、、のように連番となるclass名を付ける事をお勧めします^^; (css修正が分かりやすくなる為)
  • パネル(<li>~</li>)を増減した場合は、必ず【 CSS 】で対応する項目の修正が必要です

CSS

以下の CSS で見た目やアコーディオンスライダーの動きを制御しています。

変更可能箇所は「基本パターン全コード」下の CSS カスタマイズと注意点 にのソースに入れています。各項目ごとの変更方法や注意も併せてご覧くださいね^^

CSSコード(コピペOK)

基本パターン全コード (このままコピペで利用できます)

/* リセットとペース設定 ++++++++++ */
.slider-box, .slider-box ul, .slider-box li {
  box-sizing: border-box; padding: 0; margin: 0; 
} 

/* 1. 共通設定 ++++++++++++++++++++ */
.slider-box {
    background: #ccc; 
    margin-bottom: 2em; 
    padding: 10px; 
    width: 100%; 
}
.slider-box ul {
    position: relative; 
    height: 0; 
    list-style: none; 
    padding-bottom: 40%; 
    overflow: hidden; 
}
.slider-box li {
    position: absolute; top: 0; left: 0; 
    height: 100%; 
    transform-origin: left; 
    transition: transform 0.5s; 
    width: calc(100% - (50px * 4)); 
}
.slider-box a {
    display: block; 
    height: 100%; 
}
/* 2. パネル( li )個別 ++++++++++++++++++++ */
/* 2-1. パネル ⇒ 基本指定 */
.item1 {transform: translateX(0); z-index: 1; }
.item2 {transform: translateX(100%); z-index: 2; }
.item3 {transform: translateX(calc(100% + 50px)); z-index: 3; }
.item4 {transform: translateX(calc(100% + 100px)); z-index: 4; }
.item5 {transform: translateX(calc(100% + 150px)); z-index: 5; }
/* 2-2. パネル ⇒ 色や背景などの自由指定 */
.item1 { background: #8fe; }
.item2 { background: #8df; }
.item3 { background: #fce; }
.item4 { background: #fc7; }
.item5 { background: #cf8; }
/* 2-3. パネル ⇒ タイトル部分 */
.slider-box li:before {
    color: #fff; 
    display: block; 
    font: 2em / 1.2 Arial, sans-serif; 
    padding-left: 10px; 
    transform-origin: left top; 
    transform: rotate(90deg) translateY(-1.2em); 
}
.item1:before {content: 'Item1'; }
.item2:before {content: 'Item2'; }
.item3:before {content: 'Item3'; }
.item4:before {content: 'Item4'; }
.item5:before {content: 'Item5'; 
/* 3.アコーディオン設定 ++++++++++++++++++++ */
.item2:hover, .item3:hover ~ .item2, .item4:hover ~ .item2, .item5:hover ~ .item2, {
    transform: translateX(50px); 
}
.item3:hover, .item4:hover ~ .item3, .item5:hover ~ .item3 {
    transform: translateX(100px); 
}
.item4:hover, .item5:hover ~ .item4 {
    transform: translateX(150px); 
}
.item5:hover {
    transform: translateX(200px); 
}

CSSカスタマイズと注意点

ここでは各部ごとにソースを分け、変更についてソースにコメントを入れていますので、それを参考に変更してください。
特に注意が必要な部分は、ソース下にまとめて記載しています。

  • 変更可 ⇒ 自由に変更可能です
  • 削除可 ⇒ 設定が不要であれば削除OKです
  • 要注意 ⇒ アコーディオンに関する設定です
    この部分を間違えると思うように動かなくなりますのでご注意ください

1. 共通設定

/* リセットとペース設定 ++++++++++ */
.slider-box, .slider-box ul, .slider-box li {
  box-sizing: border-box; padding: 0; margin: 0; 
} 

/* 1.共通設定 ++++++++++ */
.slider-box {
    background: #ccc;        /* 背景色 - 変更可・削除可 */
    margin-bottom: 2em; /* 下余白 - 変更可・削除可 */
    padding: 10px;             /* 外枠  -  変更可・削除可 */
    width: 100%;                /* 画面又は親要素に対するサイズ - 変更可 */
}
.slider-box ul {
    position: relative; 
    height: 0;                          /* レスポンシブ対応の為、高さ 0 にする */
    list-style: none; 
    padding-bottom: 40%;   /* 横幅に対する%で高さ設定 - 変更可 */
    overflow: hidden; 
}
.slider-box li {
    position: absolute; top: 0; left: 0; 
    height: 100%; 
    transform-origin: left; 
    transition: transform 0.5s;              /* パネルの移動スビード - 変更可 */
    width: calc(100% - (50px * 4));      /* 巾 × 数(総数 - 1) - パネル(li)の巾*/
}
.slider-box a {
    display: block; 
    height: 100%; 
}
25行目 width — 開いたパネル( li ) 1枚の巾を計算します

ソースでは、畳まれているパネルが4枚、それぞれ50pxづつ見えるようになっています。

  • 4  　 ⇒ アコーディオンの畳まれているパネルの数( パネル総数 – 1 )
    パネルを増減した場合は、この数を変更してください。
  • 50px ⇒ 畳まれているパネル(2枚目以降)の見えている巾/1枚
    この巾は自由に変更可能です。
    ここで設定した巾を「2. パネル( li ) 個別設定」「3. アコーディオン設定」で利用します。

ここで、パネルの数、表示位置や画面巾に合わせ、開いたパネルの巾を計算します。

※ パネル数が多かったり、畳まれているパネルの巾が広いと、スマホ時のアコーディオンが見辛くなります。そのような場合はブレークポイントで枚数や見せ方を調整してください。

2. パネル( li ) 個別設定 / アコーディオン初期位置など

/* 2-1. パネル ⇒ 基本指定 */
.item1 {
    transform: translateX(0);       /* 初期位置 */
    z-index: 1;                            /* 重なり順 */ 
}
.item2 {
    transform: translateX(100%); /* 初期位置 */
    z-index: 2;                             /* 重なり順 */ 
}
.item3 {
    transform: translateX(calc(100% + 50px));  /* 初期位置  50px×1 */
    z-index: 3;                                                 /* 重なり順 */ 
}
.item4 {
    transform: translateX(calc(100% + 100px));  /* 初期位置  50px×2 */
    z-index: 4;                                                   /* 重なり順 */ 
}
.item5 {
    transform: translateX(calc(100% + 150px));  /* 初期位置  50px×3 */
    z-index: 5;                                                   /* 重なり順 */ 
}

/* 2-2. パネル ⇒ 色や背景などの自由指定   変更可・削除可 */
.item1 { background: #8fe; }
.item2 { background: #8df; }
.item3 { background: #fce; }
.item4 { background: #fc7; }
.item5 { background: #cf8; }
/* 2-3. パネル ⇒ タイトル部分 タイトル不要時は以下を削除 */
.slider-box li:before {
    color: #fff;                                /* 文字色  変更可・削除可 */
    display: block; 
    font: 2em / 1.2 Arial, sans-serif; /* 文字サイズ・family  変更可・削除可 */
    padding-left: 10px; 
    transform-origin: left top; 
    transform: rotate(90deg) translateY(-1.2em); 
}
.item1:before {content: 'Item1'; }  /* タイトル  変更可・削除可 */
.item2:before {content: 'Item2'; }  /* タイトル  変更可・削除可 */
.item3:before {content: 'Item3'; }  /* タイトル  変更可・削除可 */
.item4:before {content: 'Item4'; }  /* タイトル  変更可・削除可 */
.item5:before {content: 'Item5'; }  /* タイトル  変更可・削除可 */
初期位置 ⇒ 各パネルの初期位置

「1.共通設定 25行目」で計算された li の width を 100% として、

  • Itom1(1枚目) ⇒ 移動無し
  • Itom2(2枚目) ⇒ 1枚目のすぐ横 (100%)
  • Itom3~ (3枚目以降) ⇒ Itom2(2枚目)より「1.共通設定 25行目」で設定した「50px(見えている巾)」分づつ

transform: translateX() で移動させます。

パネルを増やした場合は、移動量を「50px(見えている巾)」分づつ増やして下さい。

重なり順 ⇒ 各パネルの重なり

連番の大きいものが上になるように、重なり順を指定します。

パネルを増やす場合は、「HTML」で説明された通りに、上に新しいパネルを増やし、z-index: で重なり順を指定するようにします。

3. アコーディオン設定 / パネルの動き

パネルをhoverした際、左側のパネルも連動して動くように指定します。

/* item2の移動 */
.item2:hover, .item3:hover ~ .item2, .item4:hover ~ .item2, .item5:hover ~ .item2, {
    transform: translateX(50px);    /* アコーディオンを開いた時の位置 */
}
/* item3の移動 */
.item3:hover, .item4:hover ~ .item3, .item5:hover ~ .item3 {
    transform: translateX(100px);   /* アコーディオンを開いた時の位置 */
}
/* item4の移動 */
.item4:hover, .item5:hover ~ .item4 {
    transform: translateX(150px);   /* アコーディオンを開いた時の位置 */
}
/* item5 ( 一番右 ) の移動 */
.item5:hover {
    transform: translateX(200px);   /* アコーディオンを開いた時の位置 */
}
  • Item1(1枚目) ⇒ 移動しないので設定はありません
  • Item2~(2枚目以降) ⇒ このパネルが開いた時の左端の位置
    (「50px(見えている巾)」× 「自パネル数 – 1 = 2枚目なら 2-1、5枚目なら 5-1」)
    併せて、自分より右にあるパネルと連動して動くよう、右側パネル:hoverをまとめて指定します。
  • Item5(一番右) ⇒ これより右はないので、自分の移動位置のみ指定します。

※パネルを増やした場合は、手前(左)の各パネルに、自分:hover時を設定して下さい。

例: Item6を増やした場合  .item6:hover {transform: translateX(○○px); }  を追加するのと併せ
「item2に ⇒ .item6:hover ~ .item2」「item3に ⇒ .item6:hover ~ .item3」、、、
手前の全てのパネルに 「.item6:hover ~ ○○」 をカンマで繋いで追加します。

同じテーマの記事