事前準備：
予め、『FullScrSlide2』の様な名前のフォルダーを『My-HP』内に作っておき、更にその中に『photo』という名前の写真を入れるフォルダーを作り、その中に今回は全画面スライドショーですから、ハイビジョンに準対応の1200×675px(１6：9)の写真を5枚を入れておきます。写真の名前は1.jpg～5.jpgです。
１．画面が切り替わるスライドショー：
上記画像が切り替わるスライドショーで1.1から1.3までを実施しますが、一部説明にエラーがありますが、補正しながら進めていきます。
１)HPビルダーを開き、ファイル→標準モードで新規作成をクリックしHTMLソースに切り替えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
</html> |
２)Webページの（１）基本形を開き、ソースコードHTMLを
ここでは<style>は必要ないので、<style>を除いてコピーします。
<style><div class="img-frame">
<div class="img-01"></div>
<div class="img-02"></div>
<div class="img-03"></div>
</div> |
３)HPビルダーに切り替え、<body>と</body>の間で改行し、<body>の下に貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="img-frame">
<div class="img-01"></div>
<div class="img-02"></div>
<div class="img-03"></div>
</div>
</body>
</html> |
４)<title></title>の下に<style>と</style>の２行を追記します。
５)Webページに切り替え、ソースコードCSSをコピーします。
６)HPビルダーに切り替え、<style>の下に貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img-frame{
position: relative;
width: 70%;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
@media screen and (max-width: 767px){
.img-frame{
width: 100%;
height: 200px;
}
.img-01, .img-02, .img-03{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.img-01{
background-image: url('画像の場所');
animation: slide-animation-01 24s infinite;
}
.img-02{
background-image: url('画像の場所');
animation: slide-animation-02 24s infinite;
}
.img-03{
background-image: url('画像の場所');
animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
0% {opacity: 1; transform: scale(1.0);}
30% {opacity: 1;}
40% {opacity: 0; transform: scale(1.15);}
90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
0% {opacity: 0;}
30% {opacity: 0; transform: scale(1.1);}
40% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
0% {opacity: 0;}
60% {opacity: 0; transform: scale(1.0);}
70% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
</style>
</head>
<body>
<div class="img-frame">
<div class="img-01"></div>
<div class="img-02"></div>
<div class="img-03"></div>
</div>
</body>
</html> |
７)青で示した@media screen and (max-width: 767px){があると正常に動作しないため、
@media screen and (max-width: 767px){を含めて5行を削除します。
８)『画像の場所』3か所を『photo/1.jpg』､『photo/2.jpg』､『photo/3.jpg』に変えます。
９)フォルダー『FullScrSlide2』の中へ『main.html』という名前で保存します。
10)動作確認します。
11)Webページに切り替え、（２）上に半透明の矩形を重ねるはパスして
（３）テキストを乗せるから、HTMLをコピーします。
12)HPビルダーに切り替え、<body></body>間を全て入れ替えます。
13)Webページに切り替え、CSSをコピーします。
14)</style>の上に貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img-frame{
position: relative;
width: 70%;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.img-01, .img-02, .img-03{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.img-01{
background-image: url('photo/1.jpg');
animation: slide-animation-01 24s infinite;
}
.img-02{
background-image: url('photo/2.jpg');
animation: slide-animation-02 24s infinite;
}
.img-03{
background-image: url('photo/3.jpg');
animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
0% {opacity: 1; transform: scale(1.0);}
30% {opacity: 1;}
40% {opacity: 0; transform: scale(1.15);}
90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
0% {opacity: 0;}
30% {opacity: 0; transform: scale(1.1);}
40% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
0% {opacity: 0;}
60% {opacity: 0; transform: scale(1.0);}
70% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
.msg{
font-size: 20px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.msg-01, .msg-02{
text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
}
.msg-03{
z-index:1;
}
</style>
</head>
<body>
<div class="img-frame">
<div class="img-01"><p class="msg msg-01">京都</p></div>
<div class="img-02"><p class="msg msg-02">横浜</p></div>
<div class="img-03 cover"><p class="msg msg-03">良い街</p></div>
</div>
</body>
</html> |
15)<body>内の写真の説明文も写真に合わせて変更します。
上書き保存し、動作確認します。
3枚目の写真が暗いですね。
16)新たに追加したCSSの赤文字部分を削除します
.msg{
font-size: 20px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.msg-01, .msg-02{
text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
}
.msg-03{
z-index:1;
} |
| 赤文字部分を削除 ⇓ |
.msg{
font-size: 20px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
|
17)上書き保存し、動作確認します。
18)縦の表示範囲を広げます
<style>の中の4行目の『height: 300px;』を『height: 473px;』に変えます
(元々の写真1200☓675pxに対して、上の行で『width: 70%;』とあるので675☓0.7=473とした)
19)上書き保存し、動作確認します。
元々の設定ではこのように表示されます。
全画面表示で、5枚表示に改造しました。下記が再改訂後の全htmlソースです。
追加した部分は緑色表示しています。
但し全画面表示としたため、14)でピンク色で表示した.img-frame{からの6行を削除し、14)の@keyframes slide-animationの透明度の時間割合(後述)は変えています。
赤色表示の部分は皆さんの写真に合わせて変えて下さい。
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
39
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 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>高梁市 吹屋</title>
<style>
.img-01, .img-02, .img-03, .img-04, .img-05{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.img-01{
background-image: url('photo/1.jpg');
animation: slide-animation-01 30s infinite;
}
.img-02{
background-image: url('photo/2.jpg');
animation: slide-animation-02 30s infinite;
}
.img-03{
background-image: url('photo/3.jpg');
animation: slide-animation-03 30s infinite;
}
.img-04{
background-image: url('photo/4.jpg');
animation: slide-animation-04 30s infinite;
}
.img-05{
background-image: url('photo/5.jpg');
animation: slide-animation-05 30s infinite;
}
@keyframes slide-animation-01 {
0% {opacity: 1; transform: scale(1.0);}
10% {opacity: 1;}
20% {opacity: 0; transform: scale(1.15);}
30% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
0% {opacity: 0;}
10% {opacity: 0; transform: scale(1.1);}
20% {opacity: 1;}
30% {opacity: 1;}
40% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
0% {opacity: 0;}
30% {opacity: 0; transform: scale(1.0);}
40% {opacity: 1;}
50% {opacity: 1;}
60% {opacity: 0; transform: scale(1.1);}
100% {opacity: 0;}
}
@keyframes slide-animation-04 {
0% {opacity: 0;}
50% {opacity: 0; transform: scale(1.1);}
60% {opacity: 1;}
70% {opacity: 1;}
80% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-05 {
0% {opacity: 0;}
70% {opacity: 0; transform: scale(1.0);}
80% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
.msg{
font-size: 25px;
color: #0f0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
</style>
</head>
<body>
<div class="img-frame">
<div class="img-01"><p class="msg msg-01">岡山県 高梁市 吹屋 ベンガラ色の街並み</p></div>
<div class="img-02"><p class="msg msg-02">レトロなボンネットバス</p></div>
<div class="img-03"><p class="msg msg-03">昭和の街並み</p></div>
<div class="img-04"><p class="msg msg-04">吹屋郵便局</p></div>
<div class="img-05 cover"><p class="msg msg-05">ベンガラ染工房</p></div>
</div>
</body>
</html> |
『main.html』という名前で『FullScrSlide2』のフォルダー内に保存します。
写真枚数の増加：
このmain.htmlでは、オリジナルの写真3枚から写真5枚に枚数を増やしましたが、当初はcssのコマンドをちゃんと理解していないので時間配分の部分で非常に苦労しました。6/8の勉強会後に復習でやっと理解しました。
36行目から73行目で各写真の表示時間の割合を示しています。5枚の写真は30秒間の間に下表の不透明度1で表している時間(%)で1回ずつ順番に表示されるように設定しています。
また、transform: scaleは写真の表示倍率を表しています。
| 各｢keyframes slide-animation｣のopacity(不透明度) |
| 時間(%) |
1.jpg |
2.jpg |
3.jpg |
4.jpg |
5.jpg |
| 0 |
1 |
０ |
０ |
０ |
０ |
| 10 |
1 |
０ |
|
|
|
| 20 |
０ |
1 |
|
|
|
| 30 |
０ |
1 |
０ |
|
|
| 40 |
|
０ |
1 |
|
|
| 50 |
|
|
1 |
０ |
|
| 60 |
|
|
０ |
1 |
|
| 70 |
|
|
|
1 |
０ |
| 80 |
|
|
|
０ |
1 |
| 90 |
|
|
|
|
1 |
| 100 |
1 |
０ |
０ |
０ |
０ |
|
| 写真が3枚の場合の不透明度 |
| 時間(%) |
1.jpg |
2.jpg |
3.jpg |
| 0 |
1 |
０ |
０ |
| 10 |
|
|
|
| 20 |
|
|
|
| 30 |
1 |
0 |
|
| 40 |
0 |
1 |
|
| 50 |
|
|
|
| 60 |
|
1 |
０ |
| 70 |
|
0 |
1 |
| 80 |
|
|
|
| 90 |
0 |
|
1 |
| 100 |
1 |
０ |
０ |
|
74行から81行は写真の説明文の表示方法を示している。
| 行 |
HTMLソース |
設定内容 |
| 75 |
font-size: 25px; |
フォントサイズ(px) |
| 76 |
color: #0f0; |
文字色(#RGB) |
| 77 |
position: absolute; |
表示位置 |
| 78 |
top: 50%; |
上から(%) |
| 79 |
left: 50%; |
左から(%) |
| 80 |
transform: translate(-50% , -50%); |
上記表示位置に対するの文字列の場所 |
説明文の表示位置を左上に変えた場合の例(VerUp後)はここからご覧下さい。
| 上記の設定 |
.msg{
font-size: 25px;
color: #0f0;
position: absolute;
top: 5%;
left: 5%;
transform: translate(0% , -50%);
} |
3枚表示のオリジナルの実施例はここからご覧下さい。
全画面で5枚表示に改造後の実施例はここからご覧下さい。
２．縦に動くスライドショー：
横に切り流れるスライドショーは一般的ですから、今回は縦に流れるスライドショーを作って見ましょう。
こちらは、書かれているhtmlとcssを使用すると、ちゃんと動作致します。
各自、下記により実施してみて下さい。
①HPビルダーを起動し、｢ファイル｣→｢標準モードで新規作成｣をクリックし、
HTMLソースに切り替えます。
②『HTMLとCSSのみでWebサイト用のスライドショーを作る／ボタン付きの場合の解説も』
から、更に2.1縦に流れるスライドショーをクリックします
③Webページに表示されたhtmlは<body></body>間に挿入し、
④</title>の後ろに
<style>
</style>
の2行を入力し、Webページに表示されているcssを <style></style>間に挿入。
⑤名前を付けて先に作った｢main.html｣と同じ場所に｢VertSlide.html｣の様な名前で保存。
⑥htmlの9か所の｢画像の場所｣は3グループ共に｢photo/1.jpg｣から｢photo/3.jpg｣に全て変える。
⑦<style>の.slide-container内のheight: 340px;を500pxに変更し、
.slide内のwidth: 300px;を600pxに変更。
⑧上書き保存
⑨ブラウザーで動作を確認。
上記の縦に動くスライドショーは3枚だけなので、枚数が自由に選べる別の縦に動くスライドショーは、次回の勉強会で実施します。
|
