images/dsc00092s.jpg images/dsc00131s.jpg images/dsc00149s.jpg images/dsc00203s.jpg <!DOCTYPE html> <html> <head> <title>roundphotogallery</title> <me

(1)

1346-8 応用２ Photo Gallery

画像のカルーセルを利用してフォトギャラリーを２つ作ってみましょう。

●フォトギャラリー１

回転の中心から距離を置いて放射状に広がった画像のカルーセルを利用してフォトギャラ

リーを作ってみましょう。hover すると画像が拡大表示されます。

【RoundPhotoGallery の説明】

〔HTML の記述（RoundPhotoGallery.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 galleryTitle の span 要素を記述し、中に「Photo Gallery」と記述します。

id 属性 carouselArea の div 要素を記述します。このボックスの中で画像のカルーセルが動

きます。

id 属性 goRound の div 要素を記述し、中につぎの８つの画像を指定します。

images/DSC00007S.jpg

images/DSC00015S.jpg

images/DSC00095S.jpg

images/DSC00027S.jpg

サンプルＣＳＳ１

(2)

images/DSC00092S.jpg

images/DSC00131S.jpg

images/DSC00149S.jpg

images/DSC00203S.jpg

〔CSS の記述（RoundPhotoGallery.css）

〕

#stage ステージのスタイルを指定します。width は 700px、height は 300px で指定します。

背景色を background-color: #000000;（黒色）で指定します。

#galleryTitle 要素（

「Photo Gallery」タイトル）の span 要素のスタイルを指定します。

position は absolute、位置は top: 210px; left: 0px; right: 0px;（#stage ボックスの

左上端を起点とした位置）で指定します。 right: 0px;と指定しているのは span 要素を

<!DOCTYPE html> <html> <head> <title>RoundPhotoGallery</title> <meta charset="UTF-8">

<body>

<p>■Animation で画像を円運動させる。hover で拡大表示させる。</p> <div id="stage">

<span id="galleryTitle">Photo Gallery</span> <div id="carouselArea">

<img src="images/DSC00007M.jpg" alt="Red leaves"> <img src="images/DSC00015M.jpg" alt="Bronze statue"> <img src="images/DSC00095M.jpg" alt="Cherry blossoms"> <img src="images/DSC00027M.jpg" alt="Wall paint"> <img src="images/DSC00092M.jpg" alt="Cherry and bridge"> <img src="images/DSC00131M.jpg" alt="Water fall"> <img src="images/DSC00149M.jpg" alt="Carp streamer"> <img src="images/DSC00203M.jpg" alt="Green load"> </div> </div> </div> </body> </html> #stage { width: 700px; height: 350px; background-color: #000000; position: relative; }

(3)

#stage ボックスの左右中央に配置するために、「left: 0px; right: 0px;」とつぎの

「margin-left: auto; margin-right: auto;」を組み合わせて指定するためです。width は

auto、height は 70px で指定します。背景色を background-color: rgba( 255, 255, 255,

0.4 );（半透明な黒色）で指定します。box-shadow: 1px 1px 50px rgba( 255, 255, 255,

0.6 ), -1px -1px 50px rgba( 255, 255, 255, 0.6 );と指定して、#galleryTitle ボック

スの上部と下部に半透明の白い輝きを描きます。

text-align: center;でテキストを左右中央配置にします。テキストのフォントを font:

bold 50px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を

color: rgba( 0, 0, 0, 1.0 );（黒色）で指定します。

#carouselArea 要素のスタイルを指定します。position は absolute、

位置は top: 0px; left:

0px;（#stage ボックスの左上端を起点とした位置）で指定します。このボックスの中で画

像のカルーセルが動きます。カルーセルが遠近感をもって３Ｄ回転して見えるように、

perspective: 600px;で指定します。

#goRound 要素のスタイルを指定します。position は absolute、位置は top: 60px; left:

350px;（#carouselArea ボックスの左上端を起点とした位置）で指定します。width と height

は指定しないので大きさゼロのボックスになります。画像（子要素）を#goRound 要素の平

面に対して３Ｄで角度を付けるので、transform-style: preserve-3d;の指定をします。画

#galleryTitle {

top: 210px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; width: auto; height: 70px;

background-color: rgba( 255, 255, 255, 0.4 ); position: absolute;

text-align: center;

font: bold 50px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: rgba( 0, 0, 0, 1.0 ); box-shadow: 1px 1px 50px rgba( 255, 255, 255, 0.6 ), -1px -1px 50px rgba( 255, 255, 255, 0.6 ); } #carouselArea { top: 0px; left: 0px; width: 700px; height: 200px; position: absolute; perspective: 600px; -webkit-perspective: 600px; }

(4)

像のカルーセルの回転は#goRound 要素を回転させるので、変化の起点（回転の中心）を

transform-origin: 0px 0px;で指定します。この transform-origin の値を変更するとカル

ーセルの回転の中心の位置を変更することができます。

アニメーション名を goRoundAnime、実行時間を 30s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 goRoundAnime に対応するタイムライン（@keyframes）を指定します。0%

から 100%の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに 360

度回転させます。アニメーション goRoundAnime の繰り返しが infinite で指定されている

ので、永久に左回転します。

#goRound img 要素のスタイルを指定します。#goRound 要素の子供の img 要素の共通スタイ

ルになります。position は absolute、位置 top: 0px; left: 0px;（#goRound ボックスの

左上端を起点とした位置）で指定します。width は 108px、height は 81px で指定します。

ボーダーを border: solid 1px gray;（灰色）で指定します。画像の左辺を軸として回転さ

せるので、変化の起点（回転の中心）を transform-origin: 0% 0%;で指定します。

画像を hover した時に画像を拡大表示するので、滑らかに拡大するように transition の指

定をします。transition: width 0.5s ease-in-out, height 0.5s ease-in-out, border 0.5s

ease-in-out;で、width、height、border に関して 0.5 秒で変化するように指定します。

