どうやって作るの?
吹き出しを作りたい!
●CSSをコピペする?
もちろん、出来ますよぉー。
出来上がったものをハテナのCSSにペーストすれば解決します!
で?これは…出来たのか?
僕は全然分かってないCSSの中身!
こんな事を繰り返してたら…ただの僕はコピペマシーンだぁ〜↑
何とかできない?
考えろぉ~考えるんだぁ~↑
●VBAは楽しい!
今もエクセルVBAは楽しんでます。
VBAで絶対にしなかった事はコピペです。
誰かが作った素晴らしいコードをコピーして使い回すとメンテナンスが出来ない!
結局…分からないから、分かった振りをしてしまう自分が嫌。
だから、常にVBEに直接手書きしてます。
●吹き出しってハテナで作れる?
作ってみたい「吹き出しみたいなやつ」
どうやって作る?
誰かが作ったコードをCSSに取り入れて…
「俺!すごいだろぉ〜」
たしかに!それは凄いです。
その操作をどうするのか?分かってない人も多いから…。
でも、自分なりに考えて作りたい。
●HTMLで作ってみる
じゃ!やってみますかぁ~。
ってどんなものを作りたいの?
こんなイメージです!!
想像するのは簡単です。
でも、具体化するのは.....難しいかもです。
HELP必要です。
●ヒントはここ!●
分からない時はこのBLOGを訪ねています。
※三角形を作るのがPIONT!!
イメージはこんな感じです。
1.正方形を作る
※その正方形は4つの三角形から成り立っている
2.正方形の使いたい部分を抽出したい
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;
border-radius: 2px;
background-color: pink;
">●●●●●●</div>
<div style="
<div style="
width: 0px;
height: 0px;
border-top: 30px solid pink;
border-left: 50px solid transparent;
border-right: 10px solid transparent;
"> </div>
上記のコードをHTMLに貼り付けると粗削りな吹き出しが出来ました!
●まとめ●
●HTMLへの記述●
●HTMLへの記述●
上向きの吹き出しも考えてみました。
<div style="
width: 0px; height: 0px;
border-left: 50px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid yellow;
"> </div>
<div style="
<div style="
padding: 2em;
border-radius: 2px;
background-color: yellow;
">今回は自分なりに吹き出しを考えてみました!次回もお待ちしています。</div>
今回は自分なりに吹き出しを考えてみました!次回もお待ちしています。
※三角を<center></center>で真ん中に移動してみました。
使いたい人は少ないでしょうが....HTMLに貼り付けると使えますよ(笑)