【CSS】絵文字で強調

いつも読んで頂きありがとうございます。

以前にCSSシェイプで心臓がドキドキというコードを紹介しましたが絵文字を使うと簡

単に出来ることが分かりました。

whisky-coke.hatenablog.com

絵文字でドキドキ！

CSSシェイプでハートを作るのは座標を沢山設定しないとダメですが絵文字だとハート

の絵文字を使うだけで簡単にドキドキさせられます。

ここで使用するコードはLSSさんの過去記事を使いますが

CSSでkeyframesのanimationをやってみた！ - Little Strange Software

この記事の中の飛び出し注意！というサンプルをちょっとアレンジ。

心臓がドキドキ！❤ 

コード説明

<style><!--
@keyframes dokidoki{
from{
transform:scale3d(1,1,1);
color:red;
}
to{
transform:scale3d(1.5,1.5,1.5);
color:orange;
}
}
.emoji{
display:inline-block;
margin-left:5px;
animation:dokidoki 0.3s ease 0s infinite alternate;
}
--></style>
<p>心臓がドキドキ！<span class="emoji">❤ </span></p>

ここでLSSさんの記事でも説明がありますが@keyframesの中でfromは変化前、toが変化

後の内容となります。

transform:scale3d(1,1,1);のカッコ内は「横、縦、奥行き」の拡大率で1だと等倍ですが

1以外でも問題はありません。

変化後のtransform:scale3d(1.5,1.5,1.5);は横、縦、奥行きが1.5倍になるという設定で

なので数値を変えていろいろ試してみるのも良いと思います。

clolor:○○;は変化前はred(赤色)、変化後はorange(オレンジ色)という設定ですが、絵文

字によっては変化しないのもあるので確認してください。今回のはPCでは色が変わりま

すが私のスマホ（Android）では変化しませんでした。iPhoneは確認していません。

文字の場合は変化します。

<p>心臓がドキドキ！<span class="emoji">❤ </span></p>

の<span class="emoji">と</span>の間に絵文字または文字を入れるとそれが動きま

す。左側に動く絵文字や文字、右側にテキストを置きたい場合は

<p><span class="emoji">絵文字</span>テキスト</p>となります。

絵文字はPCの場合はショートカットキーで一覧が出せるので参考に。

◆絵文字ショートカットキー◆

• Windowsの場合：Windowsキー+ひらがなの「る」のキー
• Macの場合：control+command+spaceキー

margin-left:5px;はテキストの右端からの距離でこれは確認しながら設定してくださ

い。テキストを左に置いた場合はmargin設定は無しでテキストをスペースで調整した方

が良いかもしれません。

絵文字でいろいろ出来る

絵文字を使うといろんなパターンが出来ますね。

たとえばLSSさんのコードで

【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software

　クリック又はタップして下さい  

というのがありますがこの矢印を絵文字にすると矢印を強調させることもできます。

クリック又はタップして下さい⬆

CSSコード

<style><!--
@keyframes dokidoki{
from{
transform:scale3d(4,1.5,1);
color:red;
}
to{
transform:scale3d(4,1.5,1);
color:orange;
}
}
.emoji{
display:inline-block;
margin-left:10px;
animation:dokidoki 0.2s ease 0s infinite alternate;
}
--></style>
<p><strong><span style="font-size: 80%;">クリック又はタップして下さい</span></strong><span class="emoji">⬆ </span></p>  

クリック又はタップして下さい⬆ 

CSSコード

<style><!--
@keyframes dokidoki{
from{
transform:scale3d(3.5,0,1);
color:red;
}
to{
transform:scale3d(4,1.5,1);
color:red;
}
}
.emoji{
display:inline-block;
margin-left:15px;
animation:dokidoki 0.2s ease 0s infinite alternate;
}
--></style>
<p><strong><span style="font-size: 80%;">クリック又はタップして下さい</span></strong><span class="emoji">⬆ </span></p> 

最後に

LSSさんのCSSコードの応用編ですがいろいろ使えそうな気がしたので記事にしました。

PCとスマホで絵文字の見え方が違う場合があるので投稿後に確認が必要です。

記事内に2つ以上使う場合は@keyframes ○○とクラス名(.emoji)は変えないと競合してし

まうので必ず変えてください。画像でも動きますがサイズ調整が必要になるかもしれま

せん。