Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】マウスカーソルで枠線の太さが変わる演出!【outlineの有効活用!?】

 どうも!LSSです!!

 

昨日の記事、

で、 border と outline の違いを試してみました。

 

記事にしておきながら、書いてる自分も試しながら書いていたので、ことさら
「読んでもよく分からない」内容だったかと思います^^;

 

一応、自分では理解したつもりで、outlineの有効活用方法を思いついたので、今回はそんな記事です!

せっかくなので「コピペで使えるCSSサンプル」記事として挙げてみます^^ 

 

 

マウスカーソルを乗せると枠が太くなります

サンプル

↓のどれかに、マウスカーソルを乗せてみてください

てすと
てすと
てすと
てすと

  

 

コード

<style><!--
.o-waku{
display:inline-block;
margin:10px;
width:130px;
height:60px;
padding:8px;
text-align:center;
transition:0.5s linear 0s;
outline:7px ridge #4040ffff;
}
.o-waku:hover{
outline:15px ridge #8080ffc0;
}
--></style>
<div class="o-waku">てすと</div>
<div class="o-waku">てすと</div>
<div class="o-waku">てすと</div>
<div class="o-waku">てすと</div>

 

コード解説 

<style>~</style>までが、CSSの仕掛けの全てです。
まずこの部分をコピペしてください。

 

4つ並んでいる、<div class="o-waku">てすと</div>は<div>以外のタグでもなんでもよくて、ただ枠で囲みたい部分のタグに
class="o-waku"
を書き足すだけで効果がのります^^

はてなブログの場合、「編集 みたまま」でどこかへのリンクを置いて、「HTML編集」でaタグに「 class="o-waku"」を書き足すのがいいかな?って思います。

 

また、<style>タグ内のうち、

width:130px;
height:60px;

この部分の数値で四角のサイズを指定しています。

使いたいサイズの数値に書き換えるか、またはこの2行を削ると中身にフィットしたサイズになります。

 

outline:7px ridge #4040ffff;
}
.o-waku:hover{
outline:15px ridge #8080ffc0;
}

この上の 7px が変更前の枠線の太さ、下の15pxが変更後の枠線の太さになります。

またそれぞれ、最後の#で始まる部分が色を指定している部分で、ここも好きな色に変更してOKです^^(redやpinkといった色名指定も可)

 

 

ここから、またborderとoutlineの違いの話

今回のサンプル、
「outlineで描いた枠線の太さを、マウスカーソルが乗っている時と乗っていない時で変更する」
というものです。(ついでに色も少し変えたりしていますが)

 

「borderは太さによってレイアウトが崩れる、outlineはレイアウトを崩さない」
という特徴がとてもよく出ている事例となります。

 

例えば上記コードの「outline」を「border」に変更するとどうなるか?

 

↓実際にborderにしてみたのがこちらです! (ダメな例)

てすと
てすと
てすと
てすと

 

 

試しにまた、マウスカーソルを乗せたり外したりしてみてください。

 

枠の太さが変わるのは同じですが、太さが変わるたびに
「続きの記事がうにょうにょブレる」
ようになってしまい、不格好な演出になってますね^^;

 

その点、最初にあげた、outlineで書いたほうは
「枠線の太さは変化しつつも、記事の他の部分を押したりしない」
ので、スマートに使えます^^

 

 

 

あとがき

outlineの「レイアウトを崩さない」という特徴を有効活用するとしたら、こんな場面でしょうね^^

borderで「周りがブレないように」しようとしたら、ちょっと面倒なコードになりそうですw

 

今回は :hover transition で変化を楽しむ感じの演出をサンプルにしてみましたが、キーフレームアニメーションにしても良さそうですね^^

↓こんな感じで。

 

赤からピンク、ピンクからゴールド!

 

 コード

<style><!--
@keyframes outline-anm{
0%{outline:3px solid red;}
50%{outline:10px solid pink;}
100%{outline:20px solid gold;}
}
--></style>
<span style="outline-offset: 5px; animation: outline-anm 2s linear 0s infinite alternate;">赤からピンク、ピンクからゴールド!</span>

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^