#goRound { top: 60px; left: 350px; position: absolute; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-origin: 0px 0px; -webkit-transform-origin: 0px 0px;

animation: goRoundAnime 30s linear 0s infinite normal;

-webkit-animation: goRoundAnime 30s linear 0s infinite normal; } @keyframes goRoundAnime { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } @-webkit-keyframes goRoundAnime { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(-360deg); } }

(5)

それぞれの画像の角度（rotateY）と右方向への移動距離（translateX）を指定します。

transform プロパティの translateX 関数で 80px 右方向へ移動させます。

画像が８枚あるので、それぞれの画像に transform プロパティの rotateY 関数で角度をつ

けます。360 度の 8 分の 1 は 45 度なので、それぞれの画像を 0 度から初めて-45（または

45）の倍数の角度で Y 軸を中心に回転させていきます。

#goRound > img:nth-child(1) {

transform: rotateY(0deg) translateX(80px);

-webkit-transform: rotateY(0deg) translateX(80px); }

transform: rotateY(-45deg) translateX(80px);

-webkit-transform: rotateY(-45deg) translateX(80px); }

#goRound img {

top: 0px; left: 0px; width: 108px; height: 81px; border: solid 1px gray; position: absolute;

transform-origin: 0% 0%;

-webkit-transform-origin: 0% 0%;

transition: width 0.5s ease-in-out, height 0.5s ease-in-out, border 0.5s ease-in-out; -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out,

border 0.5s ease-in-out; } #carouselAre #carouselArea の width の２分の１

_{親の div 要素}

top: 任意の値;

left: 350px;

width: 0px;

height: 0px;

画像

top: 0px;

left: 0px;

transform-origin:

0% 0%;

translateX(80px);

80px

(6)

#goRound img 要素が hover された時の変化を指定します。width を 108px から 200px へ、

height を 81px から 150px へ変化させて画像を拡大し、border: solid 1px gray;（幅 1px

の灰色）から border: solid 5px white; 幅 5px の白色）に変更します。

/* hover action **************************************************/ #goRound img:hover {

width: 200px; height: 150px; border: solid 5px white; }

(7)

●フォトギャラリー２

右から左へ回転する 12 枚の画像を hover すると、拡大された画像とその画像に関するコメ

ントが表示されるフォトギャラリーを作ってみましょう。

【SlidePhotoGallery の説明】

〔HTML の記述（SlidePhotoGallery.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 galleryTitle の span 要素を記述し、中に「Photo Gallery」と記述します。

id 属性 carouselArea の div 要素を記述します。このボックスの中で画像のカルーセルが動

きます。

id 属性 slide1（スライド全体）の div 要素を記述し、その中に次のような階層構造で div

要素を記述し img 画像やコメントのテキスト文字を指定します。

〔 --- div 要素の class 属性、id 属性 --- 〕

〔 --- 画像名 --- 〕

#slide1（スライド全体）

.image-container （.cntnr01～.cntnr12、#image11～#image1C）

.imageA （#image11A～#image1CA）画面下方の回転する小さな画像

img images/XXXXXXXX.jpg

(8)

.num1 画面下方の回転する小さな画像の番号

imageB （#image11B～#image1CB）拡大された画像

img images/XXXXXXXX.jpg

.com1 拡大された画像の左側に表示される画像番号

.com2 画像についてのコメントのテキスト

id 属性 slide1 の div 要素は 12 枚のスライド全体のボックスです。この中に class 属性

image-container の div 要素を 12 個記述します。この 12 個のボックスには image-container

という class 属性名と共にそれぞれのボックスに class 属性名で cntnr01 から cntnr12、お

よび id 属性名で image11 から image1C を追加しています。

class 属性 image-container の div 要素の中には class 属性 imageA（id 属性名 image11A か

ら image1CA を追加）の div 要素を記述し、その中に img 要素で画像の指定及び class 属性

num1 の div 要素と番号を記述します。

また class 属性 image-container の div 要素の中には class 属性 imageB

（id 属性名 image11B

から image1CB を追加）の div 要素を記述し、その中に img 要素で画像の指定及び class 属

性 com1 の div 要素と画像番号、class 属性 com2 の div 要素と画像に関するコメントのテキ

ストを記述します。

id 属性 slide1（スライド全体）の div 要素の階層構造を id 属性 slide2（スライド全体）

の div 要素の階層構造としてもう１組記述します。

12 枚の画像とコメントは次のように記述しています。

〔番号〕〔画像と画像名〕〔コメント〕

1 images/DSC00007L.jpg

秋も深まった公園の紅葉。数年前までは真っ赤に染まっ

た紅葉（もみじ）が見られましたが、今は赤く染まらず、

暗赤色が多くなりました。恥ずかしさで頬に赤く紅葉（も

みじ）を散らした女の子もいつの間にかいなくなってし

まいました。

2 images/DSC00015L.jpg

姉と弟でしょうか。公園の入り口に飾られているところ

から、子供たちに仲良く遊んで欲しいという願いが込め

られた像なのでしょう。たまに訪れると、母と子、父と

子がにぎやかに遊んでいて、こちらも楽しくなってきま

す。

(9)

3 images/DSC00095L.jpg

白い桜です。短い花の命を燃え尽くそうと、ひしめき合

って咲いています。その迫力に圧倒されて、いつのまに

かカメラを向けている自分に気付き、思わず“がんばれ”

と声を掛けてしまうのです。

4 images/DSC00027L.jpg

街のスパゲッティ屋の壁に描かれたイラストです。洒落

たことをすると感心しながら、さぞスパゲッティも美味

しいのだろうと想像してしまいます。いつか入ろうと思

いながら月日が経ってしまいました。

5 images/DSC00092L.jpg

多摩御陵入り口の稜南橋です。ここから少し行くと御陵

（武蔵稜墓地）の車返しがあり、そこからは徒歩となり

ます。玉砂利が敷き詰められた見事な北山杉の並木をし

