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

Size: px

Start display at page:

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

いおりふじつぐ
5 years ago
Views:

1346-8 応用 2 Photo Gallery 画像のカルーセルを利用してフォトギャラリーを 2 つ作ってみましょうフォトギャラリー 1 サンプル CSS1 回転の中心から距離を置いて放射状に広がった画像のカルーセルを利用してフォトギャラリーを作ってみましょう hover すると画像が拡大表示されます RoundPhotoGallery の説明 HTML の記述

1 応用 2 Photo Gallery 画像のカルーセルを利用してフォトギャラリーを 2 つ作ってみましょうフォトギャラリー 1 サンプル CSS1 回転の中心から距離を置いて放射状に広がった画像のカルーセルを利用してフォトギャラリーを作ってみましょう hover すると画像が拡大表示されます RoundPhotoGallery の説明 HTML の記述 (RoundPhotoGallery.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 gallerytitle の span 要素を記述し中に Photo Gallery と記述します id 属性 carouselarea の div 要素を記述しますこのボックスの中で画像のカルーセルが動きます id 属性 goround の div 要素を記述し中につぎの 8 つの画像を指定します images/dsc00007s.jpg images/dsc00015s.jpg images/dsc00095s.jpg images/dsc00027s.jpg 1

2 images/dsc00092s.jpg images/dsc00131s.jpg images/dsc00149s.jpg images/dsc00203s.jpg <!DOCTYPE html> <html> <head> <title>roundphotogallery</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="roundphotogallery.css"> </head> <body> <p> Animation で画像を円運動させる hover で拡大表示させる </p> <div id="stage"> <span id="gallerytitle">photo Gallery</span> <div id="carouselarea"> <div id="goround"> <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"> </body> </html> CSS の記述 (RoundPhotoGallery.css) #stage ステージのスタイルを指定します width は 700px height は 300px で指定します背景色を background-color: #000000;( 黒色 ) で指定します #stage { width: 700px; height: 350px; background-color: #000000; position: relative; #gallerytitle 要素 ( Photo Gallery タイトル ) の span 要素のスタイルを指定します position は absolute 位置は top: 210px; left: 0px; right: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します right: 0px; と指定しているのは span 要素を 2

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 "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: rgba( 0, 0, 0, 1.0 );( 黒色 ) で指定します #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 "MS P ゴシック ", 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 要素のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定しますこのボックスの中で画像のカルーセルが動きますカルーセルが遠近感をもって3D 回転して見えるように perspective: 600px; で指定します #carouselarea { top: 0px; left: 0px; width: 700px; height: 200px; position: absolute; perspective: 600px; -webkit-perspective: 600px; #goround 要素のスタイルを指定します position は absolute 位置は top: 60px; left: 350px;(#carouselArea ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります画像 ( 子要素 ) を #goround 要素の平面に対して 3D で角度を付けるので transform-style: preserve-3d; の指定をします画 3

4 像のカルーセルの回転は #goround 要素を回転させるので変化の起点 ( 回転の中心 ) を transform-origin: 0px 0px; で指定しますこの transform-origin の値を変更するとカルーセルの回転の中心の位置を変更することができますアニメーション名を goroundanime 実行時間を 30s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #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; アニメーション名 goroundanime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatey(-360deg); で Y 軸の正方向から見て反時計回りに 360 度回転させますアニメーション goroundanime の繰り返しが infinite で指定されているので goroundanime { 0% { transform: rotatey(0deg); 100% { transform: goroundanime { 0% { -webkit-transform: rotatey(0deg); 100% { -webkit-transform: rotatey(-360deg); #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 秒で変化するように指定します 4

5 #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; それぞれの画像の角度 (rotatey) と右方向への移動距離 (translatex) を指定します transform プロパティの translatex 関数で 80px 右方向へ移動させます #carouselarea の width の 2 分の 1 #carouselare 親の div 要素 top: 任意の値 ; left: 350px; width: 0px; height: 0px; 80px 画像 top: 0px; left: 0px; transform-origin: 0% 0%; translatex(80px); 画像が 8 枚あるのでそれぞれの画像に 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); #goround > img:nth-child(2) { transform: rotatey(-45deg) translatex(80px); -webkit-transform: rotatey(-45deg) translatex(80px); #goround > img:nth-child(3) { transform: rotatey(-90deg) translatex(80px); -webkit-transform: rotatey(-90deg) translatex(80px); 5

6 #goround > img:nth-child(4) { transform: rotatey(-135deg) translatex(80px); -webkit-transform: rotatey(-135deg) translatex(80px); #goround > img:nth-child(5) { transform: rotatey(-180deg) translatex(80px); -webkit-transform: rotatey(-180deg) translatex(80px); #goround > img:nth-child(6) { transform: rotatey(-225deg) translatex(80px); -webkit-transform: rotatey(-225deg) translatex(80px); #goround > img:nth-child(7) { transform: rotatey(-270deg) translatex(80px); -webkit-transform: rotatey(-270deg) translatex(80px); #goround > img:nth-child(8) { transform: rotatey(-315deg) translatex(80px); -webkit-transform: rotatey(-315deg) translatex(80px); #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; 6

フォトギャラリー 2 サンプル CSS2 右から左へ回転する 12 枚の画像を hover すると拡大された画像とその画像に関するコメントが表示されるフォトギャラリーを作ってみましょう SlidePhotoGallery の説明 HTML の記述 (SlidePhotoGallery.

このボックスの中で画像のカルーセルが動きます id 属性 slide1( スライド全体 ) の div 要素を記述しその中に次のような階層構造で div 要素を記述し img 画像やコメントのテキスト文字を指定します ----- div 要素の class 属性 id 属性 -----

7 フォトギャラリー 2 サンプル CSS2 右から左へ回転する 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 7

cntnr12 および id 属性名で image11 から image1c を追加しています class 属性 image-container の div 要素の中には class 属性 imagea(id 属性名 image11a から image1ca を追加 ) の div 要素を記述しその中に img 要素で画像の指定及び class 属性 num1 の div

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 要素の階層構造としてもう1 組記述します 12 枚の画像とコメントは次のように記述しています番号画像と画像名コメント 1 images/dsc00007l.jpg 秋も深まった公園の紅葉数年前までは真っ赤に染まった紅葉 ( もみじ ) が見られましたが今は赤く染まらず暗赤色が多くなりました恥ずかしさで頬に赤く紅葉 ( もみじ ) を散らした女の子もいつの間にかいなくなってしまいました 2 images/dsc00015l.jpg 姉と弟でしょうか公園の入り口に飾られているところから子供たちに仲良く遊んで欲しいという願いが込められた像なのでしょうたまに訪れると母と子父と子がにぎやかに遊んでいてこちらも楽しくなってきます 8

いつか入ろうと思いながら月日が経ってしまいました 5 images/dsc00092l.jpg 6 images/dsc00131l.

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 多摩御陵入り口の稜南橋ですここから少し行くと御陵 ( 武蔵稜墓地 ) の車返しがありそこからは徒歩となります玉砂利が敷き詰められた見事な北山杉の並木をしばらく行くと多摩御陵 ( 大正天皇の墓地 ) と武蔵野御陵 ( 昭和天皇の墓地 ) があります巨大ですふだんは気にも留めない小川のせせらぎにふいと気が付くと自然の営みが感じられたりしますじっと見ていると水しぶきと泡達が生まれては消えまた生まれては消え尽きることがありませんなぜか気分もリフレッシュします鯉のぼりから連想されるのは鯉の滝登り実際に滝を登る鯉は見たことがないけれど日本画などで見た記憶があります子供の立身出世を願って庶民が鯉の滝登りの図柄をヒントに鯉の形をした吹流しに願いを託して鯉のぼりを作ったのだそうです春に花を咲かせた桜並木は夏になると新緑のシェードとなります強烈な日差しを遮り行きかう人々にしばしの清涼を与えてくれます 9

jpg 小川に敷き詰められた石です幾何学模様の美しさに思わずカメラを向けました石が並んでいるなとしか見ていなかったものが突然美しいものに見えた喜びがありました 12

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"> <link rel="stylesheet" type="text/css" href="slidephotogallery.css"> </head> <body> <p> Animation で 12 枚の画像をスライドさせる hover で拡大表示コメント表示させる </p> <div id="stage"> <span id="gallerytitle">photo Gallery</span> <div id="carouselarea"> 10

11 <div id="slide1"> <div class="image-container cntnr01" id="image11"> <div class="imagea" id="image11a"> <img src="images/dsc00007l.jpg" alt="picture1"> <div class="num1">1 <div class="imageb" id="image11b"> <img src="images/dsc00007l.jpg" alt="picture1"> <div class="com1"> 1 <div class="com2"> 秋も深まった公園の紅葉数年前までは真っ赤に染まった紅葉 ( もみじ ) が見られましたが今は赤く染まらず暗赤色が多くなりました <br> 恥ずかしさで頬に赤く紅葉 ( もみじ ) を散らした女の子もいつの間にかいなくなってしまいました <div class="image-container cntnr02" id="image12"> <div class="imagea" id="image12a"> <img src="images/dsc00015l.jpg" alt="picture2"> <div class="num1">2 <div class="imageb" id="image12b"> <img src="images/dsc00015l.jpg" alt="picture2"> <div class="com1"> 2 <div class="com2"> 姉と弟でしょうか公園の入り口に飾られているところから子供たちに仲良く遊んで欲しいという願いが込められた像なのでしょう <br> たまに訪れると母と子父と子がにぎやかに遊んでいてこちらも楽しくなってきます <div class="image-container cntnr03" id="image13"> <div class="imagea" id="image13a"> <img src="images/dsc00095l.jpg" alt="picture3"> <div class="num1">3 <div class="imageb" id="image13b"> <img src="images/dsc00095l.jpg" alt="picture3"> <div class="com1"> 3 <div class="com2"> 白い桜です短い花の命を燃え尽くそうとひしめき合って咲いています <br> その迫力に圧倒されていつのまにかカメラを向けている自分に気付き思わずがんばれと声を掛けてしまうのです <div class="image-container cntnr04" id="image14"> <div class="imagea" id="image14a"> <img src="images/dsc00027l.jpg" alt="picture4"> <div class="num1">4 <div class="imageb" id="image14b"> <img src="images/dsc00027l.jpg" alt="picture4"> 11

12 <div class="com1"> 4 <div class="com2"> 街のスパゲッティ屋の壁に描かれたイラストです洒落たことをすると感心しながらさぞスパゲッティも美味しいのだろうと想像してしまいます <br> いつか入ろうと思いながら月日が経ってしまいました <div class="image-container cntnr05" id="image15"> <div class="imagea" id="image15a"> <img src="images/dsc00092l.jpg" alt="picture5"> <div class="num1">5 <div class="imageb" id="image15b"> <img src="images/dsc00092l.jpg" alt="picture5"> <div class="com1"> 5 <div class="com2"> 多摩御陵入り口の稜南橋ですここから少し行くと御陵 ( 武蔵稜墓地 ) の車返しがありそこからは徒歩となります玉砂利が敷き詰められた見事な北山杉の並木をしばらく行くと多摩御陵 ( 大正天皇の墓地 ) と武蔵野御陵 ( 昭和天皇の墓地 ) があります巨大です <div class="image-container cntnr06" id="image16"> <div class="imagea" id="image16a"> <img src="images/dsc00131l.jpg" alt="picture6"> <div class="num1">6 <div class="imageb" id="image16b"> <img src="images/dsc00131l.jpg" alt="picture6"> <div class="com1"> 6 <div class="com2"> ふだんは気にも留めない小川のせせらぎにふいと気が付くと自然の営みが感じられたりしますじっと見ていると水しぶきと泡達が生まれては消えまた生まれては消え尽きることがありません <br> なぜか気分もリフレッシュします <div class="image-container cntnr07" id="image17"> <div class="imagea" id="image17a"> <img src="images/dsc00149l.jpg" alt="picture7"> <div class="num1">7 <div class="imageb" id="image17b"> <img src="images/dsc00149l.jpg" alt="picture7"> <div class="com1"> 7 <div class="com2"> 鯉のぼりから連想されるのは鯉の滝登り実際に滝を登る鯉は見たことがないけれど日本画などで見た記憶があります <br> 子供の立身出世を願って庶民が鯉の滝登りの図柄をヒントに鯉の形をした吹流しに願いを託して鯉のぼりを作ったのだそうです <div class="image-container cntnr08" id="image18"> <div class="imagea" id="image18a"> 12

13 <img src="images/dsc00203l.jpg" alt="picture8"> <div class="num1">8 <div class="imageb" id="image18b"> <img src="images/dsc00203l.jpg" alt="picture8"> <div class="com1"> 8 <div class="com2"> 春に花を咲かせた桜並木は夏になると深緑のシェードとなります強烈な日差しを遮り行きかう人々にしばしの清涼を与えてくれます <div class="image-container cntnr09" id="image19"> <div class="imagea" id="image19a"> <img src="images/dsc00198l.jpg" alt="picture9"> <div class="num1">9 <div class="imageb" id="image19b"> <img src="images/dsc00198l.jpg" alt="picture9"> <div class="com1"> 9 <div class="com2"> 子供たちが作った鯉のぼりですそれぞれ違った図柄の鯉のぼりが楽しめます <br> 大人になっても何事にもこの自由な感覚を持ち続けていってほしいものです <div class="image-container cntnr10" id="image1a"> <div class="imagea" id="image1aa"> <img src="images/dsc00088l.jpg" alt="picturea"> <div class="num1">10 <div class="imageb" id="image1ab"> <img src="images/dsc00088l.jpg" alt="picturea"> <div class="com1"> 10 <div class="com2"> 桜の散りはじめた頃です辺りは花吹雪が舞い地面は花びらの絨毯と化します <br> また来年も咲いてくれよと声をかけて通り過ぎるのです <div class="image-container cntnr11" id="image1b"> <div class="imagea" id="image1ba"> <img src="images/dsc00178l.jpg" alt="pictureb"> <div class="num1">11 <div class="imageb" id="image1bb"> <img src="images/dsc00178l.jpg" alt="pictureb"> <div class="com1"> 11 <div class="com2"> 小川に敷き詰められた石です幾何学模様の美しさに思わずカメラを向けました <br> 石が並んでいるなとしか見ていなかったものが突然美しいものに見えた喜びがありました 13

14 <div class="image-container cntnr12" id="image1c"> <div class="imagea" id="image1ca"> <img src="images/dsc00189l.jpg" alt="picturec"> <div class="num1">12 <div class="imageb" id="image1cb"> <img src="images/dsc00189l.jpg" alt="picturec"> <div class="com1"> 12 <div class="com2"> 鯉のぼりが我先にと天に登ろうとしています現代社会の縮図です <br> 我先に登ろうはいいことですがほかの鯉を蹴落して先に登ろうというのはいただけません <div id="slide2"> <div class="image-container cntnr01" id="image21"> <div class="imagea" id="image21a"> <img src="images/dsc00007l.jpg" alt="picture1"> <div class="num1">1 <div class="imageb" id="image21b"> <img src="images/dsc00007l.jpg" alt="picture1"> <div class="com1"> 1 <div class="com2"> 秋も深まった公園の紅葉数年前までは真っ赤に染まった紅葉 ( もみじ ) が見られましたが今は赤く染まらず暗赤色が多くなりました <br> 恥ずかしさで頬に赤く紅葉 ( もみじ ) を散らした女の子もいつの間にかいなくなってしまいました <div class="image-container cntnr02" id="image22"> <div class="imagea" id="image22a"> <img src="images/dsc00015l.jpg" alt="picture2"> <div class="num1">2 <div class="imageb" id="image22b"> <img src="images/dsc00015l.jpg" alt="picture2"> <div class="com1"> 2 <div class="com2"> 姉と弟でしょうか公園の入り口に飾られているところから子供たちに仲良く遊んで欲しいという願いが込められた像なのでしょう <br> たまに訪れると母と子父と子がにぎやかに遊んでいてこちらも楽しくなってきます <div class="image-container cntnr03" id="image23"> <div class="imagea" id="image23a"> <img src="images/dsc00095l.jpg" alt="picture3"> 14

15 <div class="num1">3 <div class="imageb" id="image23b"> <img src="images/dsc00095l.jpg" alt="picture3"> <div class="com1"> 3 <div class="com2"> 白い桜です短い花の命を燃え尽くそうとひしめき合って咲いています <br> その迫力に圧倒されていつのまにかカメラを向けている自分に気付き思わずがんばれと声を掛けてしまうのです <div class="image-container cntnr04" id="image24"> <div class="imagea" id="image24a"> <img src="images/dsc00027l.jpg" alt="picture4"> <div class="num1">4 <div class="imageb" id="image24b"> <img src="images/dsc00027l.jpg" alt="picture4"> <div class="com1"> 4 <div class="com2"> 街のスパゲッティ屋の壁に描かれたイラストです洒落たことをすると感心しながらさぞスパゲッティも美味しいのだろうと想像してしまいます <br> いつか入ろうと思いながら月日が経ってしまいました <div class="image-container cntnr05" id="image25"> <div class="imagea" id="image25a"> <img src="images/dsc00092l.jpg" alt="picture5"> <div class="num1">5 <div class="imageb" id="image25b"> <img src="images/dsc00092l.jpg" alt="picture5"> <div class="com1"> 5 <div class="com2"> 多摩御陵入り口の稜南橋ですここから少し行くと御陵 ( 武蔵稜墓地 ) の車返しがありそこからは徒歩となります玉砂利が敷き詰められた見事な北山杉の並木をしばらく行くと多摩御陵 ( 大正天皇の墓地 ) と武蔵野御陵 ( 昭和天皇の墓地 ) があります巨大です <div class="image-container cntnr06" id="image26"> <div class="imagea" id="image26a"> <img src="images/dsc00131l.jpg" alt="picture6"> <div class="num1">6 <div class="imageb" id="image26b"> <img src="images/dsc00131l.jpg" alt="picture6"> <div class="com1"> 6 <div class="com2"> ふだんは気にも留めない小川のせせらぎにふいと気が付くと自然の営みが感じられたりしますじっと見ていると水しぶきと泡達が生まれては消えまた生まれては消え尽きることがありません <br> 15

16 なぜか気分もリフレッシュします <div class="image-container cntnr07" id="image27"> <div class="imagea" id="image27a"> <img src="images/dsc00149l.jpg" alt="picture7"> <div class="num1">7 <div class="imageb" id="image27b"> <img src="images/dsc00149l.jpg" alt="picture7"> <div class="com1"> 7 <div class="com2"> 鯉のぼりから連想されるのは鯉の滝登り実際に滝を登る鯉は見たことがないけれど日本画などで見た記憶があります <br> 子供の立身出世を願って庶民が鯉の滝登りの図柄をヒントに鯉の形をした吹流しに願いを託して鯉のぼりを作ったのだそうです <div class="image-container cntnr08" id="image28"> <div class="imagea" id="image28a"> <img src="images/dsc00203l.jpg" alt="picture8"> <div class="num1">8 <div class="imageb" id="image28b"> <img src="images/dsc00203l.jpg" alt="picture8"> <div class="com1"> 8 <div class="com2"> 春に花を咲かせた桜並木は夏になると深緑のシェードとなります強烈な日差しを遮り行きかう人々にしばしの清涼を与えてくれます <div class="image-container cntnr09" id="image29"> <div class="imagea" id="image29a"> <img src="images/dsc00198l.jpg" alt="picture9"> <div class="num1">9 <div class="imageb" id="image29b"> <img src="images/dsc00198l.jpg" alt="picture9"> <div class="com1"> 9 <div class="com2"> 子供たちが作った鯉のぼりですそれぞれ違った図柄の鯉のぼりが楽しめます <br> 大人になっても何事にもこの自由な感覚を持ち続けていってほしいものです <div class="image-container cntnr10" id="image2a"> <div class="imagea" id="image2aa"> <img src="images/dsc00088l.jpg" alt="picturea"> <div class="num1">10 16

17 <div class="imageb" id="image2ab"> <img src="images/dsc00088l.jpg" alt="picturea"> <div class="com1"> 10 <div class="com2"> 桜の散りはじめた頃です辺りは花吹雪が舞い地面は花びらの絨毯と化します <br> また来年も咲いてくれよと声をかけて通り過ぎるのです <div class="image-container cntnr11" id="image2b"> <div class="imagea" id="image2ba"> <img src="images/dsc00178l.jpg" alt="pictureb"> <div class="num1">11 <div class="imageb" id="image2bb"> <img src="images/dsc00178l.jpg" alt="pictureb"> <div class="com1"> 11 <div class="com2"> 小川に敷き詰められた石です幾何学模様の美しさに思わずカメラを向けました <br> 石が並んでいるなとしか見ていなかったものが突然美しいものに見えた喜びがありました <div class="image-container cntnr12" id="image2c"> <div class="imagea" id="image2ca"> <img src="images/dsc00189l.jpg" alt="picturec"> <div class="num1">12 <div class="imageb" id="image2cb"> <img src="images/dsc00189l.jpg" alt="picturec"> <div class="com1"> 12 <div class="com2"> 鯉のぼりが我先にと天に登ろうとしています現代社会の縮図です <br> 我先に登ろうはいいことですがほかの鯉を蹴落して先に登ろうというのはいただけません </body> </html> CSS の記述 (SlidePhotoGallery.css) #stage ステージのスタイルを指定します width は 700px height は 300px で指定します背景色を background-color: #000000;( 黒色 ) で指定します 17

18 #stage { width: 700px; height: 440px; background-color: #000000; position: relative; #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 "MS Pゴシック ", 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 ); と指定してテキスト文字の周りを黒い影でぼかします #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 "MS P ゴシック ", 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 ); 18

19 #carouselarea 要素のスタイルを指定します position は absolute 位置は top: 0px; left: 2px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 696px height は 450px と指定しますこのボックスの中に画像のカルーセルと拡大画像が表示されますカルーセルの画像と拡大画像が #carouselarea ボックスの外にはみ出るので overflow: hidden; と指定してはみ出る部分を見えないようにします #carouselarea { top: 0px; left: 2px; width: 696px; height: 450px; position: absolute; overflow: hidden;.num1 要素 ( カルーセルの画像の下の画像番号 ) のスタイルを指定します position は absolute 位置は top: 62px; left: 30px;(.imageA ボックスの左上端を起点とした位置 ) で指定します width は 15px height は 10px と指定します text-align: center; でテキストを左右中央配置にしますテキストのフォントを font: 10px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: lightgray;( 薄い灰色 ) で指定します.num1 { top: 62px; left: 30px; width: 15px; height: 10px; position: absolute; text-align: center; font: 10px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: lightgray;.com1 要素 ( 拡大画像の左側の画像番号 ) のスタイルを指定します position は absolute 位置は top: 0px; left: -145px;(.imageB ボックスの左上端を起点とした位置 ) で指定します width は 135px height は 40px と指定します text-align: center; でテキストを左右中央配置にしますテキストのフォントを font: bold 24px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: lightgray;( 薄い灰色 ) で指定します 19

20 .com1 { top: 0px; left: -145px; width: 135px; height: 40px; position: absolute; text-align: center; font: bold 24px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: lightgray;.com2 要素 ( 拡大画像の右側のコメントのテキスト ) のスタイルを指定します position は absolute 位置は top: 0px; left: 420px;(.imageB ボックスの左上端を起点とした位置 ) で指定します width は 120px height は 300px と指定します text-align: center; でテキストを左右中央配置にしますテキストのフォントを font: 14px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; テキストの色を color: lightgray;( 薄い灰色 ) で指定します.com2 { top: 0px; left: 420px; width: 120px; height: 300px; position: absolute; text-align: left; font: 14px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: lightgray; 画像が各 div 要素のサイズに合うようにつぎのように指定します #stage img { width: 100%; height: 100%; 20

21 Slide Photo Gallery の仕組み画像のカルーセルについて #slide1 #slide1 #slide2 上の図のように 12 枚の画像 (.imagea) を順番に左方向へ動かしますが 12 番目の画像を表示した後は画像が表示されなくなってしまいますそのため下の図のように 12 枚の画像の組を2つ用意して 1 組目 (#slide1) の表示の後に2 組目 (#slide2) を続けて表示しますそして2 組目の表示の後には1 組目を表示して繰り返すと永久に画像が回るカルーセルができ上がります拡大画像の表示について拡大画像 (.imageb) #image11b から #image2cb の 12 枚の画像が重なっている実は拡大画像 (.imageb) は #carouselarea ボックス ( 上の図の黒いボックス ) の下に 12 枚の画像が重なって隠れていますカルーセルの画像 (.imagea) と拡大画像 (.imageb) は.image-container 要素を親とする子供要素ですそこで.image-container 要素の領域 ( つまりカルーセルの画像の領域と拡 21

大画像の領域 ) が hover されたことをトリガー ( きっかけ ) としてカルーセルの画像や拡大画像に変化を起こさせることができます拡大画像 (.imageb) は #carouselarea ボックス ( 上の図の黒いボックス ) の外に隠れているのでカルーセルの画像 (.imagea) を hover することが.

22 大画像の領域 ) が hover されたことをトリガー ( きっかけ ) としてカルーセルの画像や拡大画像に変化を起こさせることができます拡大画像 (.imageb) は #carouselarea ボックス ( 上の図の黒いボックス ) の外に隠れているのでカルーセルの画像 (.imagea) を hover することが.image-container 要素を hover することになりますですからカルーセルの画像 (.imagea) が hover されたらそれをきっかけとして拡大画像 (.imageb) を top: 80px; から top: -340px; へ変化させて #carouselarea ボックス ( 上の図の黒いボックス ) の領域へ引き上げ opacity: 0.0; から opacity: 1.0; へ変化させて拡大画像 (.imageb) を見えるようにします top: -340px; top: 0px; top: 80px; 拡大画像 (.imageb) #image11b から #image2cb の 12 枚の画像が重なっている拡大画像の位置の固定について上記の説明でカルーセルの画像が回転する仕組みと拡大画像が表示される仕組みは分かりましたしかし1つ大きな問題があります #slide1 および #slide2 を左方向へ動かすとその子供要素である.image-container 要素が一緒に動きますそのときカルーセルの画像 (.imagea) と拡大画像 (.imageb) も同時に動きますカルーセルの画像 (.imagea) は動いて良いのですが拡大画像 (.imageb) は上の図のように位置を固定しておかなければなりませんそのためにはつぎのような裏ワザを使う必要があります 22

左方向へ 1044px(left: -1044px; まで ) を移動します left: 46px; left: -41px; left: 133px; left: -128px; left: -215px; 右方向へ 1044px(left: 1044+left の値 px まで ) を移動させます例えば上の図のように #slide1 要素の場合左方向へ 1044px(left:

23 左方向へ 1044px(left: -1044px; まで ) を移動します left: 46px; left: -41px; left: 133px; left: -128px; left: -215px; 右方向へ 1044px(left: 1044+left の値 px まで ) を移動させます例えば上の図のように #slide1 要素の場合左方向へ 1044px(left: -1044px; まで ) を移動しますカルーセルの画像 (.imagea) の中の1 番目の画像 #image11a を見た場合画像 #image11a は #slide1 要素と共に左方向へ移動し画像 #image11a の兄弟要素である拡大画像 #image11b も左方向へ移動してしまいます拡大画像 (.imageb) の1 番目の画像 #image11b の位置を固定するためには画像 #image11a とは逆の右方向へ移動させます上の図のようにそれぞれの拡大画像 (.imageb) はカルーセルの画像 (.imagea) と距離が異なり初期値の ( 静止状態時の )left プロパティの値が異なりますそれぞれの拡大画像 (.imageb) を上の図のように位置を固定しておくためには右方向へ 1044px(left: 1044+left の値 px; まで ) 移動させます #slide1 要素 (1 組目のカルーセルの画像の全体 ) のスタイルを指定します position は absolute 位置は top: 360px; left: 0px;(#carouselArea ボックスの左上端を起点とした位置 ) で指定します width は 1044px height は 100px で指定しますアニメーション名を slide1anime 実行時間を 60s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します 23

24 /********************************************************************** * 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; アニメーション名 slide1anime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に left: 0px; から left: -1044px; まで移動させますアニメーション slide1anime の繰り返しが infinite で指定されているので slide1anime { 0% { 100% { left: slide1anime { 0% { 100% { left: -1044px; #slide2 要素 (2 組目のカルーセルの画像の全体 ) のスタイルを指定します position は absolute 位置は top: 360px; left: 1044px;(#carouselArea ボックスの左上端を起点とした位置 ) で指定します width は 1044px height は 100px で指定しますアニメーション名を slide2anime 実行時間を 60s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /********************************************************************** * 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; 24

25 アニメーション名 slide2anime に対応するタイムラインを指定します 0% から 100% の間に left: 1044px; から left: 0px; まで移動させますアニメーション slide2anime の繰り返しが infinite で指定されているので slide2anime { 0% { 100% { left: slide2anime { 0% { 100% { left: 0px;.image-container 要素のスタイルを指定しますこのスタイルは #slide1 要素と #slide2 要素のそれぞれの.image-container 要素 ( カルーセルの画像や拡大画像などの親ボックス ) の共通スタイルになります position は absolute 位置は top: 0px;(#slide1 ボックスまたは #slide2 ボックスの左上端を起点とした位置 ) で指定します left プロパティの値はそれぞれの.image-container ごとに指定します width と height は指定しないので大きさゼロのボックスになりカルーセルの画像や拡大画像などの起点になります /********************************************************************** * image-container * **********************************************************************/.image-container { top: 0px; position: absolute;.image-container 要素の left プロパティの値を指定しますそれぞれの.image-container 要素ごとに指定するのでそれぞれの.image-container 要素に追加してある class 属性名で指定します.cntnr01 { left: 5px;.cntnr02 { left: 92px;.cntnr03 { left: 179px; 25

26 .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 要素 ( カルーセルの画像 ) のスタイルを指定しますこのスタイルはそれぞれの.imageA 要素の共通スタイルになります position は absolute 位置は top: 0px; left: 0px;(.image-container ボックスの左上端を起点とした位置 ) で指定します width は 77px height は 58px で指定しますボーダーを border: solid 1px gray;( 灰色 ) で指定します /*.imagea (carousel images ) **********************************/.imagea { top: 0px; left: 0px; width: 77px; height: 58px; border: solid 1px gray; position: absolute;.imageb 要素 ( 拡大画像 ) のスタイルを指定しますこのスタイルはそれぞれの.imageB 要素の共通スタイルになります position は absolute 位置は top: 80px;(.image-container ボックスの左上端を起点とした位置 ) で指定します left プロパティの値はそれぞれの拡大画像 (.imageb) がカルーセルの画像 (.imagea) と距離が異なるのでそれぞれの.imageB 26

27 要素ごとに指定します width は 400px height は 300px で指定しますボーダーを border: solid 10px white;( 白色 10px) で指定します初めは見えないように opacity: 0.0; を指定しますカルーセルの画像 (.imagea) を hover した時に拡大画像 (.imageb) を表示する際に 1 秒間で徐々に見えるように transition: opacity 1s ease-in-out, top 0s; と指定しておきます /*.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; カルーセルの画像 (.imagea) を hover した時の拡大画像 (.imageb) の変化を指定します top: 80px; から top: -340px; に変化させ #carouselarea ボックスに移動させます opacity: 0.0; から opacity: 1.0; に変化させ見えるようにしますトランジション transition: opacity 1s ease-in-out; で指定されているので 1 秒間で徐々に見えるようになります /********************************************************************** * when image-container (=imagea) is hovered --> change imageb * **********************************************************************/.image-container:hover.imageb { top: -340px; opacity: 1.0; これ以降は #slide1 要素と #slide2 要素のそれぞれの.image-container 要素に含まれる拡大画像の共通スタイルを指定しますそれぞれの拡大画像 (.imageb) はカルーセルの画像 (.imagea) と距離 ( つまりそれぞれの.image-container 要素の起点との距離 ) が異なり初期値の ( 静止状態時の )left プロパティの値が異なりますそれぞれの拡大画像 (.imageb) を上の図のように位置を固定しておくためには右方向へ 1044px(left: 1044+left の値 px; まで ) 移動させます 27

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 image11anime { 0% { 100% { left: image11anime { 0% { 100% { left: 1177px; #image12b { left: 46px; animation: image12anime 60s linear 0s infinite normal; -webkit-animation: image12anime 60s linear 0s infinite image12anime { 0% { 100% { left: image12anime { 0% { 100% { left: 1090px; #image13b { left: -41px; animation: image13anime 60s linear 0s infinite normal; -webkit-animation: image13anime 60s linear 0s infinite image13anime { 0% { 100% { left: image13anime { 0% { 100% { left: 1003px; #image14b { left: -128px; animation: image14anime 60s linear 0s infinite normal; -webkit-animation: image14anime 60s linear 0s infinite normal; 28

29 @keyframes image14anime { 0% { 100% { left: image14anime { 0% { 100% { left: 916px; #image15b { left: -215px; animation: image15anime 60s linear 0s infinite normal; -webkit-animation: image15anime 60s linear 0s infinite image15anime { 0% { 100% { left: image15anime { 0% { 100% { left: 829px; #image16b { left: -302px; animation: image16anime 60s linear 0s infinite normal; -webkit-animation: image16anime 60s linear 0s infinite image16anime { 0% { 100% { left: image16anime { 0% { 100% { left: 742px; #image17b { left: -389px; animation: image17anime 60s linear 0s infinite normal; -webkit-animation: image17anime 60s linear 0s infinite image17anime { 0% { 100% { left: image17anime { 0% { 100% { left: 655px; 29

30 #image18b { left: -476px; animation: image18anime 60s linear 0s infinite normal; -webkit-animation: image18anime 60s linear 0s infinite image18anime { 0% { 100% { left: image18anime { 0% { 100% { left: 568px; #image19b { left: -563px; animation: image19anime 60s linear 0s infinite normal; -webkit-animation: image19anime 60s linear 0s infinite image19anime { 0% { 100% { left: image19anime { 0% { 100% { left: 481px; #image1ab { left: -650px; animation: image1aanime 60s linear 0s infinite normal; -webkit-animation: image1aanime 60s linear 0s infinite image1aanime { 0% { 100% { left: image1aanime { 0% { 100% { left: 394px; #image1bb { left: -737px; animation: image1banime 60s linear 0s infinite normal; -webkit-animation: image1banime 60s linear 0s infinite image1banime { 0% { 100% { left: 307px; 30

31 @-webkit-keyframes image1banime { 0% { 100% { left: 307px; #image1cb { left: -824px; animation: image1canime 60s linear 0s infinite normal; -webkit-animation: image1canime 60s linear 0s infinite image1canime { 0% { 100% { left: image1canime { 0% { 100% { left: 220px; /********************************************************************** * Slide2 backward (to keep static location of imageb) * **********************************************************************/ #image21b { left: -911px; animation: image21anime 60s linear 0s infinite normal; -webkit-animation: image21anime 60s linear 0s infinite image21anime { 0% { 100% { left: image21anime { 0% { 100% { left: 133px; #image22b { left: -998px; animation: image22anime 60s linear 0s infinite normal; -webkit-animation: image22anime 60s linear 0s infinite image22anime { 0% { 100% { left: image22anime { 0% { 100% { left: 46px; 31

32 #image23b { left: -1085px; animation: image23anime 60s linear 0s infinite normal; -webkit-animation: image23anime 60s linear 0s infinite image23anime { 0% { 100% { left: image23anime { 0% { 100% { left: -41px; #image24b { left: -1172px; animation: image24anime 60s linear 0s infinite normal; -webkit-animation: image24anime 60s linear 0s infinite image24anime { 0% { 100% { left: image24anime { 0% { 100% { left: -128px; #image25b { left: -1259px; animation: image25anime 60s linear 0s infinite normal; -webkit-animation: image25anime 60s linear 0s infinite image25anime { 0% { 100% { left: image25anime { 0% { 100% { left: -215px; #image26b { left: -1346px; animation: image26anime 60s linear 0s infinite normal; -webkit-animation: image26anime 60s linear 0s infinite image26anime { 0% { 100% { left: -302px; 32

33 @-webkit-keyframes image26anime { 0% { 100% { left: -302px; #image27b { left: -1433px; animation: image27anime 60s linear 0s infinite normal; -webkit-animation: image27anime 60s linear 0s infinite image27anime { 0% { 100% { left: image27anime { 0% { 100% { left: -389px; #image28b { left: -1520px; animation: image28anime 60s linear 0s infinite normal; -webkit-animation: image28anime 60s linear 0s infinite image28anime { 0% { 100% { left: image28anime { 0% { 100% { left: -476px; #image29b { left: -1607px; animation: image29anime 60s linear 0s infinite normal; -webkit-animation: image29anime 60s linear 0s infinite image29anime { 0% { 100% { left: image29anime { 0% { 100% { left: -563px; #image2ab { left: -1694px; animation: image2aanime 60s linear 0s infinite normal; -webkit-animation: image2aanime 60s linear 0s infinite normal; 33

34 @keyframes image2aanime { 0% { 100% { left: image2aanime { 0% { 100% { left: -650px; #image2bb { left: -1781px; animation: image2banime 60s linear 0s infinite normal; -webkit-animation: image2banime 60s linear 0s infinite image2banime { 0% { 100% { left: image2banime { 0% { 100% { left: -737px; #image2cb { left: -1868px; animation: image2canime 60s linear 0s infinite normal; -webkit-animation: image2canime 60s linear 0s infinite image2canime { 0% { 100% { left: image2canime { 0% { 100% { left: -824px; 34

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーションサンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し