ちまちま系、CSS。

こんばんは、さじです。

夏のカジュアルスーツに似合う水玉パターンの

吹き出しを作ってみたいと思ったわけです。

イメージしたのはネクタイ柄。

父の日に間に合わせたかったのですが

まあね、吹き出しの難しいこと。。

間に合わなかったので「遅れてごめんね」

パターン、しかも一個だけです。

吹き出しと水玉のヒントは

LSSさん(id:little_strange)さんの 記事にありました。

ということで、出来たのがこちら。

 

遅れてごめんね！父の日プレゼントセレクション

 

非常に手間取ったのが、三角の位置を

枠にくっつけることはもちろんですが

レスポンシブっていうんですかね？

要はスマホ用に自動で幅を合わせてもらうアレです。

適当に書いたら（まじです！）出来てるぽいので

コードこれです。赤字がヤマカンで書いたやつ。

1行の幅と高さの○割ってイメージなんでしょうか。

わかったら追記しておきます。

<div style="width: 0px; height: 0px; margin-left: 30px; margin-bottom: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #404040;"> </div>
<div style="width: 80%; height: 100%; padding: 1em; color: pink; font-size: 16px; font-weight: bold; text-align: center; border-radius: 5px; background-size: 30px 30px; background-color: #404040; background-image: radial-gradient(circle 5px at 25% 25%,gray 25%,transparent 30%),radial-gradient(circle 5px at 75% 75%,gray 25%,transparent 30%);">遅れてごめんね！父の日プレゼントセレクション</div> 

※詳しい方のツッコミお待ちしております。適宜修正します。

あれこれやる前にググればっていうのは無しです（笑）。

自分はかなりアバウトにCSSを弄っているので

やってみて違ったら修正、を繰り返すタイプ。

だいぶ進み方に無駄がありますが

それでも思った通りに変化すると

プラモデルや模型を作る時のような

とても新鮮な気持ちになります（笑）。

さじ

忘れるところでした！

参考にした記事はこちら、いつもお世話になります。