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

(1)

1225-6 練習６ Overflow The Stage（overflow）

ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょう。 “Hover”ボタンの上をマウスポインター（カーソル）で hover すると、ピエロの玉乗りがステージの外から入って外へ出て行きます。〔動きの仕組み〕このトランジションは、次の３つの動きの組み合わせで動きます。 ① ピエロとボールの横方向の動き・・・left プロパティを ease-in-out で動かすことにより、最初はゆっくりと、そして徐々に速度を増して動き、また徐々に速度を落とし、最後はゆっくりと止まります。 ② ボールの回転・・・transform プロパティで rotateZ 関数を指定することにより、回転させます。ease-in-out で動かすことにより、最初はゆっくりと、そして徐々に回転速度を増して、また徐々に回転速度を落とし、最後はゆっくりと止まります。 ③ ステージからはみ出た部分を隠す・・・ステージに overflow プロパティで hidden を指定することにより、ステージからはみ出た部分を見えなくします。 ■

overflow

ボックスの内容がボックスからはみ出た部分の表示の仕方を指定します。値説　　　　　明 visible はみ出た部分もそのまま表示される。（初期値） hidden はみ出た部分は表示されない。 scroll はみ出た部分はスクロールで見られるようになる。 auto ブラウザが自動処理する（一般的には scroll と同じ）。プロパティ

(2)

overflow プロパティの指定は、親ボックスのスタイルに記述します。overflow プロパティは position プロパティ（position: static;以外）の指定がされていなと適用されません。ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します。【OverflowTheStage の説明】〔HTML の記述（OverflowTheStage.html）〕 id 属性 stage の div 要素（トランジションが動くステージ）を作り、その中にボックスや画像を記述します。

id 属性 button の div 要素を作ります。これがボタン（親ボックス）になります。font1 クラスでフォントを指定し、“Hover”を記述します。

id 属性 pierrot の div 要素（子ボックス）の中に<img>タグで画像要素の記述をします。画像は"images/ Pierrot.png"を指定します。

id 属性 ball の div 要素（子ボックス）の中に<img>タグで画像要素の記述をします。画像は"images/ ColorWheel.png"を指定します。 hover でトランジションが開始されるようにするので、各要素には onClick などの記述はしません。サンプルＣＳＳ <!DOCTYPE html> <html> <head> <title>OverflowTheStage</title> <meta charset="UTF-8">

<body>

<p>■ボタン（親ボックス）を hover して、ピエロの玉乗り（子ボックス）を動かす。<br>ステージの外から入って、ステージの外へ出て行く。</p> <div id="stage">

<div id="button"><font class="font1">Hover</font>

</div> </body> </html>

(3)

〔CSS の記述（OverflowTheStage.css）〕

先ず、トランジションが動く#stage の記述をします。そして、重要な点は overflow: hidden; と指定することです。ピエロの玉乗りがステージの外へ出たときに見えないようにするために overflow プロパティを hidden（隠す）にするのですが、overflow プロパティは position プロパティ（position: static;以外）の指定がされていなと適用されません。

ボタンとなる#button ボックス（親ボックス）を記述します。position は absolute にます。角丸矩形のボタンにしたいので、border-radius プロパティでボックスの４隅の角丸の半径を 10px で指定します。

画像（images/ Pierrot.png）を入れる#pierrot ボックス（子ボックス）を記述します。 position は absolute にして、位置は top 60px とステージボックスの外からスタートするように left –560px（#button ボックスの左上端を基準とした位置）で指定します。 transition の記述をします。left プロパティを 5 秒、ease-in-out でトランジションするように記述します。

#stage {

width: 600px; height: 300px; background-color: midnightblue; border: solid 1px black; position: relative; overflow: hidden; } #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; } #pierrot { top: 60px; left: -560px; width: 88px; height: 117px; position: absolute;

transition: left 5s ease-in-out;

-webkit-transition: left 5s ease-in-out; }

(4)

画像（images/ ColorWheel.png）を入れる#ball ボックス（子ボックス）を記述します。 position は absolute にして、位置は top 172px とステージボックスの外からスタートするように left –565px（#button ボックスの左上端を基準とした位置）で指定します。 transition の記述をします。left プロパティ、transform プロパティを 5 秒、ease-in-out でトランジションするように記述します。

#button ボックス（ボタン）を hover したら、#button ボックスの背景色を green に変化させます。

#button ボックス（ボタン）を hover した時の変化として、#pierrot ボックスに、ステージボックスの外に出るように left プロパティで 150px（#button ボックスの左上端を基準とした位置）へ動かします。

同じように、# button ボックス（ボタン）を hover した時の変化として、#ball ボックスに transform プロパティで rotateZ(720deg) を指定し、時計回りで２回転しながら、ステージボックスの外に出るように left プロパティで 145px（#button ボックスの左上端を基準とした位置）へ動かします。 #ball { top: 172px; left: -565px; width: 100px; height: 100px; position: absolute;

transition: left 5s ease-in-out, transform 5s ease-in-out;

-webkit-transition: left 5s ease-in-out, -webkit-transform 5s ease-in-out; } #ball img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } #button:hover { background-color: green; } #pierrot img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; }

(5)

最後にボタンに表示するテキストのフォントの指定をします。

.font1 { color: black;

font: bold 28px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 50px; } #button:hover div#pierrot { left: 150px; } #button:hover div#ball { left: 145px; transform: rotateZ(720deg); -webkit-transform: rotateZ(720deg); }