HOME > 開発者向けBLOG > Webデザイン >  transitionとtargetでクリック時に画像を横にスライド

Technology Note 開発者向けBLOG

Webデザイン

transitionとtargetでクリック時に画像を横にスライド

こんにちは、ゼノフィ渡部です。

クリックで画像を横にスライドさせる方法をご紹介いたします。CSS3のtransitionとa要素のtarget属性がスライドの肝です。

使用している画像は4枚になります。

画像1

画像2

画像3

画像4

まず、2行目の「div.photo_area」でスライドエリア全体を中央に表示します。次に10行目の「div.photo_block」で指定した幅と高さを決めて、現在表示する画像以外のものを非表示にします。

17行目「ul.photo_click_list」の「width: 2000px;」は画像4枚の幅が500pxなので2000pxとしています。ここは画像の枚数の最大値よりも大きければ2500pxでも3000pxでも問題ありません。

20行目の「-webkit-transition: 1s;」でボタンがクリックされた時にスライドする時間の変化を指定しています。

24行目の「ul.photo_click_list li」で画像を横並びにし、32行目の「ul.photo_click_list figure」で幅と高さを指定し画像が小さい場合でも、画像が垂直中央に表示されるようにします。41行目の「ul.photo_click_list img」では、画像の最大の幅と高さを指定し、「width: 500px;」、「height: 375px;」以上の画像が入ってきても、スライド内に画像を収めるようにしています。

46行目から61行目(#photo_box01:target ul.photo_click_list～#photo_box04:target ul.photo_click_list)はa要素がクリックされた時に画像をスライドさせています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

/* スライドエリア全体を中央に表示 */
div.photo_area {
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  background: #4F4F4F;
}
 
/* 指定した幅と高さ以外は非表示 */
div.photo_block {
  width: 500px;
  height: 375px;
  overflow: hidden;
}
 
/* 画像の枚数に合わせた最大の幅を指定 */
ul.photo_click_list {
  width: 2000px;
  height: 375px;
  transition: 1s; /* 将来用 */
  -webkit-transition: 1s; /* スライドする変化を1sで指定 */
}
 
/* 画像を横並びに */
ul.photo_click_list li {
  position: relative;
  float: left;
  width: 500px;
  height: 375px;
}
 
/* 画像を垂直・水平に表示 */
ul.photo_click_list figure {
  width: 500px;
  height: 375px;
  display: table-cell;    /* テーブル構造を表現 */
  vertical-align: middle; /* 垂直に表示 */
  text-align: center;     /* 真ん中に表示 */
}
 
/* 画像の最大の幅と高さ */
ul.photo_click_list img {
  max-width: 500px;
  max-height: 375px;
}
 
/* クリック時画像をスライド */
#photo_box01:target ul.photo_click_list {
  margin-left: 0;
}
 
#photo_box02:target ul.photo_click_list {
  margin-left: -500px;
}
 
#photo_box03:target ul.photo_click_list {
  margin-left: -1000px;
}
 
#photo_box04:target ul.photo_click_list {
  margin-left: -1500px;
}

「<div id="photo_box01">」、「<div id="photo_box02">」、「<div id="photo_box03">」、「<div id="photo_box04">」はa要素がクリックされた時の各target属性に対応させています。

73行目から102行目まではボタンの範囲になります。75行目、82行目、89行目、96行目は8行目、11行目、14行目、17行目のdivのidと対になっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<!-- 背景 -->
<div class="photo_area">
 
    <!-- オーバーフロー時 hidden -->
    <div class="photo_block">
 
        <!-- 画像1のターゲット -->
        <div id="photo_box01">
 
            <!-- 画像2のターゲット -->
            <div id="photo_box02">
 
                <!-- 画像3のターゲット -->
                <div id="photo_box03">
 
                    <!-- 画像4のターゲット -->
                    <div id="photo_box04">
 
                        <ul class="photo_click_list">
                            <li>
                                <figure>
                                    <img src="img_square01.gif" width="500" height="375" alt="画像1" />
                                    <figcaption>
                                        画像1キャプション
                                    </figcaption>
                                </figure>
                            </li>
                            <li>
                                <figure>
                                    <img src="img_square02.gif" width="250" height="150" alt="画像2" />
                                    <figcaption>
                                        画像2キャプション
                                    </figcaption>
                                </figure>
                            </li>
                            <li>
                                <figure>
                                    <img src="img_square03.gif" width="500" height="375" alt="画像3" />
                                    <figcaption>
                                        画像3キャプション
                                    </figcaption>
                                </figure>
                            </li>
                            <li>
                                <figure>
                                    <img src="img_square04.gif" width="500" height="375" alt="画像4" />
                                    <figcaption>
                                        画像4キャプション
                                    </figcaption>
                                </figure>
                            </li>
                        </ul>
 
                    </div>
                    <!-- /画像4のターゲット -->
 
                </div>
                <!-- /画像3のターゲット -->
 
            </div>
            <!-- /画像2のターゲット -->
 
        </div>
        <!-- /画像1のターゲット -->
 
    </div>
    <!-- /オーバーフロー時 hidden -->
 
</div>
<!-- /背景 -->
 