ばらく行くと、多摩御陵（大正天皇の墓地）と武蔵野御

陵（昭和天皇の墓地）があります。巨大です。

6 images/DSC00131L.jpg

ふだんは気にも留めない小川のせせらぎに、ふいと気が

付くと自然の営みが感じられたりします。じっと見てい

ると水しぶきと泡達が生まれては消え、また生まれては

消え、尽きることがありません。なぜか気分もリフレッ

シュします。

7 images/DSC00149L.jpg

鯉のぼりから連想されるのは「鯉の滝登り」

。実際に滝を

登る鯉は見たことがないけれど、日本画などで見た記憶

があります。子供の立身出世を願って、庶民が「鯉の滝

登り」の図柄をヒントに、鯉の形をした吹流しに願いを

託して「鯉のぼり」を作ったのだそうです。

8 images/DSC00203L.jpg

春に花を咲かせた桜並木は、夏になると新緑のシェード

となります。強烈な日差しを遮り、行きかう人々にしば

しの清涼を与えてくれます。

(10)

9 images/DSC00198L.jpg

子供たちが作った鯉のぼりです。それぞれ違った図柄の

鯉のぼりが楽しめます。大人になっても、何事にもこの

自由な感覚を持ち続けていってほしいものです。

10 images/DSC00088L.jpg

桜の散りはじめた頃です。辺りは花吹雪が舞い、地面は

花びらの絨毯と化します。「また来年も咲いてくれよ。」

と声をかけて通り過ぎるのです。

11 images/DSC00178L.jpg

小川に敷き詰められた石です。幾何学模様の美しさに、

思わずカメラを向けました。

「石が並んでいるな。

」とし

か見ていなかったものが、突然、美しいものに見えた喜

びがありました。

12 images/DSC00189L.jpg

鯉のぼりが我先にと天に登ろうとしています。現代社会

の縮図です。

「我先に登ろう。

」はいいことですが、

「ほか

の鯉を蹴落して先に登ろう。

」というのはいただけません。

<!DOCTYPE html> <html> <head> <title>SlidePhotoGallery</title> <meta charset="UTF-8">

<body>

<p>■Animation で 12 枚の画像をスライドさせる。hover で拡大表示、コメント表示させる。 </p>

<span id="galleryTitle">Photo Gallery</span> <div id="carouselArea">

(11)

</div>

<img src="images/DSC00007L.jpg" alt="picture1"> <div class="com1">≪ 1 ≫</div> <div class="com2">秋も深まった公園の紅葉。数年前までは真っ赤に染まった紅葉（もみじ）が見られましたが、今は赤く染まらず、暗赤色が多くなりました。<br> 恥ずかしさで頬に赤く紅葉（もみじ）を散らした女の子もいつの間にかいなくなってしまいました。</div> </div> </div>

</div>

<img src="images/DSC00015L.jpg" alt="picture2"> <div class="com1">≪ 2 ≫</div> <div class="com2">姉と弟でしょうか。公園の入り口に飾られているところから、子供たちに仲良く遊んで欲しいという願いが込められた像なのでしょう。<br> たまに訪れると、母と子、父と子がにぎやかに遊んでいて、こちらも楽しくなってきます。</div> </div> </div>

</div>

<img src="images/DSC00095L.jpg" alt="picture3"> <div class="com1">≪ 3 ≫</div> <div class="com2">白い桜です。短い花の命を燃え尽くそうと、ひしめき合って咲いています。<br> その迫力に圧倒されて、いつのまにかカメラを向けている自分に気付き、思わず“がんばれ”と声を掛けてしまうのです。</div> </div> </div>

</div>

(12)

</div>

<img src="images/DSC00092L.jpg" alt="picture5"> <div class="com1">≪ 5 ≫</div> <div class="com2">多摩御陵入り口の稜南橋です。ここから少し行くと御陵（武蔵稜墓地）の車返しがあり、そこからは徒歩となります。玉砂利が敷き詰められた見事な北山杉の並木をしばらく行くと、多摩御陵（大正天皇の墓地）と武蔵野御陵（昭和天皇の墓地）があります。巨大です。</div> </div> </div>

</div>

<img src="images/DSC00131L.jpg" alt="picture6"> <div class="com1">≪ 6 ≫</div> <div class="com2">ふだんは気にも留めない小川のせせらぎに、ふいと気が付くと自然の営みが感じられたりします。じっと見ていると水しぶきと泡達が生まれては消え、また生まれては消え、尽きることがありません。<br> なぜか気分もリフレッシュします。</div> </div> </div>

</div>

<img src="images/DSC00149L.jpg" alt="picture7"> <div class="com1">≪ 7 ≫</div> <div class="com2">鯉のぼりから連想されるのは「鯉の滝登り」。実際に滝を登る鯉は見たことがないけれど、日本画などで見た記憶があります。<br> 子供の立身出世を願って、庶民が「鯉の滝登り」の図柄をヒントに、鯉の形をした吹流しに願いを託して「鯉のぼり」を作ったのだそうです。</div> </div> </div>

(13)

</div>

<img src="images/DSC00203L.jpg" alt="picture8"> <div class="com1">≪ 8 ≫</div> <div class="com2">春に花を咲かせた桜並木は、夏になると深緑のシェードとなります。強烈な日差しを遮り、行きかう人々にしばしの清涼を与えてくれます。</div> </div> </div>

</div>

<img src="images/DSC00198L.jpg" alt="picture9"> <div class="com1">≪ 9 ≫</div> <div class="com2">子供たちが作った鯉のぼりです。それぞれ違った図柄の鯉のぼりが楽しめます。<br> 大人になっても、何事にもこの自由な感覚を持ち続けていってほしいものです。</div> </div> </div>

</div>

<img src="images/DSC00088L.jpg" alt="pictureA"> <div class="com1">≪ 10 ≫</div> <div class="com2">桜の散りはじめた頃です。辺りは花吹雪が舞い、地面は花びらの絨毯と化します。<br> 「また来年も咲いてくれよ。」と声をかけて通り過ぎるのです。</div> </div> </div>

