サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

Size: px
Start display at page:

Download "サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT"

Transcription

1 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値 ) とタイムライン (@keyframes) の名称を同じにする必要があります この仕様を応用して 上記のトリガーによりアニメーション名 (animation-name プロパティの値 ) にタイムライン (@keyframes) の名称をセットすることでアニメーションを開始させます web ページが表示されるのと同時に開始させる方法 animation を web ページが表示されるのと同時に開始させる方法は通常の指定方法で もっとも頻繁に使用されます アニメーション名 (animation-name プロパティの値 ) とタイムライン (@keyframes) の名称を同じにしておくことでアニメーションが自動的に開始されます ( ここでは animation の指定は animation ショートハンドプロパティで指定しています ) HTML の記述 <img id="image1" src="images/animeimage.png"> CSS の記述 #image1 { animation anime1 5s ease-in-out 0s infinite alternate; -webkit-animation: anime1 5s ease-in-out 0s infinite anime1 { 0% { 100% { transform: anime1 { 0% { 100% { -webkit-transform: translatex(480px); 1

2 サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animeauto</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animeauto.css"> </head> <body> <p> Animation のトリガー ( 自動 ) </p> <div id="stage"> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </body> </html> CSS の記述 (AnimeAuto.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーシ 2

3 ョンは animation ショートハンドプロパティで指定しています #pierrot 画像については アニメーション名を pierrotanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate ( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 20px; left: 15px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; animation: pierrotanime 5s ease-in-out 0s infinite alternate; -webkit-animation: pierrotanime 5s ease-in-out 0s infinite pierrotanime { 0% { 100% { transform: pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については アニメーション名を ballanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 132px; left: 12px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 132px; left: 12px; width: 100px; height: 100px; animation: ballanime 5s ease-in-out 0s infinite alternate; -webkit-animation: ballanime 5s ease-in-out 0s infinite alternate; 3

