「アネ婚」模写。キラリと光るボタンの実装。疑似要素にposition:absoluteを指定する方法。

こんにちは。

「アネ婚」模写コーディングの途中経過です。

現在、「お喜びの声」の部分までスマホ画面・PC画面共に終わりました。

キラリと光るボタンの実装。

このボタン、キラリと光るんです↓

これ、jQueryでやる必要があるのかなと思ったらCSSだけで出来るみたい。

「光るボタン CSS」でググるといっぱいやり方が出てきます。

その中でどれがいいかな～と色々調べたところ、

なんとなく光り方が似ててコードもシンプルなのでこれにしました↓

この中のコードで、「btn」classはボタン自体の見た目のスタイルなので、

光る効果の「shine」classだけをaタグに付けました。

「お喜びの声」の部分、

HTMLで並べただけのこの状態から↓

(吹き出し部分だけ背景色と余白付けてます)

画像をwidth:20%、吹き出し部分をwidth:70%にして

これら全体を囲んでいる親要素（div）にflex-boxで


div{
display:flex;
flex-wrap:wrap;
align-items:center;
justfy-content:space-between;
}

と指定すると、一発でビシッと決まります↓

気持ちいい～。

flex-boxって便利ですね。

あとは吹き出しに三角部分を作らないといけないのですが、

三角部分は疑似要素(::before ::after)で作ります。

吹き出しをp要素で作ったので、::beforeの場合こうですね(分かりやすく赤くしてます)↓


p::before{
border:transparent 15px solid;
border-right:red 20px solid;
}

::before ::after両方作ると↓

そしてそれ(三角)をposition:absoluteで配置するのですが、ここで疑問が…。

「あれ？position:relativeを指定すべき親要素って、疑似要素の場合どれになるんだっけ？」

今回の場合、吹き出しのp要素でいいのか、それともp要素を囲んでいる親要素になるのか。

答えは、吹き出しのp要素でOKです。

疑似要素(::before ::after)にposition:absoluteを指定する場合、

position:relativeを指定すべき親要素は、「○○::before」の○○部分の要素でOKです。

「アネ婚」の模写は思ったより長く、時間がかかりそうです。

もし10月半ばまでに終わらなければ、途中でもいいからとりあえず案件を取る準備をしようかと思います(ココナラやクラウドワークス等)。