</div>

<img src="images/DSC00178L.jpg" alt="pictureB"> <div class="com1">≪ 11 ≫</div> <div class="com2">小川に敷き詰められた石です。幾何学模様の美しさに、思わずカメラを向けました。<br> 「石が並んでいるな。」としか見ていなかったものが、突然、美しいものに見えた喜びがありました。</div> </div> </div>

(14)

</div>

<img src="images/DSC00189L.jpg" alt="pictureC"> <div class="com1">≪ 12 ≫</div> <div class="com2">鯉のぼりが我先にと天に登ろうとしています。現代社会の縮図です。<br> 「我先に登ろう。」はいいことですが、「ほかの鯉を蹴落して先に登ろう。」というのはいただけません。</div> </div> </div> </div> <div id="slide2">

</div>

<img src="images/DSC00007L.jpg" alt="picture1"> <div class="com1">≪ 1 ≫</div> <div class="com2">秋も深まった公園の紅葉。数年前までは真っ赤に染まった紅葉（もみじ）が見られましたが、今は赤く染まらず、暗赤色が多くなりました。<br> 恥ずかしさで頬に赤く紅葉（もみじ）を散らした女の子もいつの間にかいなくなってしまいました。</div> </div> </div>

</div>

<img src="images/DSC00015L.jpg" alt="picture2"> <div class="com1">≪ 2 ≫</div> <div class="com2">姉と弟でしょうか。公園の入り口に飾られているところから、子供たちに仲良く遊んで欲しいという願いが込められた像なのでしょう。<br> たまに訪れると、母と子、父と子がにぎやかに遊んでいて、こちらも楽しくなってきます。</div> </div> </div>

(15)

<img src="images/DSC00095L.jpg" alt="picture3"> <div class="com1">≪ 3 ≫</div> <div class="com2">白い桜です。短い花の命を燃え尽くそうと、ひしめき合って咲いています。<br> その迫力に圧倒されて、いつのまにかカメラを向けている自分に気付き、思わず“がんばれ”と声を掛けてしまうのです。</div> </div> </div>

</div>

<img src="images/DSC00027L.jpg" alt="picture4"> <div class="com1">≪ 4 ≫</div> <div class="com2">街のスパゲッティ屋の壁に描かれたイラストです。洒落たことをすると感心しながら、さぞスパゲッティも美味しいのだろうと想像してしまいます。<br> いつか入ろうと思いながら月日が経ってしまいました。</div> </div> </div>

</div>

<img src="images/DSC00092L.jpg" alt="picture5"> <div class="com1">≪ 5 ≫</div> <div class="com2">多摩御陵入り口の稜南橋です。ここから少し行くと御陵（武蔵稜墓地）の車返しがあり、そこからは徒歩となります。玉砂利が敷き詰められた見事な北山杉の並木をしばらく行くと、多摩御陵（大正天皇の墓地）と武蔵野御陵（昭和天皇の墓地）があります。巨大です。</div> </div> </div>

</div>

<div class="com2">ふだんは気にも留めない小川のせせらぎに、ふいと気が付くと自然の営みが感じられたりします。じっと見ていると水しぶきと泡達が生まれては消え、また生まれては消え、尽きることがありません。<br>

(16)

なぜか気分もリフレッシュします。</div> </div>

</div>

<img src="images/DSC00149L.jpg" alt="picture7"> <div class="com1">≪ 7 ≫</div> <div class="com2">鯉のぼりから連想されるのは「鯉の滝登り」。実際に滝を登る鯉は見たことがないけれど、日本画などで見た記憶があります。<br> 子供の立身出世を願って、庶民が「鯉の滝登り」の図柄をヒントに、鯉の形をした吹流しに願いを託して「鯉のぼり」を作ったのだそうです。</div> </div> </div>

</div>

<img src="images/DSC00203L.jpg" alt="picture8"> <div class="com1">≪ 8 ≫</div> <div class="com2">春に花を咲かせた桜並木は、夏になると深緑のシェードとなります。強烈な日差しを遮り、行きかう人々にしばしの清涼を与えてくれます。</div> </div> </div>

</div>

<img src="images/DSC00198L.jpg" alt="picture9"> <div class="com1">≪ 9 ≫</div> <div class="com2">子供たちが作った鯉のぼりです。それぞれ違った図柄の鯉のぼりが楽しめます。<br> 大人になっても、何事にもこの自由な感覚を持ち続けていってほしいものです。</div> </div> </div>

(17)

〔CSS の記述（SlidePhotoGallery.css）

〕

#stage ステージのスタイルを指定します。width は 700px、height は 300px で指定します。

背景色を background-color: #000000;（黒色）で指定します。

<img src="images/DSC00088L.jpg" alt="pictureA"> <div class="com1">≪ 10 ≫</div> <div class="com2">桜の散りはじめた頃です。辺りは花吹雪が舞い、地面は花びらの絨毯と化します。<br> 「また来年も咲いてくれよ。」と声をかけて通り過ぎるのです。</div> </div> </div>

</div>

<img src="images/DSC00178L.jpg" alt="pictureB"> <div class="com1">≪ 11 ≫</div> <div class="com2">小川に敷き詰められた石です。幾何学模様の美しさに、思わずカメラを向けました。<br> 「石が並んでいるな。」としか見ていなかったものが、突然、美しいものに見えた喜びがありました。</div> </div> </div>

</div>

<img src="images/DSC00189L.jpg" alt="pictureC"> <div class="com1">≪ 12 ≫</div> <div class="com2">鯉のぼりが我先にと天に登ろうとしています。現代社会の縮図です。<br> 「我先に登ろう。」はいいことですが、「ほかの鯉を蹴落して先に登ろう。」というのはいただけません。</div> </div> </div> </div> </div> </div> </body> </html>

(18)

#galleryTitle 要素（「Photo Gallery」タイトル）の span 要素のスタイルを指定します。

