今回も訪問してくださりありがとうございます。
今回はhatenaで僕なりの
吹き出しを考えたいと思います。
もちろん、出来ますよぉー。
出来上がったものをハテナの
CSSにペーストすれば解決します！
で？これは…出来たのか？
こんな事を繰り返してたら…ただの僕はコピペマシーンだぁ〜↑
何とかできない？
考えろぉ～考えるんだぁ～↑
誰かが作った素晴らしいコードをコピーして使い回すとメンテナンスが出来ない！
結局…分からないから、分かった振りをしてしまう自分が嫌。
だから、常にVBEに直接手書きしてます。
どうやって作る？
「俺！すごいだろぉ〜」
たしかに！それは凄いです。
その操作をどうするのか？分かってない人も多いから…。
でも、自分なりに考えて作りたい。
●HTMLで作ってみる
じゃ！やってみますかぁ～。
ってどんなものを作りたいの？
こんなイメージです！！
想像するのは簡単です。
でも、具体化するのは.....難しいかもです。
HELP必要です。
●ヒントはここ！●
分からない時はこのBLOGを訪ねています。
little-strange.hatenablog.com
※三角形を作るのがPIONT!!
イメージはこんな感じです。
１．正方形を作る
※その正方形は4つの三角形から成り立っている
２．正方形の使いたい部分を抽出したい
3.必要ない部分はtransparent(透明)にする
※透明にする部分を分かり易く黒くしてみました。
この方法を応用すれば、
右向き、左向き、上向き、下向きを作れるってことです。
一気には作れないので、先ず下向き三角形を作ります。
HTMLへの記述で作ってみました。
<div style="
width: 0px;
height: 0px;
border-top: 50px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
"> </div>
でも？誰でしょかねぇ～。作る過程がとってもユニークです。
初めて考えた人は発想が豊かだったんでしょうねぇ。
このコードに長方形を組み合わせる感じです。
長方形は単純に作れますが、色は三角形と揃えてます。
<div style="
padding: 2em;
background-color: pink;
">
ちょっと、三角の形が大きいので好きな形に修正しましょう。
●●●●●●
コードはこんな感じですかねぇ～。
<div style="
padding: 2em;
background-color: pink;
">●●●●●●</div>
<div style="
width: 0px;
height: 0px;
border-top: 30px solid pink;
border-left: 50px solid transparent;
border-right: 10px solid transparent;
"> </div>
上記のコードをHTMLに貼り付けると粗削りな吹き出しが出来ました！
●まとめ●
●HTMLへの記述●
<div style="
width: 0px; height: 0px;
border-left: 50px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid yellow;
padding: 2em;
background-color: yellow;
">今回は自分なりに
吹き出しを考えてみました！次回もお待ちしています。</div>
今回は自分なりに吹き出しを考えてみました！次回もお待ちしています。
※三角を<center></center>で真ん中に移動してみました。
使いたい人は少ないでしょうが....HTMLに貼り付けると使えますよ(笑)
