1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します ボックスを hover すると変化します 通常の outline の使い方 outline の通常の使い方は 下の画面のように <input> や <textarea> などの入力フィールドをクリックしてフォーカスが入力フィールドに移った時に 輪郭 (outline) を赤くしたりして目立たせます よく見かける画面でしょう これらの入力フィールドの輪郭をトランジションで変化させます また ボックス (div 要素 ) の輪郭もトランジションで変化させてみます 1
サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り その中に input 要素や textarea 要素を記述します <!DOCTYPE html> <html> <head> <title>inputoutlinetransition</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="inputoutlinetransition.css"> </head> <body> <p> 入力フィールドのアウトラインを変化させる </p> <div id="field"> <p> アウトラインは主に入力フィールドを目立たせるなど ユーザーインターフェースとして使用します <br> 入力フィールドをクリックしてみてください </p> <p> お名前 <br><input type="text" name="namae" size="30"></p> <p> ご意見 ご感想 <br><textarea name="ikenn" cols="50" rows="4"></textarea> </div> </body> </html> CSS の記述 (InputOutlineTransition.css) 先ず 入力フィールドを描画するための #field( ユザーインターフェース画面 ) の記述を します 2
#field { margin: 10px 0px 0px 0px; width: 700px; height: 280px; border: solid 1px black; position: relative; ユーザーインターフェース画面に表示するテキストのスタイルを指定します #field p { margin: 10px 0px 0px 20px; font: 16px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: #000000; 入力フィールドの輪郭 (outline) のスタイルを指定します outline を二重線 (double) 幅 5px 青色で指定します transition を outline が 0.5s で変化するように指定します #field input, textarea { margin: 12px 0px 10px 20px; outline: double 5px blue; transition: outline 0.5s linear; -webkit-transition: outline 0.5s linear; 入力フィールドをクリックしてフォーカス (focus) が入力フィールドに移った時の outline を変化させる指定をします input フィールドは outline を点線 (dotted) 幅 10px オレンジ色に変化させます #field input:focus { outline: dotted 10px orange; background-color: #EEEEFF; input フィールドは outline を立体的な線 (ridge) 幅 10px ピンク色に変化させます #field textarea:focus { outline: ridge 10px pink; background-color: #EEEEFF; 3
サンプル CSS2 ボックスの輪郭 (outline) のトランジション ボックスを hover すると変化します BoxOutlineTransition の説明 HTML の記述 (BoxOutlineTransition.html) BorderTransition.html をコピーして変更するとよいです outline には角の半径を変更して丸くする機能がないので id 属性 div3 と id 属性 div6 の div 要素を削除してあります id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Outline Color と記述します   は半角スペースになります id 属性 div2 の div 要素を記述し 中にテキストで Outline Width と記述します id 属性 div4 の div 要素を記述し 中にテキストで Outline<br>Color,Width,Style と記述します テキストの間に入っている <br> は改行させるタグです id 属性 div5 の div 要素の中に <span> タグで span 要素を5つ記述します (span 要素を使用して5 種類のボーダースタイルを切り替えるためです ) その後にテキストで Outline Many Styles<br>(tricky) と記述します <!DOCTYPE html> <html> <head> <title>boxoutlinetransition</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="boxoutlinetransition.css"> </head> <body> <p> ボックスのアウトラインを変化させる ( ボックスを hover してください ) </p> <div id="stage"> <div id="div1">outline Color</div> <div id="div2">outline Width</div> <div id="div4">outline<br>color,width,style</div> <div id="div5"><span></span><span></span><span></span><span></span> <span></span>outline Many Styles<br>(tricky)</div> </div> </body> </html> 4
CSS の記述 (BoxOutlineTransition.css) 先ず ボックスを描画するための #stage の記述をします テキストの色やフォントは こ こでまとめて指定してあります #stage { margin: 0px 0px 0px 0px; width: 700px; height: 300px; border: solid 1px black; text-align: center; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: black; cursor: default; position: relative; 次に各種アウトラインを変化させる記述をします outline-color のトランジション アウトラインの色を変化させてみましょう #div1 ボックスは outline-color を darkviolet から orange に変化するようにしました #div1 { top: 40px; left: 40px; outline: solid 10px darkviolet; background-color: #CCCCCC; line-height: 80px; transition: 1s linear; -webkit-transition: 1s linear; #div1:hover { outline-color: orange; 5
outline-width のトランジション アウトラインの幅を変化させてみましょう #div2 ボックスは outline-width を 10px から 30px に変化するようにしました ( 注意 : border-width の場合はボーダーの幅が増えた分だけ content( グレーの部分 ) の位置がずれるのを防ぐため #div2 ボックスの位置を top: 30px; left: 370px; から top: 10px; left: 350px; に変化させましたが outline-width の場合は アウトラインの幅が増えても content ( グレーの部分 ) の位置はずれないので #div2 ボックスの位置を変化させる必要はありません ) #div2 { top: 40px; left: 380px; outline: solid 10px deepskyblue; background-color: #CCCCCC; line-height: 80px; transition: 1s linear; -webkit-transition: 1s linear; #div2:hover { outline-width: 30px; outline-color outline-width outline-style の複合トランジション アウトラインの色 幅 スタイルを同時に変化させてみましょう #div4 ボックスは outline-color を limegreen から deeppink に outline-width を 10px か ら 20px に outline- style を outset から dotted に同時に変化するようにしました ここでは outline-color outline-width outline- style を個別に指定しています 6
#div4 { top: 180px; left: 40px; outline-style: outset; outline-width: 10px; outline-color: limegreen; background-color: #CCCCCC; line-height: 40px; transition: 1s linear; -webkit-transition: 1s linear; #div4:hover { outline-style: dotted; outline-width: 20px; outline-color: deeppink; outline-style の連続トランジション アウトラインスタイルを連続して変化させてみましょう 連続して変化させるにはトリ ッキーな方法で一工夫が必要です #div5 ボックスには span 要素を5つ重ねて それぞれの span 要素に違う種類の outline-style を指定しておきます transition-delay( 実行待ち時間 ) を1 秒ずつ増やし 1 秒毎に opacity プロパティを から に変化させて まるでアウトラインの種類が徐々に変化するように見せています /* outline-style を連続して少しずつ変化するように見せるためには opacity を利用する */ #div5 { top: 180px; left: 380px; background-color: #CCCCCC; line-height: 40px; #div5 > span:nth-child(1) { 7
outline: ridge 10px rgba(255, 105, 180, 1.0); transition: 1s linear 0s; -webkit-transition: 1s linear 0s; #div5 > span:nth-child(2) { outline: double 10px red; transition: 1s linear 0s; -webkit-transition: 1s linear 0s; #div5 > span:nth-child(3) { outline: dotted 10px crimson; transition: 1s linear 1s; -webkit-transition: 1s linear 1s; #div5 > span:nth-child(4) { outline: outset 10px skyblue; transition: 1s linear 2s; -webkit-transition: 1s linear 2s; #div5 > span:nth-child(5) { outline: dashed 10px dimgray; transition: 1s linear 3s; -webkit-transition: 1s linear 3s; 8
#div5:hover > span:nth-child(1) { #div5:hover > span:nth-child(2) { #div5:hover > span:nth-child(3) { #div5:hover > span:nth-child(4) { #div5:hover > span:nth-child(5) { 9