4 @keyframes ballanime { 0% { 100% { transform: translatex(480px) ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); マウスでクリック (click) して開始させる方法 マウスのクリックをトリガーとしてアニメーションを開始させることができます ここで は web ページに表示されたボタンをクリックするとアニメーションが動くようにします HTML の記述 id 属性で id 名 button を付けた div 要素には ボックスをマウスでクリックしたときにアニメーションが始まるように <div> タグに onclick="classname='startanime'" と記述します ( ここではクラス名 (classname) を 'startanime' と指定しています ) onclick=" classname=' startanime ' '' onclick は クリックした時 という意味で この後に =" " で クリックした時に実行する内容を記述します classname はクラス名の意味で この後に =' ' で 実際のクラス名を記述します " は onclick で使っているので ' を使います CSS に記述するクラス名 startanime を記述します ここだけ JavaScript を使用しています onclick の場合はマウスのクリックがトリガーとして1 回だけ機能します 2 回目以降のクリックは無効になります web ページが再読み込みされて表示されると再度マウスのクリックがトリガーとして有効になります <div id="button" onclick="classname='startaanime'">click <img id="image1" src="images/animeimage.png"> </div> 4

5 CSS の記述 #button の div 要素は 通常の指定をします #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; #image1 画像には animation-name プロパティの値を指定しません animation-name プロ パティの値がなければ アニメーションは実行されません タイムライン (@keyframes) の名称は anime1 と指定しておきます #image1 { animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite anime1 { 0% { 100% { transform: anime1 { 0% { 100% { -webkit-transform: translatex(480px); #button 要素がクリックされたときの動作を指定します #button の後に class セレクタ. +class 名.startAnime をスペースを空けずに続けて記述します その後にスペースを空けて #image1 を指定します 動作内容は #image1 画像の animation-name プロパティの値を anime1 に指定しています #button.startanime #image1 { animation-name: anime1; -webkit-animation-name: anime1; これによって #button 要素がクリックされると #image1 画像の animation プロパティの 指定に animation-name の値として anime1 が与えられて アニメーションが開始されます 5

6 onclick の代わりに 変化させる要素の上にマウスカーソルを乗せたとき (mouseover) 変 化させる要素の上でマウスボタンを押したとき (mousedown) 変化させる要素の上でマウ スボタンを上げたとき (mouseup) を使用することもできます サンプル CSS ボタンをクリックするとピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeTrigger1 の説明 HTML の記述 (AnimeTrigger1.html) div 要素に button という id を付けて onclick="classname='startamine'" を記述し 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger1.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="button" onclick="classname='startamine'"><font class="font1">click</font> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </div> </body> </html> CSS の記述 (AnimeTrigger1.css) ピエロの玉乗りアニメーションが動くステージを指定します 6

7 #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; クリックするボタン #button を指定します 位置は top: 10px; left: 460px;(#stage 要素 の左上端を基準とする位置 ) で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーションは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite pierrotanime { 0% { 100% { transform: translatex(480px); 7

8 @-webkit-keyframes pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite ballanime { 0% { 100% { transform: translatex(480px) ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素がクリックされたときのボタンの変化を指定します #button 要素とテキスト を透明にして見えないようにしています #button.startamine { border: solid 1px rgba( 0, 0, 0, 0 ); background-color: rgba( 0, 0, 0, 0 ); #button.startamine.font1 { color: rgba( 0, 0, 0, 0 ); 8

9 #button 要素がクリックされたときの #pierrot 画像と #ball 画像の変化を指定します 内容 は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像 の animation-name プロパティの値を ballanime に指定しています #button.startamine #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #button.startamine #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 最後にテキストのフォントを指定しています.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; マウスカーソルを乗せている (hover) 間だけ動かす方法 マウスカーソルを乗せている間だけをアニメーションを動かすことができます ここでは web ページに表示されたボタンを hover している間だけアニメーションが動くようにします HTML の記述 id 属性で id 名 button を付けた div 要素は ボックスの上にマウスを乗せている (hover) 間だけアニメーションが動くようにするので CSS の方に #button:hover の記述だけあれば HTML の <div> タグには id 名以外の記述は必要ありません hover の場合はマウスカーソルが乗るとトリガーとして機能します マウスカーソルが乗っている間はアニメーションが動きますが マウスカーソルが外れると元に戻ります <div id="button">hover <img id="image1" src="images/animeimage.png"> </div> 9

10 CSS の記述 #button の div 要素は 通常の指定をします #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; #image1 画像には animation-name プロパティの値を指定しません animation-name プロ パティの値がなければ アニメーションは実行されません タイムライン (@keyframes) の名称は anime1 と指定しておきます #image1 { animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite anime1 { 0% { 100% { transform: anime1 { 0% { 100% { -webkit-transform: translatex(480px); #button 要素にマウスカーソルが乗っているときの動作を指定します #button の後に擬似クラス :hover をスペースを空けずに続けて記述します その後にスペースを空けて #image1 を指定します 動作内容は #image1 画像の animation-name プロパティの値を anime1 に指定しています #button:hover #image1 { animation-name: anime1; -webkit-animation-name: anime1; これによって #button 要素にマウスカーソルが乗ると #image1 画像の animation プロパ 10

11 ティの指定に animation-name の値として anime1 が与えられ アニメーションが開始され ます サンプル CSS ボタンを hover するとピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeTrigger3 の説明 HTML の記述 (AnimeTrigger3.html) div 要素に button という id を付けて 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger3</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger3.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="button"><font class="font1">hover</font> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </div> </body> </html> CSS の記述 (AnimeTrigger3.css) ピエロの玉乗りアニメーションが動くステージを指定します 11

12 #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; hover するボタン #button を指定します 位置は top: 10px; left: 460px;(#stage 要素の 左上端を基準とする位置 ) で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーションは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite pierrotanime { 0% { 12

13 100% { transform: pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite ballanime { 0% { 100% { transform: translatex(480px) ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素が hover されたときのボタンの変化を指定します #button 要素とテキストを 半透明にして薄く見えるようにしています #button:hover { border: solid 1px rgba( 0, 0, 0, 0.1 ); background-color: rgba( 255, 0, 0, 0.1 ); #button:hover.font1 { color: rgba( 0, 0, 0, 0.1 ); 13

14 #button 要素が hover されたときの #pierrot 画像と #ball 画像の変化を指定します 内容は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像の animation-name プロパティの値を ballanime に指定しています #button.startamine #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #button.startamine #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 最後にテキストのフォントを指定しています.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 14

15 animation-play-state プロパティを使用してアニメーションを動かす アニメーション名 (animation-name プロパティの値 ) のセットによりアニメーションを開始する方法以外に animation-play-state プロパティの値を paused から running に変更することによってアニメーションを開始することもできます hover と併せて使用すると アニメーションを途中で休止させたりすることができます サンプル CSS animation-play-state プロパティを使用してアニメーションを動かしてみましょう マウ スカーソルをボタンに乗せている (hover) 間はアニメーションが動き マウスカーソルを ボタンから外すとアニメーションが途中で休止します AnimeTrigger5 の説明 HTML の記述 (AnimeTrigger5.html) div 要素に button という id を付けて 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger5</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger5.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="button"><font class="font1">hover</font> 15

16 <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </div> </body> </html> CSS の記述 (AnimeTrigger5.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; hover するボタン #button を指定します 位置は top: 10px; left: 460px;(#stage 要素の 左上端を基準とする位置 ) で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーシ ョンは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基 準とする位置 ) で指定します animation ショートハンドプロパティの指定については ア ニメーション名を pierrotanime 実行時間を 5s イージングは ease-in-out 開始待ち時 間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します animation-play-state プロパティは animation-play-state: paused; と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画 像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を 16

17 使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 10px; left: -445px; width: 88px; height: 117px; animation: pierrotanime 5s ease-in-out 0s infinite alternate; -webkit-animation: pierrotanime 5s ease-in-out 0s infinite alternate; animation-play-state: paused; -webkit-animation-play-state: pierrotanime { 0% { 100% { transform: pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を ballanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します animation-play-state プロパティは animation-play-state: paused; と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: 100px; animation: ballanime 5s ease-in-out 0s infinite alternate; -webkit-animation: ballanime 5s ease-in-out 0s infinite alternate; animation-play-state: paused; -webkit-animation-play-state: ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); 17

18 @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素が hover されたときのボタンの変化を指定します #button 要素とテキストを 半透明にして薄く見えるようにしています #button:hover { border: solid 1px rgba( 0, 0, 0, 0.1 ); background-color: rgba( 255, 0, 0, 0.1 ); #button:hover.font1 { color: rgba( 0, 0, 0, 0.1 ); #button 要素が hover されたときの #pierrot 画像と #ball 画像の変化を指定します 内容は #pierrot 画像の animation-play-state プロパティの値を running に指定し #ball 画像の animation-play-state プロパティの値を running に指定しています #button:hover #pierrot { animation-play-state: running; -webkit-animation-play-state: running; #button:hover #ball { animation-play-state: running; -webkit-animation-play-state: running; 最後にテキストのフォントを指定しています.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 18

19 animation プロパティ全体を付加してアニメーションを動かす アニメーション名 (animation-name プロパティの値 ) のセットによる方法 animationplay-state プロパティの値を paused から running に変更する方法以外に 要素に animation プロパティ全体を付加することによってアニメーションを開始することもできます サンプル CSS animation プロパティ全体を付加してアニメーションを動かしてみましょう AnimeTrigger6 の説明 HTML の記述 (AnimeTrigger6.html) AnimeTrigger1.html の次の部分だけを変更した内容です <title> AnimeTrigger6</title> href=" AnimeTrigger6.css" div 要素に button という id を付けて onclick="classname='startamine'" を記述し 内容としてテキスト click ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます CSS の記述 (AnimeTrigger6.css) ピエロの玉乗りアニメーションが動くステージ #stage を指定します (AnimeTrigger1.css と同じです ) クリックするボタン #button を指定します (AnimeTrigger1.css と同じです ) ピエロの画像と玉の画像には animation プロパティの指定をしません #pierrot 画像については 位置を top: 10px; left: -445px;(#button 要素の左上端を基準とする位置 ) で指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 10px; left: -445px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります 19

20 #pierrot { top: 10px; left: -445px; width: 88px; height: pierrotanime { 0% { 100% { transform: pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 122px; left: -448px;(#button 要素の左上端を基準とする位置 ) で指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 122px; left: -448px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 122px; left: -448px; width: 100px; height: ballanime { 0% { 100% { transform: translatex(480px) ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #button 要素がクリックされたときのボタンの変化を指定します (AnimeTrigger1.css と 同じです ) #button 要素がクリックされたときの #pierrot 画像と #ball 画像の変化を指定します 内容 は #pierrot 画像に animation ショートハンドプロパティ全体を指定し アニメーション名 を pierrotanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返 しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します #ball 画像に animation ショートハンドプロパティ全体を指定し アニメーション名を 20

21 ballanime 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します #button.startamine #pierrot { animation: pierrotanime 5s ease-in-out 0s infinite alternate; -webkit-animation: pierrotanime 5s ease-in-out 0s infinite alternate; #button.startamine #ball { animation: ballanime 5s ease-in-out 0s infinite alternate; -webkit-animation: ballanime 5s ease-in-out 0s infinite alternate; 最後にテキストのフォントを指定しています (AnimeTrigger1.css と同じです ) 参考 : 背景をクリックまたは hover してアニメーションを動かす アニメーションを開始する方法としてボタンのクリックまたは hover を紹介してきました が ボタンではなく背景をクリックまたは hover して開始する方法を紹介します サンプル CSS 背景をクリックしてアニメーションを動かしてみましょう AnimeTrigger2 の説明 HTML の記述 (AnimeTrigger2.html) id が stage の div 要素に onclick="classname='startamine'" を記述し 内容として guide という id 名を付けてテキスト Click を内容とする div 要素 ピエロの画像 玉 の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball とい う id を付けておきます 21

22 <!DOCTYPE html> <html> <head> <title>animetrigger2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger2.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage" onclick="classname='startamine'"> <div id="guide">click</div> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </body> </html> CSS の記述 (AnimeTrigger2.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; Click というガイドテキストを指定します #guide { top: 50px; left: 50px; width: 500px; height: 150px; text-align: center; color: lightgray; font: bold 160px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 150px; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーシ ョンは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 20px; left: 15px;(#stage 要素の左上端を基準と する位置 ) で指定します animation ショートハンドプロパティの指定については アニメ 22

23 ーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 20px; left: 15px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite pierrotanime { 0% { 100% { transform: pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 132px; left: 12px;(#stage 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 ballanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 132px; left: 12px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 132px; left: 12px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite ballanime { 0% { 100% { transform: translatex(480px) rotatez(720deg); 23

24 @-webkit-keyframes ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #stage 要素がクリックされたときの変化を指定します #guide 要素のテキストを透明にし て見えないようにしています #stage.startamine #guide { color: rgba( 0, 0, 0, 0 ); #stage 要素がクリックされたときの #pierrot 画像と #ball 画像の変化を指定します 内容 は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像 の animation-name プロパティの値を ballanime に指定しています #stage.startamine #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #stage.startamine #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 24

25 サンプル CSS 背景を hover してアニメーションを動かしてみましょう AnimeTrigger4 の説明 HTML の記述 (AnimeTrigger4.html) id が stage の div 要素には何も記述せず 内容として guide という id 名を付けてテキスト Hover を内容とする div 要素 ピエロの画像 玉の画像を記述します ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCTYPE html> <html> <head> <title>animetrigger4</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="animetrigger4.css"> </head> <body> <p> Animation のトリガー </p> <div id="stage"> <div id="guide">hover</div> <img id="pierrot" src="images/pierrot.png" alt="pierrot"> <img id="ball" src="images/colorwheel.png" alt="color Wheel"> </div> </body> </html> CSS の記述 (AnimeTrigger4.css) ピエロの玉乗りアニメーションが動くステージを指定します #stage { width: 600px; height: 250px; background-color: #FFFFFF; border: solid 1px #000000; position: relative; Hover というガイドテキストを指定します 25

26 #guide { top: 50px; left: 50px; width: 500px; height: 150px; text-align: center; color: lightgray; font: bold 160px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 150px; cursor: default; ピエロの画像と玉の画像は それぞれ別のアニメーションとして指定します アニメーションは animation ショートハンドプロパティで指定しています #pierrot 画像については 位置を top: 20px; left: 15px;(#stage 要素の左上端を基準とする位置 ) で指定します animation ショートハンドプロパティの指定については アニメーション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します アニメーション名 pierrotanime に対応するタイムライン (@keyframes) を指定します 画像の位置を top: 20px; left: 15px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させます 復路はこの逆の動きになります #pierrot { top: 20px; left: 15px; width: 88px; height: 117px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite pierrotanime { 0% { 100% { transform: pierrotanime { 0% { 100% { -webkit-transform: translatex(480px); #ball 画像については 位置を top: 132px; left: 12px;(#stage 要素の左上端を基準とす る位置 ) で指定します animation ショートハンドプロパティの指定については アニメー ション名を指定しないで 実行時間を 5s イージングは ease-in-out 開始待ち時間は 0s 繰り返しは infinite( 永久 ) 実行方向は alternate( 往復 ) と指定します 26

27 アニメーション名 ballanime に対応するタイムライン を指定します 画像の位置を top: 132px; left: 12px; から transform プロパティの translatex( ) 関数を使用して X 方向へ 480px 移動させながら rotatez( ) 関数で時計回りに 720 度回転 (2 回転 ) させます 復路はこの逆の動きになります #ball { top: 132px; left: 12px; width: 100px; height: 100px; animation: 5s ease-in-out 0s infinite alternate; -webkit-animation: 5s ease-in-out 0s infinite ballanime { 0% { 100% { transform: translatex(480px) ballanime { 0% { 100% { -webkit-transform: translatex(480px) rotatez(720deg); #stage 要素が hover されたときの変化を指定します #guide 要素のテキストを透明にして 見えないようにしています #stage:hover #guide { color: rgba( 0, 0, 0, 0 ); #stage 要素が hover されたときの #pierrot 画像と #ball 画像の変化を指定します 内容は #pierrot 画像の animation-name プロパティの値を pierrotanime に指定し #ball 画像の animation-name プロパティの値を ballanime に指定しています #stage:hover #pierrot { animation-name: pierrotanime; -webkit-animation-name: pierrotanime; #stage:hover #ball { animation-name: ballanime; -webkit-animation-name: ballanime; 27

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する) 1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します

More information

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2 1343 アニメーションを連続させる 複数のアニメーションを連続して適用するためには つぎの 2 つの方法があります 1. 複数の連続したアニメーション全体を繰り返さずに 1 回だけ動かしたい場合は 待ち 時間を利用して複数のアニメーションを指定します アニメーション A 0% 100% アニメーション B( 待ち ) アニメーション C( 待ち ) アニメーションB 0% 100% アニメーションC

More information

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=clipanime1.css> </head> < 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1

More information

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

More information

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="spaceorbitanime.css">

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=spaceorbitanime.css> 1346-5 応用 2 Space Trip 宇宙船が地球を周回するアニメーションと宇宙旅行へ出発するアニメーションを作ってみ ましょう 宇宙船が地球を周回するアニメーション サンプル CSS1 スペースシャトルは円軌道で USS エンタープライズ号は楕円軌道で地球を周回します SpaceOrbitAnime の説明 HTML の記述 (SpaceOrbitAnime.html) id 属性 stage

More information

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/ 1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので

More information

</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 要素を記述し

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div 1334 テキストのアニメーション animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ ましょう ( 注 )Safari(webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color

More information

Color Change

Color Change 1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

More information

トリガーをわかり易くする方法

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

More information

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

1221 Transitionの指定項目

1221 Transitionの指定項目 1310-5 Animation-direction プロパティ animation-direction animation-direction プロパティには アニメーションのサイクルの全部または一部分を 通常通り実行するか逆回転で実行するかを指定します 値 説 明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像

More information

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt 1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius

More information

をさせる ) ような場合に それぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class="

をさせる ) ような場合に それぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class= 1346-9 応用 2 Class Selector たくさんの要素を一気に動かす魔法の CSS でアニメーションを作ってみましょう 動かす要素がたくさんあって全て同じような動きをするアニメーションの場合には クラ スセレクタを使うと一気に動かすことができます id セレクタと class セレクタ ここで id セレクタと class セレクタの復習をしましょう id セレクタ #id 名 { プロパティ名

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1233 親の組合せで変化をつける 親の基本的な性質 要素 ( ボックス ) を親子にすることによって トランジションやアニメーションの動きにさまざまな変化をつけることができます 基本的には次のような性質を持っています 1 の position プロパティの値が static( または position の指定なし ) 以外の場合 の position プロパティの値に absolute を指定すると

More information

1221 Transitionの指定項目

1221 Transitionの指定項目 1310 Animation の指定項目 (keyframes) CSS3 の animation プロパティを使用してアニメーションを動かすためには @ キーフレー ムルール (@keyframes) の知識が必要です @keyframes は アニメーションの初めから終 わりまでの間のさまざまなポイントでのプロパティの値を指定して アニメーションを変 化させることができます @keyframes

More information

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J 1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています

More information

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

images/dsc00092s.jpg images/dsc00131s.jpg images/dsc00149s.jpg images/dsc00203s.jpg <!DOCTYPE html> <html> <head> <title>roundphotogallery</title> <me 1346-8 応用 2 Photo Gallery 画像のカルーセルを利用してフォトギャラリーを 2 つ作ってみましょう フォトギャラリー 1 サンプル CSS1 回転の中心から距離を置いて放射状に広がった画像のカルーセルを利用してフォトギャラ リーを作ってみましょう hover すると画像が拡大表示されます RoundPhotoGallery の説明 HTML の記述 (RoundPhotoGallery.html)

More information

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです

More information

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

More information

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11 CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

Moshimo Challenge Report

Moshimo Challenge Report このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー

More information

Web09

Web09 情報処理技法 ( マルチメディアと表現 )I 第 9 回 CSS(1) D.Mitsuhashi 1 HTML と CSS D.Mitsuhashi 2 HTML と CSS の役割 HTML 書の構造を すための 語 CSS 書に視覚デザインを与える 語 HTML( 構造化 書 ) が 組みとすると, CSS( スタイルシート ) は外装にあたる D.Mitsuhashi 3 HTML に CSS

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS

More information

■新聞記事

■新聞記事 情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

超簡単にWebページを作成

超簡単にWebページを作成 Lesson を始める前に どんなプログラマーもこれを実践しました 超簡単に Web ページを作成 この解説書は Lesson が高レベルになっても参照用として利用して下さい この章の実践方法はまず解説ページ内にある HTML ソースコードをコピーして メモ帳などに貼り付けて 実行して 表示してそのあとで表示内容を解説します 最初は全然理解できない方でも 同じ HTML コードを繰り返し 繰り返 し実践する事で

More information

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

More information

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4. http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content: 記号や文字 ;} css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば

More information

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18 Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111221

More information

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ 1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます (

More information

ch31.dvi

ch31.dvi 1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5

More information

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )

More information

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2 ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 1 演習 2 Z: Web データ管

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 1 演習 2 Z: Web データ管 Web データ管理 HTML+CSS (5) (2 章 ) 2011/11/2( 水 ) 1/30 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111102 演習 1 演習 2 Z: Web データ管理

More information

インターネット社会の発展

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

Microsoft Word - manual.doc

Microsoft Word - manual.doc ヒットメール Ver 1.0 お試し版 URL http://www.sysco-net.com/hitmail/ ライセンス キー販売サイト URL http://www.vector.co.jp/ 価格 1,000 円 ( パソコン1 台当たり ) 本ソフトを動かすには 次のソフトが必要です 1 Microsoft Windows 2000 or XP 2 Microsoft Outlook 2000

More information

ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt(

ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt( 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 HTML+CSS (4) (2 章 ) 2013/5/15( 水 ) 演習名 使用するフォルダ 演習 1 Z: Webプログラミング1 20130515 演習

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション アカデミック認定校 プロフェッショナル認定資格合格者 Lv1: 27 名 Lv2: 5 名 2017 年 6 月現在 https://www.fork.co.jp/ http://4009.jp/ 2 本日解説する主な内容 3 4 HTML4.01 に比べて複雑な処理が容易になり 文書構造をより明確に書けるようになった 動画や音声をシンプルに扱えるようになった 新たな属性が増え フォーム周りの機能が強化された

More information

2

2 CSS ホームページ HTML の作り方 作ったことない人でも大丈夫! 準備から始まる教科書です HTML,CSS の基礎を学べる決定版 見本を見ながら基礎学習 基礎を学んで目指そう Web クリエイター 1 2 基礎から学ぶ Web デザイン vol.1 1 2 はじめに4 拡張子を表示しよう 4 拡張子とは? 4 表示しないと 4 必要なものを用意しよう 5 何で作るか? 5 用意するもの 5

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;

More information

CSS Taichi Kaminogoya 2007-05-26T14:00:00+09:00 design de sign coration デザイン サイン 情報 をデコレーション 装飾 どれが重要なのかのサイン メッセージ CSS CSS CSS CSS デザイン 線や色でサイン 情報をイイトコロに配置 CSS CSS CSS { : ; { : ; { : ; { : ; CSS

More information

extChatText.pdf

extChatText.pdf 拡張機能ユニット チャット風テキストユニット マニュアル シフトテック株式会社 発行 :2018/12/19 チャット風テキストユニット マニュアル - 1 概要 チャットのような会話形式でテキストを表示するユニットです ール ー ア ン ンテ ー 特徴 アイコン用画像 + 名前 + 吹き出し付テキストで構成されたユニットです 表示位置を左右に出し分けることで チャットのような会話形式でテキストを表示できます

More information

PowerPoint Presentation

PowerPoint Presentation 2 3 4 HTML 5 Level.1 Markup Professional HTML 5 Level.2 Application Development Professional 5 6 7 8 9 http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam http://www.pearsonvue.com/japan/registration/

More information

はじめに 本書の目的は 制作の効率化 クオリティの向上 各作業者間のスタイルの統一を 図る目安になることで 常にブラッシュアップを繰り返し 現時点での最適解の共 有に活用するものである 目次 基本仕様 ファイル ディレクトリ構成 画像ファイル 対応ブラウザ 品質管理 (X)HTML 制作 文字コード

はじめに 本書の目的は 制作の効率化 クオリティの向上 各作業者間のスタイルの統一を 図る目安になることで 常にブラッシュアップを繰り返し 現時点での最適解の共 有に活用するものである 目次 基本仕様 ファイル ディレクトリ構成 画像ファイル 対応ブラウザ 品質管理 (X)HTML 制作 文字コード 株式会社アジタス コーディングレギュレーション 改訂履歴 初版 2009/10/01 一部修正 2010/12/06 対応ブラウザ修正 画像ファイルの形式修正 補足追記 2011/05/02 対応ブラウザ修正 2013/04/12 はじめに 本書の目的は 制作の効率化 クオリティの向上 各作業者間のスタイルの統一を 図る目安になることで 常にブラッシュアップを繰り返し 現時点での最適解の共 有に活用するものである

More information

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/ Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

! #$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ

More information

1

1 6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期は ホームページを作成するための HTML の基礎と コンテンツのパーツである画像を加工 作成する基本的な技術を学びました 次のステップとして ホームページに多くの色を統一的に付けたり レイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたが ホームページの保守性などの面から

More information

2004-2006 2004-2006 CSS Web Quiz LOVE PC 2012 4 Windows 8 / CPP Fluid PE CSS3 RWD Quiz 1. 2. 3. 4. 1. 2. 3. 4. CSS3 #btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;!

More information

css.pdf

css.pdf 1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web , , HTML HTML&CSS

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

【お試し版】Web制作者のためのCSS設計の教科書(非売品)

【お試し版】Web制作者のためのCSS設計の教科書(非売品) UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128 Web 10 IT UI

More information

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ [SP 改 ] フォームレイアウトデザイナー FOR SHAREPOINT 2013 ユーザーマニュアル 1.0 版 2014 年 04 月 11 日 株式会社アンク 目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18

More information

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン

More information

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1-

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1- 触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver. 2.0 2001.08.17 富士ゼロックス株式会社 -1- 1 画像全体に触覚テクスチャをつける 画像全体に触覚テクスチャを貼り付けた HTML ファイルのソースを次に示します 画像全体に触覚テクスチャをつける

More information

第2回 Web文書

第2回 Web文書 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 5 回 CSS 入門 萩野達也 (hagino@sfc.keio.ac.jp) 1 Web ページの構成要素 直交技術を組み合わせる 内容 スタイル ( 表現方法 ) プログラミング スタイル プログラミング JavaScript CSS Web ページ Web 文書 HTML 内容

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の課題 Web デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp

More information

extCountdown.pdf

extCountdown.pdf 拡張機能ユニット カウントダウンユニット マニュアルシフトテック株式会社 発行 :2018/11/21 改定 :2018/12/13 カウントダウンユニット マニュアル - 1 概要 指定された日時までカウントダウンを行うユニットです ール ー ア ン ンテ ー 特徴 指定した日時までカウントダウンし 終了後は自動で停止します 任意の URL を設定すると カウント終了後にページにアクセスがあった場合

More information

Microsoft Word - JavaScript基礎講座Web Speech API.docx

Microsoft Word - JavaScript基礎講座Web Speech API.docx 近畿大学工学部 公開講座 2017 年 5 月 20 日 ( 土 ) JavaScript プログラミング基礎講座 制作する Web アプリ : 音声入力 + Wikipedia 検索音声でキーワードを入力し,Wikipedia を検索して, 結果を表示する 徐丙鉄 ( 情報学科 ) スケジュール 1. 開発環境 Brackets のインストール 2.HTML と CSS の復習,CSS アニメーション

More information

コンピュータ基礎実習 ( 上級 ) 第 13 週の例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文

コンピュータ基礎実習 ( 上級 ) 第 13 週の例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文 コンピュータ基礎実習 ( 上級 ) 第 13 週 コンピュータ基礎実習 ( 上級 ) 第 13 週スタイルシートの基礎今回の授業は スタイルシート (CSS) の使い方を解説します 1. CSS の基本 ( 教科書第 3 章 ) 1.1. CSS とは CSS は Cascading Style Sheets の略で ウェブページの見栄えを設定するための言語です CSS はウェブページにとって比較的新しい規格ですが

More information