ドットインストール:CSSで吹き出しを作ろう#07~#08
ドットインストールさんで、「CSSで吹き出しを作ろう」という勉強をしています。
#08で最終回なので、今回でおしまいです。
あっというまですね。
前回の学習はこちらです。
#07 枠線付きの吹き出しを作ってみよう
次は、ベタ塗りではなくて
このような枠線付きの吹き出しを作ってみましょう。
形としては、balloon1-1をもとにしてつくることができますね。
(同じ形)
<h2>balloon2-1</h2>
<div class="balloon2-1"></div>
HTMLをコピペして数字の部分を変えます。
スタイルも1-1をコピペ。
balloon1-1{
width:200px;
height:100px;
background:#eee;
border-radius:3px;
position:rerlative;
{
.balloon1-1:before{
position:absolute;
right:20px;
bottom:-20px;
content:('');
width:0;
height:0;
background:#eee;
border-style:solid;
border-width:10px;
border-color:#eee transparent transparent transparent;
}
これの背景色を消して、borderをつければOKですね。
名前をballoon2-1に変えて、作業をしましょう。
まずは、上の四角(balloon1-1)のほうに、
borderを足します。
border:1px solid #eee
そして、backgroundを消します。
すると、このようになっています。
#eeeの色がうすい色なので見辛いですが、
上の四角が枠線で囲まれているのがわかります。
次は、下の三角形も同じようにしていきましょう。
…あれ?
でも、これ、もともとborderで作っていたんじゃなかったっけ?
それを枠線で囲むことなんてできるの?
そのとおり。
枠線で囲むことはできません。
ではどうするのかというと、
このグレーの三角形の上に白の三角形を重ね、
上に1pxずらして配置するのだそうです!
「なんというトリッキーな…」
さすが!とってもおもしろいですね。
先ほどコピペしたbefore擬似要素に重ねて、
さらにafter擬似要素を作ります。
先ほどのbefore擬似要素
.balloon2-1:before{
position:absolute;
right:20px;
bottom:-20px;
content:('');
width:0;
height:0;
background:#eee;
border-style:solid;
border-width:10px;
border-color:#eee transparent transparent transparent;
}
これをさらにコピペして、after擬似要素を作ります。
.balloon2-1:after{
position:absolute;
right:20px;
bottom:-20px;
content:('');
width:0;
height:0;
background:#eee;
border-style:solid;
border-width:10px;
border-color:#eee transparent transparent transparent;
}
beforeが下になり、その上にafterが乗るイメージです。
afterのほうを、
最初は実験のために色をred にしてみましょう。
この段階ではこんな感じになっています。
これを1px上にずらすと、下のグレーの三角形がちらっと見えてくるという感じです。
bottom:-19px;
(最初は20pxだったのを1pxずらしました)
こうなりました。
(ぜんぜんわかりません)
わかりにくすぎるので(笑)
色を白、#fffに変えてみましょう。
以下after擬似要素全てです。
.balloon2-1:after{
position:absolute;
right:20px;
bottom:-19px;
content:('');
width:0;
height:0;
background:#eee;
border-style:solid;
border-width:10px;
border-color:#fff transparent transparent transparent;
}
そうすると、このように
枠線のついた吹き出しに見えるようになりました!
面白い手法ですね。
まとめ。
before擬似要素の上にafter擬似要素を線の太さ分ずらして配置する。
ぜひとも、すぐにでも使いたいので覚えようと思います^皿^
#08 枠線付きの吹き出しを変形させよう
吹き出しの最終回は、
#06の変形版を枠線付きにする感じですね。
1-2を枠線付きにして、「2-2」と表記します。
まずはいつものとおりHTMLに。
<h2>balloon2-1</h2>
<div class="balloon2-1"></div>
そしてスタイルをあてていきます。
まずは1-2をコピペします。そして、名前を「2-2」にします。
balloon2-2{
width:200px;
height:100px;
background:#eee;
border-radius:3px;
position:rerlative;
{
.balloon2-2:before{
position:absolute;
right:20px;
bottom:-25px;
content:('');
width:0;
height:0;
border-style:solid;
border-width:15px 20px 10px 0;
border-color:#fff transparent transparent transparent;
}
まずは四角のほう。
背景(background)を消して、枠線(border)にします。
border:1px solid #eee
すると、このようになります。
うまくいっていますね。
次は下の三角部分です。
先ほどと同じように白のafter擬似要素を作って、上にずらして配置します。
balloon2-2:after{
position:absolute;
right:20px;
bottom:-24px;
content:('');
width:0;
height:0;
border-style:solid;
border-width:15px 20px 10px 0;
border-color:#fff transparent transparent transparent;
}
bottomは-25pxだったので、1px上にずらして-24pxに。
すると、このようになっています。
うまくはいっているのですが、
三角形の左辺は垂直だったため、上にずらした三角形のせいで左辺がみえなくなってしまっています。
なので、after擬似要素のほうの三角形の横幅を少しせばめようと思います。
border-width:15px 20px 10px 0;
これの横幅(20px)のほうを1px縮めて19pxにします。
border-width:15px 19px 10px 0;
こうすれば、左辺もちゃんと見えています。
できあがりです!
これ、三角形を配置する位置を変えれば
アイコンの横に吹き出しをつけたりできますよね。
「この、今カギカッコにしている部分を
吹き出しにできるというわけですね」
なんて楽しそう!
研究して、「コピペシリーズ」に吹き出しバージョンを追加したいと思います!