position は absolute、位置は top: 150px; left: 0px; right: 0px;（#stage ボックスの

左上端を起点とした位置）で指定します。 right: 0px;と指定しているのは span 要素を

#stage ボックスの左右中央に配置するために、「left: 0px; right: 0px;」とつぎの

「margin-left: auto; margin-right: auto;」を組み合わせて指定するためです。width は

400px、height は 70px で指定します。背景色を background-color: rgba( 255, 255, 255,

0.4 );（半透明な黒色）で指定します。border-radius: 35px;で四隅の角を丸くします。

box-shadow: 1px 1px 30px rgba( 255, 255, 255, 0.25 ), -1px -1px 30px rgba( 255, 255,

255, 0.25 ), -1px 1px 30px rgba( 255, 255, 255, 0.25 ), 1px -1px 30px rgba( 255, 255,

255, 0.25 );と指定して、#galleryTitle ボックスの周りに半透明の白い輝きを描きます。

text-align: center;でテキストを左右中央配置にします。テキストのフォントを font:

bold 50px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を

color: rgba( 0, 0, 0, 1.0 );（黒色）で指定します。

text-shadow: 1px 1px 3px rgba( 0, 0, 0, 1.0 ), -1px -1px 3px rgba( 0, 0, 0, 1.0 ),

-1px 1px 3px rgba( 0, 0, 0, 1.0 ), 1px -1px 3px rgba( 0, 0, 0, 1.0 );と指定してテ

キスト文字の周りを黒い影でぼかします。

#stage { width: 700px; height: 440px; background-color: #000000; position: relative; } #galleryTitle {

top: 150px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; width: 400px; height: 70px; background-color: rgba( 255, 255, 255, 0.4 ); border-radius: 35px; position: absolute; text-align: center;

font: 50px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: rgba( 0, 0, 0, 1.0 );

text-shadow: 1px 1px 3px rgba( 0, 0, 0, 1.0 ), -1px -1px 3px rgba( 0, 0, 0, 1.0 ), -1px 1px 3px rgba( 0, 0, 0, 1.0 ), 1px -1px 3px rgba( 0, 0, 0, 1.0 ); box-shadow: 1px 1px 30px rgba( 255, 255, 255, 0.25 ), -1px -1px 30px rgba( 255, 255, 255, 0.25 ), -1px 1px 30px rgba( 255, 255, 255, 0.25 ), 1px -1px 30px rgba( 255, 255, 255, 0.25 ); }

(19)

#carouselArea 要素のスタイルを指定します。position は absolute、

位置は top: 0px; left:

2px;（#stage ボックスの左上端を起点とした位置）で指定します。width は 696px、height

は 450px と指定します。

このボックスの中に画像のカルーセルと拡大画像が表示されます。

カルーセルの画像と拡大画像が#carouselArea ボックスの外にはみ出るので、overflow:

hidden;と指定してはみ出る部分を見えないようにします。

.num1 要素（カルーセルの画像の下の画像番号）のスタイルを指定します。position は

absolute、位置は top: 62px; left: 30px;（.imageA ボックスの左上端を起点とした位置）

で指定します。width は 15px、height は 10px と指定します。

text-align: center;でテキストを左右中央配置にします。テキストのフォントを font:

10px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を color:

lightgray;（薄い灰色）で指定します。

.com1 要素（拡大画像の左側の画像番号）のスタイルを指定します。position は absolute、

位置は top: 0px; left: -145px;（.imageB ボックスの左上端を起点とした位置）で指定し

ます。width は 135px、height は 40px と指定します。

text-align: center;でテキストを左右中央配置にします。テキストのフォントを font:

bold 24px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を

color: lightgray;（薄い灰色）で指定します。

#carouselArea { top: 0px; left: 2px; width: 696px; height: 450px; position: absolute; overflow: hidden; } .num1 { top: 62px; left: 30px; width: 15px; height: 10px; position: absolute; text-align: center;

font: 10px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: lightgray;

(20)

.com2 要素（拡大画像の右側のコメントのテキスト）のスタイルを指定します。position

は absolute、位置は top: 0px; left: 420px;（.imageB ボックスの左上端を起点とした位

置）で指定します。width は 120px、height は 300px と指定します。

text-align: center;でテキストを左右中央配置にします。テキストのフォントを font:

14px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を color:

lightgray;（薄い灰色）で指定します。

画像が各 div 要素のサイズに合うように、つぎのように指定します。

.com1 { top: 0px; left: -145px; width: 135px; height: 40px; position: absolute; text-align: center;

font: bold 24px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: lightgray; } .com2 { top: 0px; left: 420px; width: 120px; height: 300px; position: absolute; text-align: left;

font: 14px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: lightgray;

}

#stage img {

width: 100%; height: 100%; }

(21)

〔Slide Photo Gallery の仕組み〕

●画像のカルーセルについて

上の図のように 12 枚の画像（.imageA）を順番に左方向へ動かしますが、12 番目の画像を

表示した後は画像が表示されなくなってしまいます。そのため下の図のように 12 枚の画像

の組を２つ用意して、１組目（#slide1）の表示の後に２組目（#slide2）を続けて表示し

ます。そして２組目の表示の後には１組目を表示して繰り返すと永久に画像が回るカルー

セルができ上がります。

●拡大画像の表示について

実は拡大画像（.imageB）は#carouselArea ボックス（上の図の黒いボックス）の下に 12 枚

の画像が重なって隠れています。

カルーセルの画像（.imageA）と拡大画像（.imageB）は.image-container 要素を親とする

子供要素です。そこで.image-container 要素の領域（つまりカルーセルの画像の領域と拡

拡大画像

（.imageB）

#image11B から

#image2CB の 12

枚の画像が重な

っている。

#slide1

#slide2

(22)

大画像の領域）が hover されたことをトリガー（きっかけ）としてカルーセルの画像や拡

