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

(1)

© 2016 電脳 Papa 1 1221 トリガーをわかり易くする方法（cursor, border-radius）例えばブラウザにつぎのような画面が表示されていたら、あなたはこの手の画像を何だと思いますか？ほとんどの方が、「ハンドサインじゃないの？」か「右方向を示しているのでしょう？」と思われたのではないでしょうか。実は、私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが、あなたにはそんなことは分かるはずもありません。つぎのように画像をクリックするようにガイダンスを表示してもよいのですが、お洒落ではない感じがしませんか。『手の画像をクリックしてください。』では、つぎのような画面だったらどうでしょうか。赤いボタンを click したくなりませんか？こちらは、親要素（赤いボタン）のトリガー（変化のきっかけ：ここでは click）で、子要素（手の画像）の transition（右方向へ移動する）を開始させるように記述してあります。 transition を開始させるトリガーの方法として分かり易いのではないでしょうか。 hover で transition を開始させる場合も、つぎのような画面にしておけば分かり易いでし

(2)

border-top-left-radius、border-top-right-radius、

border-bottom-left-radius、border-bottom-right-radius

ボックスの４隅の角丸の半径を個別に指定します。値説　　　　　明長さ楕円半径の長さを指定する。（初期値は０）パーセント（%）ボーダーボックスの幅と高さに対する楕円半径の割合をパー_{セント（%）で指定する。} border-top-left-radius プロパティは左上隅、border-top-right-radius プロパティは右上隅、border-bottom-left-radius プロパティは左下隅、border-bottom-right-radius プロパティは右下隅の角丸について指定します。例えば、左上隅の角丸の半径を横径 20px、縦径 10px としたい場合には、 border-top-left-radius: 20px 10px; のように、１つ目の値で横径、２つ目の値で縦径を表します。例えば、縦径と横径が 10px で同じであれば、border-top-left-radius: 10px; のように値の指定は１つでも構いません。 border-radius プロパティを使用すると、４隅の角丸をまとめて指定できます。 ■

border-radius

ボックスの４隅の角丸の半径をまとめて指定します。値説　　　　　明長さ楕円半径の長さを指定する。（初期値は０）パーセント（%）ボーダーボックスの幅と高さに対する楕円半径の割合をパーセント（%）で指定する。 border-radius プロパティの値の記述は、４隅の角丸の横径と４隅の角丸の縦径をスラップロパティ

(3)

© 2016 電脳 Papa 3 シュ「/」で区切り、それぞれ左上から時計回りで記述します。 border-radius: 左上の横径右上の横径右下の横径左下の横径 / 左上の縦径右上の縦径右下の縦径左下の縦径; 例えば、次のように指定します。 border-radius: 80px 30px 30px 20px / 40px 30px 50px 20px; 横径が４隅とも同じ半径で、縦径も４隅とも同じ半径であれば、 border-radius: 50px 10px 40px 30px; ４隅の角丸の横径、縦径すべて同じ半径であれば、 border-radius: 50px; また、それぞれの隅の角丸の値は省略が可能ですが、次のルールで適用されます。・左下が省略された場合は、右上と同じ。・右下が省略された場合は、左上と同じ。・右上が省略された場合は、左下と同じ。ボーダーに 1px 以上の幅がある場合はボーダーの外側の輪郭について指定します。 ≪ border-radius の指定例 ≫ border-radius: 80px 30px 30px 20px / 40px 30px 50px 20px; ３つの角丸矩形（roundrect）の共通プロパティ width: 200px; height: 100px; background-color: yellow; border: solid 10px gray;

・４隅の横径が同じ、４隅の縦径が同じ・４隅の横径、縦径が全て同じ border-radius: 50px 10px 40px 30px; border-radius: 50px; 80px 40px 30px 30px 30px 50px 20px 20px 50px 50px 10px 10px 40px 40px 30px 30px 50px 50px

(4)

cursor