<!-- ボタン -->
<ul class="btn">
    <li>
        <a href="#photo_box01">
            <span>
                ボタン1
            </span>
        </a>
    </li>
    <li>
        <a href="#photo_box02">
            <span>
                ボタン2
            </span>
        </a>
    </li>
    <li>
        <a href="#photo_box03">
            <span>
                ボタン3
            </span>
        </a>
    </li>
    <li>
        <a href="#photo_box04">
            <span>
                ボタン4
            </span>
        </a>
    </li>
</ul>
<!-- /ボタン -->

サンプルはGoogle ChromeとSafariブラウザに対応しています。

画像2は垂直中央に画像が表示されることを確認するため、幅と高さを小さくしています。小さい画像でも垂直中央に表示されていることが確認できます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

h1 {
  text-align:  center;
}
 
ul,figure,figcaption {
  margin: 0;
  padding: 0;
}
 
ul {
  list-style-type: none;
}
 
/* スライドエリア全体を中央に表示 */
div.photo_area {
  width: 500px;
  margin: 0 auto;
  padding: 10px;
  background: #4F4F4F;
}
 
/* 指定した幅と高さ以外は非表示 */
div.photo_block {
  width: 500px;
  height: 375px;
  overflow: hidden;
}
 
/* 画像の枚数に合わせた最大の幅を指定 */
ul.photo_click_list {
  width: 2000px;
  height: 375px;
  transition: 1s; /* 将来用 */
  -webkit-transition: 1s; /* スライドする変化を1sで指定 */
}
 
/* 画像を横並びに */
ul.photo_click_list li {
  position: relative;
  float: left;
  width: 500px;
  height: 375px;
}
 
/* 画像を垂直・水平に表示 */
ul.photo_click_list figure {
  width: 500px;
  height: 375px;
  display: table-cell;    /* テーブル構造を表現 */
  vertical-align: middle; /* 垂直に表示 */
  text-align: center;     /* 真ん中に表示 */
}
 
/* 画像の最大の幅と高さ */
ul.photo_click_list img {
  max-width: 500px;
  max-height: 375px;
}
 
/* 画像のキャプション */
ul.photo_click_list figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 480px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  background: #333;
  opacity: 0.7;
}
 
/* クリック時画像をスライド */
#photo_box01:target ul.photo_click_list {
  margin-left: 0;
}
 
#photo_box02:target ul.photo_click_list {
  margin-left: -500px;
}
 
#photo_box03:target ul.photo_click_list {
  margin-left: -1000px;
}
 
#photo_box04:target ul.photo_click_list {
  margin-left: -1500px;
}
 
/* ボタン */
ul.btn {
  width: 520px;
  margin: 20px auto;
}
 
ul.btn li {
  float: left;
  margin: 0 15px 0 0;
}
 
ul.btn a {
  display: block;
  width: 15px;
  height: 15px;
  text-decoration: none;
  background: #4F4F4F;
  border-radius: 10px; /* 将来用 */
  -webkit-border-radius: 10px;
}
 
ul.btn a:hover {
  background: #39F;
}
 
ul.btn a:active {
  background: #F90;
}
 
ul.btn span {
  display: none;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<!-- 背景 -->
<div class="photo_area">
 
    <!-- オーバーフロー時 hidden -->
    <div class="photo_block">
 
        <!-- 画像1のターゲット -->
        <div id="photo_box01">
 
            <!-- 画像2のターゲット -->
            <div id="photo_box02">
 
                <!-- 画像3のターゲット -->
                <div id="photo_box03">
 
                    <!-- 画像4のターゲット -->
                    <div id="photo_box04">
 
                        <ul class="photo_click_list">
                            <li>
                                <figure>
                                    <img src="img_square01.gif" width="500" height="375" alt="画像1" />
                                    <figcaption>
                                        画像1キャプション
                                    </figcaption>
                                </figure>
                            </li>
                            <li>
                                <figure>
                                    <img src="img_square02.gif" width="250" height="150" alt="画像2" />
                                    <figcaption>
                                        画像2キャプション
                                    </figcaption>
                                </figure>
                            </li>
                            <li>
                                <figure>
                                    <img src="img_square03.gif" width="500" height="375" alt="画像3" />
                                    <figcaption>
                                        画像3キャプション
                                    </figcaption>
                                </figure>
                            </li>
                            <li>
                                <figure>
                                    <img src="img_square04.gif" width="500" height="375" alt="画像4" />
                                    <figcaption>
                                        画像4キャプション
                                    </figcaption>
                                </figure>
                            </li>
                        </ul>
 
                    </div>
                    <!-- /画像4のターゲット -->
 
                </div>
                <!-- /画像3のターゲット -->
 
            </div>
            <!-- /画像2のターゲット -->
 
        </div>
        <!-- /画像1のターゲット -->
 
    </div>
    <!-- /オーバーフロー時 hidden -->
 
</div>
<!-- /背景 -->
 
<!-- ボタン -->
<ul class="btn">
    <li>
        <a href="#photo_box01">
            <span>
                ボタン1
            </span>
        </a>
    </li>
    <li>
        <a href="#photo_box02">
            <span>
                ボタン2
            </span>
        </a>
    </li>
    <li>
        <a href="#photo_box03">
            <span>
                ボタン3
            </span>
        </a>
    </li>
    <li>
        <a href="#photo_box04">
            <span>
                ボタン4
            </span>
        </a>
    </li>
</ul>
<!-- /ボタン -->

<

>

PAGETOP