大画像に変化を起こさせることができます。拡大画像（.imageB）は#carouselArea ボック

ス（上の図の黒いボックス）の外に隠れているので、カルーセルの画像（.imageA）を hover

することが.image-container 要素を hover することになります。

ですからカルーセルの画像（.imageA）が hover されたら、それをきっかけとして拡大画像

（.imageB）を top: 80px; から top: -340px;へ変化させて#carouselArea ボックス（上の

図の黒いボックス）の領域へ引き上げ、opacity: 0.0;から opacity: 1.0;へ変化させて、

拡大画像（.imageB）を見えるようにします。

●拡大画像の位置の固定について

上記の説明でカルーセルの画像が回転する仕組みと拡大画像が表示される仕組みは分かり

ました。しかし１つ大きな問題があります。#slide1 および#slide2 を左方向へ動かすとそ

の子供要素である.image-container 要素が一緒に動きます。そのときカルーセルの画像

（.imageA）と拡大画像（.imageB）も同時に動きます。カルーセルの画像（.imageA）は動

いて良いのですが、拡大画像（.imageB）は上の図のように位置を固定しておかなければな

りません。そのためにはつぎのような裏ワザを使う必要があります。

拡大画像

（.imageB）

#image11B から

#image2CB の 12

枚の画像が重な

っている。

top: -340px;

top: 80px;

top: 0px;

(23)

例えば上の図のように#slide1 要素の場合、左方向へ 1044px（left: -1044px;まで）を移

動します。カルーセルの画像（.imageA）の中の１番目の画像#image11A を見た場合、画像

#image11A は#slide1 要素と共に左方向へ移動し、画像#image11A の兄弟要素である拡大画

像#image11B も左方向へ移動してしまいます。

拡大画像（.imageB）の１番目の画像#image11B の位置を固定するためには、画像#image11A

とは逆の右方向へ移動させます。上の図のようにそれぞれの拡大画像（.imageB）はカルー

セルの画像（.imageA）と距離が異なり、初期値の（静止状態時の）left プロパティの値が

異なります。それぞれの拡大画像（.imageB）を上の図のように位置を固定しておくために

は、右方向へ 1044px（left: 1044＋left の値 px;まで）移動させます。

#slide1 要素（１組目のカルーセルの画像の全体）のスタイルを指定します。position は

absolute、位置は top: 360px; left: 0px;（#carouselArea ボックスの左上端を起点とし

た位置）で指定します。width は 1044px、height は 100px で指定します。

アニメーション名を slide1Anime、実行時間を 60s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

left: 133px;

left: -128px;

left: -215px;

left: 46px;

left: -41px;

右方向へ 1044px（left: 1044＋left の値 px まで）

を移動させます。

左方向へ 1044px（left: -1044px;まで）

を移動します。

(24)

アニメーション名 slide1Anime に対応するタイムライン（@keyframes）を指定します。0%

から 100%の間に left: 0px;から left: -1044px;まで移動させます。アニメーション

slide1Anime の繰り返しが infinite で指定されているので、永久に画像が回転します。

#slide2 要素（２組目のカルーセルの画像の全体）のスタイルを指定します。position は

absolute、位置は top: 360px; left: 1044px;（#carouselArea ボックスの左上端を起点と

した位置）で指定します。width は 1044px、height は 100px で指定します。

アニメーション名を slide2Anime、実行時間を 60s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

/********************************************************************** * slide1 * **********************************************************************/ #slide1 { top: 360px; left: 0px; width: 1044px; height: 100px; position: absolute;

animation: slide1Anime 60s linear 0s infinite normal;

-webkit-animation: slide1Anime 60s linear 0s infinite normal; } @keyframes slide1Anime { 0% { } 100% { left: -1044px; } } @-webkit-keyframes slide1Anime { 0% { } 100% { left: -1044px; } } /********************************************************************** * slide2 * **********************************************************************/ #slide2 { top: 360px; left: 1044px; width: 1044px; height: 100px; position: absolute;

animation: slide2Anime 60s linear 0s infinite normal;

-webkit-animation: slide2Anime 60s linear 0s infinite normal; }

(25)

アニメーション名 slide2Anime に対応するタイムライン（@keyframes）を指定します。0%

から 100%の間に left: 1044px;から left: 0px;まで移動させます。アニメーション

slide2Anime の繰り返しが infinite で指定されているので、永久に画像が回転します。

.image-container 要素のスタイルを指定します。このスタイルは#slide1 要素と#slide2 要

素のそれぞれの.image-container 要素（カルーセルの画像や拡大画像などの親ボックス）

の共通スタイルになります。position は absolute、位置は top: 0px;（#slide1 ボックス

または#slide2 ボックスの左上端を起点とした位置）で指定します。left プロパティの値

はそれぞれの.image-container ごとに指定します。width と height は指定しないので大き

さゼロのボックスになり、カルーセルの画像や拡大画像などの起点になります。

.image-container 要素の left プロパティの値を指定します。それぞれの.image-container

要素ごとに指定するので、それぞれの.image-container 要素に追加してある class 属性名

で指定します。

@keyframes slide2Anime { 0% { } 100% { left: 0px; } } @-webkit-keyframes slide2Anime { 0% { } 100% { left: 0px; } } /********************************************************************** * image-container * **********************************************************************/ .image-container { top: 0px; position: absolute; } .cntnr01 { left: 5px; } .cntnr02 { left: 92px; } .cntnr03 { left: 179px; }

(26)

.imageA 要素（カルーセルの画像）のスタイルを指定します。このスタイルはそれぞれ

の.imageA 要素の共通スタイルになります。position は absolute、位置は top: 0px; left:

0px;

（.image-container ボックスの左上端を起点とした位置）

で指定します。

width は 77px、

height は 58px で指定します。ボーダーを border: solid 1px gray;（灰色）で指定します。

.imageB 要素（拡大画像）のスタイルを指定します。このスタイルはそれぞれの.imageB 要

