どうも！LSSです！！
今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますｗ
まずはコード
↑で使っている吹き出しは、こんなコードで実現しています。
<style><!--
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid orange;
}
.fkds{
position:relative;
padding:1em;
border-radius:15px;
background-color:orange;
}
--></style>
<p class="fkds">今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますｗ</p>
コード解説
<style><!--
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid orange;
}
.fkds{
position:relative;
padding:1em;
border-radius:15px;
background-color:orange;
}
--></style>
<p class="fkds">今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますｗ</p>
まずはざっくりと、３つの部分に分けて説明しますね。
吹き出しの三角部分
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid orange;
}
吹き出しのうち、三角の部分を形づくっているのは、この部分になります。
CSSで三角形を作るのについては
で詳しく扱っています^^
で、今回のコードで重要になるのは、
position:absolute;
↑この指定は、「普通に文章を書いていると上から下に流れる文章になるところを、absolute指定した部分は流れと関係なしに配置する」指定となります。
border-bottomに指定した15pxは三角形の高さに当たる部分で、三角形の形を整える上で調整していい部分になります。
で、もうひとつ重要なのは、
top:-14px;
という指定。
これは、前述のposition:absolute;とあわせて
「じゃあどこに配置するんだ？」というのを
「top（上端）から-14pxの位置」
と指定している部分になります！
（この場合、上端というのは吹き出し本体のセリフ枠の上辺の高さ位置を示します）
つまり、
「上端から14px上の場所から、高さ15pxの三角形を描画する事で、1pxかぶらせている」
という事ですね^^
これで、三角と吹き出し本体部分の枠が重なる事になります。
吹き出し本体の指定
.fkds{
position:relative;
padding:1em;
border-radius:15px;
background-color:orange;
}
こちらは「文章の流れ」の中にいて欲しいので、
position:relative;
を指定しています。
あとは、
padding:1em; ←枠内の余白を１文字分
border-radius:15px; ←15pxサイズの角丸
background-color:orange; ←背景色をオレンジ
という指定をしていますが、ただのボックス枠として自由にアレンジして差しつかえありません^^
吹き出しを実際に運用する指定方法
上記２つ、<style>タグ内に記載しておけば、あとは
<p class="fkds">今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますｗ</p>
のように、
class="fkds"
をタグ内に入れておくだけで、同記事内でいくつでも
吹き出しを使う事ができます！
おっと、このfkdsというクラス名も任意につけた名前で、好きに名付けてOKな部分です^^
↓この赤文字３か所で名前をあわせておく必要はあります。
<style><!--
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid orange;
}
.fkds{
position:relative;
padding:1em;
border-radius:15px;
background-color:orange;
}
--></style>
<p class="fkds">今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますｗ</p>
改変ポイント
<style><!--
.fkds::before{
content:"";
position:absolute;
top:-14px;
left:50px;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid orange;
}
.fkds{
position:relative;
padding:1em;
border-radius:15px;
background-color:orange;
}
--></style>
<p class="fkds">今回は、以前ちょこっと使った吹き出しCSSの解説とかやってみますｗ</p>
紫色で書いた部分の数値を調節する事で、三角形の形を変更する事ができます。
leftやrightの部分の数値をそれぞれ変更する事で、三角の傾きっぷりを調節できます。
前述の通り、ひとつだけ離れたところにあるtopの数値はborder-bottomで指定した数値より1だけ少ないマイナスの数値にしておけばOKです^^
青字で書いた数値は、三角の「枠の左端からの位置」を調節できます。
最後にオレンジ色の部分が、吹き出しと三角の部分の色を指定している部分になります。
同じ色にしておくのが自然ですね^^
試しに、吹き出し本体に…
display:inline-block;
を足してみました。
すると…
こういう風に、幅の自由が
利く吹き出しになります！
他に、
width:270px;
とかで幅をきっちり決めてしまう、という手もありますね^^
謝辞
という、吹き出しCSSについての解説記事を書くきっかけをいただいたのは
さじさんが投稿された上記記事でした^^
LSSの以前の記事を参考にしていただき、複数のCSSネタを組み合わせた水玉の吹き出しが綺麗！
CSSに絶対的な正しい書き方、というのはなく、同じ見ためでも複数のやり方があると思います。
今回のLSSの記事の例は、<style>タグを使う事と::beforeを使用する事で、
「シンプルなclass指定で吹き出しを量産しやすい」
書き方にしてみました^^
あとは…レスポンシブデザイン（PCとスマホ、それぞれに適した見た目を指定する）の方法については、また日を改めてネタにしたいと思いますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