カーソルの形状を指定します。値説　　　　　明値説　　　　　明 auto default pointer リンクカーソル crosshair 十字カーソル move 移動カーソル text テキスト編集カーソル wait 待機・処理中カーソル help ヘルプカーソル progress URI e-resize 東方向リサイズカーソル s-resize 南方向リサイズカーソル w-resize 西方向リサイズカーソル n-resize 北方向リサイズカーソル nw-resize 北西方向リサイズカーソル ne-resize 北東方向リサイズカーソル se-resize 南東方向リサイズカーソル sw-resize 南西方向リサイズカーソル hand 指型カーソル *1 no-drop ドロップ禁止カーソル *2 all-scroll 全スクロールカーソル *2 col-resize 横方向リサイズカーソル *2 row-resize 縦方向リサイズカーソル *2 not-allowed 禁止カーソル *2 vertical-text 縦書きカーソル *2 *1 ：ＩＥ独自拡張（IE4以上）　　*2 ：ＩＥ独自拡張（IE6以上）ブラウザが自動的に選択したカーソル（初期値）進行中カーソル（CSS2.1から追加）利用環境の標準カーソル（矢印型など） URI（URL）で任意のカーソルファイルを指定（.curまたは.aniファイル）つぎのサンプルでは、「手とトリガーのボタン」のイラストのトリガー用のボタン上にマウスポインタを持って行くと、“Click”や“Hover”の文字の位置でテキスト編集カーソル「I」に変化してしまうので、変化しないように cursor: default; （矢印型の標準カーソル）を指定しています。

【GoodTrigger の説明】

〔HTML の記述（GoodTrigger.html）〕

（１）画像を click してトランジションを開始させる方法。

id 属性 stage1 の div 要素の中に id 属性 image1 の div 要素を作り、click でトランジションが開始されるように onClick="className='anime1'" とします。id 属性 image1 の div 要素の中に、<img>タグで画像要素 <img src="images/LeftHand.png" alt="Left Hand"> の記述をします。

後述の CSS では、画像が入っている id 属性 image1 の div 要素を click（＝画像を click したように見える）したときにトランジションが始まるように記述します。

（２）ボタンを click して、画像のトランジションを開始させる方法。

id 属性 stage2 の div 要素の中に id 属性 box1 の div 要素を作り、click でトランジション

(5)

が開始されるように onClick="className='anime2'" とします。この id 属性 box1 の div 要素をボタンとして使用するので、「Click」という文字を CSS クラス .font1 のフォントで表示するようにします。

そして、id 属性 box1 の div 要素の中に、id 属性 image2 の div 要素を作り、<img>タグで画像要素（上記（１）と同様）の記述をします。

後述の CSS の作成時には、id 属性 box1 の div 要素が親要素、id 属性 image2 の div 要素が子要素となっているので、id 属性 image2 の div 要素の位置は id 属性 box1 の div 要素の左上端から id 属性 image2 の div 要素の左上端の距離で記述します。また、画像が入っている id 属性 box1 の div 要素（ボタン）を click したときにトランジションが始まるように記述します。

（３）ボタンを hover して、画像のトランジションを開始させる方法。

id 属性 stage3 の div 要素の中に id 属性 box2 の div 要素を作ります。hover でトランジションが開始されるようにするので、id 属性 box2 の div 要素には onClick などの記述はしません。この id 属性 box2 の div 要素をボタンとして使用するので、「Hover」という文字を CSS クラス .font1 のフォントで表示するようにします。

そして、id 属性 box2 の div 要素の中に、id 属性 image3 の div 要素を作り、<img>タグで画像要素（上記（１）と同様）の記述をします。

後述の CSS の作成時には、id 属性 box2 の div 要素が親要素、id 属性 image3 の div 要素が子要素となっているので、id 属性 image3 の div 要素の位置は id 属性 box2 の div 要素の左上端から id 属性 image3 の div 要素の左上端の距離で記述します。また、画像が入っている id 属性 box2 の div 要素（ボタン）を hover したときにトランジションが始まるように記述します。 <!DOCTYPE html> <html> <head> <title>GoodTrigger</title> <meta charset="UTF-8">