素の共通スタイルになります。position は absolute、位置は top: 80px;（.image-container

ボックスの左上端を起点とした位置）で指定します。left プロパティの値はそれぞれの拡

大画像（.imageB）がカルーセルの画像（.imageA）と距離が異なるので、それぞれの.imageB

.cntnr04 { left: 266px; } .cntnr05 { left: 353px; } .cntnr06 { left: 440px; } .cntnr07 { left: 527px; } .cntnr08 { left: 614px; } .cntnr09 { left: 701px; } .cntnr10 { left: 788px; } .cntnr11 { left: 875px; } .cntnr12 { left: 962px; }

/* .imageA (carousel images ) **********************************/ .imageA {

top: 0px; left: 0px; width: 77px; height: 58px; border: solid 1px gray; position: absolute; }

(27)

要素ごとに指定します。width は 400px、height は 300px で指定します。ボーダーを border:

solid 10px white;（白色 10px）で指定します。初めは見えないように opacity: 0.0;を指

定します。

カルーセルの画像（.imageA）を hover した時に拡大画像（.imageB）を表示する際に、１

秒間で徐々に見えるように transition: opacity 1s ease-in-out, top 0s;と指定しておき

ます。

カルーセルの画像（.imageA）を hover した時の拡大画像（.imageB）の変化を指定します。

top: 80px;から top: -340px;に変化させ、

#carouselArea ボックスに移動させます。opacity:

0.0;から opacity: 1.0;に変化させ、見えるようにします。トランジション transition:

opacity 1s ease-in-out;で指定されているので、１秒間で徐々に見えるようになります。

これ以降は#slide1 要素と#slide2 要素のそれぞれの.image-container 要素に含まれる拡大

画像の共通スタイルを指定します。

それぞれの拡大画像（.imageB）はカルーセルの画像（.imageA）と距離（つまりそれぞれ

の.image-container 要素の起点との距離）が異なり、初期値の（静止状態時の）left プロ

パティの値が異なります。それぞれの拡大画像（.imageB）を上の図のように位置を固定し

ておくためには、右方向へ 1044px（left: 1044＋left の値 px;まで）移動させます。

/* .imageB (expanded images) ***********************************/ .imageB {

top: 80px;

width: 400px; height: 300px; border: solid 10px white; position: absolute; opacity: 0.0;

transition: opacity 1s ease-in-out, top 0s;

-webkit-transition: opacity 1s ease-in-out, top 0s; }

/********************************************************************** * when image-container (=imageA) is hovered --> change imageB * **********************************************************************/ .image-container:hover .imageB {

top: -340px; opacity: 1.0; }

(28)

/********************************************************************** * Slide1 backward (to keep static location of imageB) * **********************************************************************/ #image11B {

left: 133px;

animation: image11Anime 60s linear 0s infinite normal;

-webkit-animation: image11Anime 60s linear 0s infinite normal; } @keyframes image11Anime { 0% { } 100% { left: 1177px; } } @-webkit-keyframes image11Anime { 0% { } 100% { left: 1177px; } } #image12B { left: 46px;

-webkit-animation: image12Anime 60s linear 0s infinite normal; } @keyframes image12Anime { 0% { } 100% { left: 1090px; } } @-webkit-keyframes image12Anime { 0% { } 100% { left: 1090px; } } #image13B { left: -41px;

-webkit-animation: image14Anime 60s linear 0s infinite normal; }

(29)

-webkit-animation: image17Anime 60s linear 0s infinite normal; } @keyframes image17Anime { 0% { } 100% { left: 655px; } } @-webkit-keyframes image17Anime { 0% { } 100% { left: 655px; } }

(30)

left: -476px;

-webkit-animation: image19Anime 60s linear 0s infinite normal; } @keyframes image19Anime { 0% { } 100% { left: 481px; } } @-webkit-keyframes image19Anime { 0% { } 100% { left: 481px; } } #image1AB { left: -650px;

animation: image1AAnime 60s linear 0s infinite normal;

-webkit-animation: image1AAnime 60s linear 0s infinite normal; } @keyframes image1AAnime { 0% { } 100% { left: 394px; } } @-webkit-keyframes image1AAnime { 0% { } 100% { left: 394px; } } #image1BB { left: -737px;

animation: image1BAnime 60s linear 0s infinite normal;

-webkit-animation: image1BAnime 60s linear 0s infinite normal; }

@keyframes image1BAnime { 0% { }

100% { left: 307px; } }

(31)

animation: image1CAnime 60s linear 0s infinite normal;

-webkit-animation: image1CAnime 60s linear 0s infinite normal; } @keyframes image1CAnime { 0% { } 100% { left: 220px; } } @-webkit-keyframes image1CAnime { 0% { } 100% { left: 220px; } } /********************************************************************** * Slide2 backward (to keep static location of imageB) * **********************************************************************/ #image21B {

left: -911px;

-webkit-animation: image22Anime 60s linear 0s infinite normal; } @keyframes image22Anime { 0% { } 100% { left: 46px; } } @-webkit-keyframes image22Anime { 0% { } 100% { left: 46px; } }

(32)

left: -1085px;

-webkit-animation: image23Anime 60s linear 0s infinite normal; } @keyframes image23Anime { 0% { } 100% { left: -41px; } } @-webkit-keyframes image23Anime { 0% { } 100% { left: -41px; } } #image24B { left: -1172px;

-webkit-animation: image26Anime 60s linear 0s infinite normal; }

@keyframes image26Anime { 0% { }

100% { left: -302px; } }

(33)

-webkit-animation: image29Anime 60s linear 0s infinite normal; } @keyframes image29Anime { 0% { } 100% { left: -563px; } } @-webkit-keyframes image29Anime { 0% { } 100% { left: -563px; } } #image2AB { left: -1694px;

animation: image2AAnime 60s linear 0s infinite normal;

-webkit-animation: image2AAnime 60s linear 0s infinite normal; }

(34)

animation: image2BAnime 60s linear 0s infinite normal;