<body>

<p>■トリガー（変化のきっかけ）をわかり易くする方法</p> <div id="stage1">

<div id="box1" onClick="className='anime2'"><font class="font1">Click</font> <div id="image2"><img src="images/LeftHand.png" alt="Left Hand"></div> </div>

(6)

〔CSS の記述（GoodTrigger.css）〕

（１）画像を click して transition を開始させる方法の CSS の記述。

先ずステージとなる#stage1 ボックスを記述します。

画像を入れる#image1 ボックスを記述します。position は absolute にします。

その中に入れる img 画像を記述し、position を absolute にします。top: 0px;、left:0px; とすることによって、#image1 ボックスと img 画像の左上端の位置が一致し、width: 100%; height: 100%; とすることによって、#image1 ボックスの中に img 画像がぴったりと納まります。img 画像に transition の記述をします。left プロパティを 2 秒、ease-out でトランジションするように記述します。

/* 手の画像を click して transition 開始。 ***********/ #stage1 {

width: 600px; height: 120px; background-color: orange; border: solid 1px black; position: relative; } #image1 { top: 10px; left: 150px; width: 122px; height: 94px; position: absolute; } </div><br> <div id="stage3">

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

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

(7)

（２）ボタンを click して、画像のトランジションを開始させる方法の CSS の記述。

ステージとなる#stage2 ボックスを記述します。

トリガーのボタンとなる#box1 ボックスを記述します。position は absolute にします。画像を入れる#image2 ボックスを記述します。position は absolute にして、位置は、top と left で指定します。

その中に入れる img 画像を記述し、position を absolute にします。top: 0px;、left:0px; とすることによって、#image2 ボックスと img 画像の左上端の位置が一致し、width: 100%; height: 100%;とすることによって、#image2 ボックスの中に img 画像がぴったりと納まります。img 画像に transition の記述をします。left プロパティを 2 秒、ease-out でトランジションするように記述します。

/* 親要素（ボタン）を click して子要素（手の画像）の transition 開始。 ***********/ #stage2 {

width: 600px; height: 120px; background-color: orange; border: solid 1px black; position: relative; } #image1 img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;

transition: left 2s ease-out;

-webkit-transition: left 2s ease-out; }

#image1.anime1 img { left: 300px; }

(8)

（３）ボタンを hover して、画像のトランジションを開始させる方法の CSS の記述。

ステージとなる#stage3 ボックスを記述します。

トリガーのボタンとなる#box2 ボックスを記述します。position は absolute にします。画像を入れる#image3 ボックスを記述します。position は absolute にして、位置は、top

#box1 {

top: 30px; left: 10px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; } #image2 { top: -20px; left: 140px; width: 122px; height: 94px; position: absolute;

-webkit-transition: left 2s ease-out; } #image2 img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } #box1.anime2 { background-color: green; } #box1.anime2 div#image2 { left: 430px; }

(9)

と left で指定します。

その中に入れる img 画像を記述し、position を absolute にします。top: 0px;、left:0px; とすることによって、#image3 ボックスと#image3 img 画像の左上端の位置が一致し、width: 100%; height: 100%;とすることによって、#image3 ボックスの中に#image3 img 画像がぴったりと納まります。#image3 img 画像に transition の記述をします。left プロパティを 2 秒、ease-out でトランジションするように記述します。最後にボタンに表示するテキストのフォントの指定をします。 /* 親要素（ボタン）を hover して子要素（手の画像）の transition 開始。 ***********/ #stage3 { width: 600px; height: 120px; background-color: orange; border: solid 1px black; position: relative; }

#box2 {

top: 30px; left: 10px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; } #image3 { top: -20px; left: 140px; width: 122px; height: 94px; position: absolute;

-webkit-transition: left 2s ease-out; } #image3 img { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } #box2:hover { background-color: green; } #box2:hover div#image3 { left: 430px; }

(10)

color: black;

font: bold 28px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 50px;