-webkit-animation: image2BAnime 60s linear 0s infinite normal; } @keyframes image2BAnime { 0% { } 100% { left: -737px; } } @-webkit-keyframes image2BAnime { 0% { } 100% { left: -737px; } } #image2CB { left: -1868px;

animation: image2CAnime 60s linear 0s infinite normal;

-webkit-animation: image2CAnime 60s linear 0s infinite normal; } @keyframes image2CAnime { 0% { } 100% { left: -824px; } } @-webkit-keyframes image2CAnime { 0% { } 100% { left: -824px; } }

images/dsc00092s.jpg images/dsc00131s.jpg images/dsc00149s.jpg images/dsc00203s.jpg <!DOCTYPE html> <html> <head> <title>roundphotogallery</title> <me

1346-8 応用２ Photo Gallery

画像のカルーセルを利用してフォトギャラリーを２つ作ってみましょう。

●フォトギャラリー１

回転の中心から距離を置いて放射状に広がった画像のカルーセルを利用してフォトギャラ

リーを作ってみましょう。hover すると画像が拡大表示されます。

【RoundPhotoGallery の説明】

〔HTML の記述（RoundPhotoGallery.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 galleryTitle の span 要素を記述し、中に「Photo Gallery」と記述します。

id 属性 carouselArea の div 要素を記述します。このボックスの中で画像のカルーセルが動

きます。

id 属性 goRound の div 要素を記述し、中につぎの８つの画像を指定します。

images/DSC00007S.jpg

images/DSC00015S.jpg

images/DSC00095S.jpg

images/DSC00027S.jpg

サンプルＣＳＳ１

images/DSC00092S.jpg

images/DSC00131S.jpg

images/DSC00149S.jpg

images/DSC00203S.jpg

〔CSS の記述（RoundPhotoGallery.css）

〕

#stage ステージのスタイルを指定します。width は 700px、height は 300px で指定します。

背景色を background-color: #000000;（黒色）で指定します。

#galleryTitle 要素（

「Photo Gallery」タイトル）の span 要素のスタイルを指定します。

position は absolute、位置は top: 210px; left: 0px; right: 0px;（#stage ボックスの

左上端を起点とした位置）で指定します。 right: 0px;と指定しているのは span 要素を

#stage ボックスの左右中央に配置するために、「left: 0px; right: 0px;」とつぎの

「margin-left: auto; margin-right: auto;」を組み合わせて指定するためです。width は

auto、height は 70px で指定します。背景色を background-color: rgba( 255, 255, 255,

0.4 );（半透明な黒色）で指定します。box-shadow: 1px 1px 50px rgba( 255, 255, 255,

0.6 ), -1px -1px 50px rgba( 255, 255, 255, 0.6 );と指定して、#galleryTitle ボック

スの上部と下部に半透明の白い輝きを描きます。

text-align: center;でテキストを左右中央配置にします。テキストのフォントを font:

bold 50px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を

color: rgba( 0, 0, 0, 1.0 );（黒色）で指定します。

#carouselArea 要素のスタイルを指定します。position は absolute、

位置は top: 0px; left:

0px;（#stage ボックスの左上端を起点とした位置）で指定します。このボックスの中で画

像のカルーセルが動きます。カルーセルが遠近感をもって３Ｄ回転して見えるように、

perspective: 600px;で指定します。

#goRound 要素のスタイルを指定します。position は absolute、位置は top: 60px; left:

350px;（#carouselArea ボックスの左上端を起点とした位置）で指定します。width と height

は指定しないので大きさゼロのボックスになります。画像（子要素）を#goRound 要素の平

面に対して３Ｄで角度を付けるので、transform-style: preserve-3d;の指定をします。画

像のカルーセルの回転は#goRound 要素を回転させるので、変化の起点（回転の中心）を

transform-origin: 0px 0px;で指定します。この transform-origin の値を変更するとカル

ーセルの回転の中心の位置を変更することができます。

アニメーション名を goRoundAnime、実行時間を 30s、イージングを linear、開始待ち時間

を 0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 goRoundAnime に対応するタイムライン（@keyframes）を指定します。0%

から 100%の間に transform: rotateY(-360deg);で Y 軸の正方向から見て反時計回りに 360

度回転させます。アニメーション goRoundAnime の繰り返しが infinite で指定されている

ので、永久に左回転します。

#goRound img 要素のスタイルを指定します。#goRound 要素の子供の img 要素の共通スタイ

ルになります。position は absolute、位置 top: 0px; left: 0px;（#goRound ボックスの

左上端を起点とした位置）で指定します。width は 108px、height は 81px で指定します。

ボーダーを border: solid 1px gray;（灰色）で指定します。画像の左辺を軸として回転さ

せるので、変化の起点（回転の中心）を transform-origin: 0% 0%;で指定します。

画像を hover した時に画像を拡大表示するので、滑らかに拡大するように transition の指

定をします。transition: width 0.5s ease-in-out, height 0.5s ease-in-out, border 0.5s

ease-in-out;で、width、height、border に関して 0.5 秒で変化するように指定します。

それぞれの画像の角度（rotateY）と右方向への移動距離（translateX）を指定します。

transform プロパティの translateX 関数で 80px 右方向へ移動させます。

画像が８枚あるので、それぞれの画像に transform プロパティの rotateY 関数で角度をつ

けます。360 度の 8 分の 1 は 45 度なので、それぞれの画像を 0 度から初めて-45（または

45）の倍数の角度で Y 軸を中心に回転させていきます。

親の div 要素

top: 任意の値;

left: 350px;

width: 0px;

height: 0px;

画像

top: 0px;

left: 0px;

transform-origin:

bold 50px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、テキストの色を

_{親の div 要素}

〔 --- 画像名 --- 〕

.imageA （#image11A～#image1CA）画面下方の回転する小さな画像

imageB （#image11B～#image1CB）拡大された画像

〔番号〕〔画像と画像名〕〔コメント〕