CSSで吹き出しを作成するためには、複数のCSSの機能を組み合わせるため、まずはその1つ1つの機能を理解する必要があります。複雑なものは、必ずシンプルなものの積み重ねからできているので、まずは基本を理解し、CSSのコピペからの卒業を目指しましょう

三角を作成するためborder(ボーダー)の理解を深めよう

吹き出しを作るためには、CSSで三角を作れるようになる必要があります。三角を作るためには、borderの理解が必要です。三角とborder、全然関係内容に思えるかもしれませんが、本文書を読み進めていくと三角とborderの関係がはっきりします。まずはborderの理解を深めていきましょう。

borderを使用する際は、文章を1色の線で囲むということが一般だと思います。

borderクラスを設定したspan要素を記述します。


<span class="border">borderは、太さ、線の形、色で設定します</span>

CSSで、5pxのborderを設定します。


.border{
    border: 10px solid #f8b500;
    padding: 5px;
}

borderで取り囲まれた文字列がブラウザに表示されます。

シンプルなボーダー

シンプルなボーダー

4つの辺のborderを異なる色に設定

HTMLはそのままで、1色だった線を上下左右ですべて異なる色に設定してみましょう。


.border{
    border-top:10px solid #f8b500;
    border-right:10px solid #ece8d9;
    border-left:10px solid #00adb5;
    border-bottom: 10px solid #393e46;
    padding: 5px;
}

borderの4つ角に注目してください。1色だと意識しなかった4つの角が色を変えることでborderの角の形状が明確になります。この4つ角の形を理解することが吹き出しの三角を作る上で非常に重要になってきます。

マルチカラーボーダー

マルチカラーボーダー

1つの辺のborderをコメントアウト

次に上部にあるborder-topのみ設定をコメントアウトしてみましょう


.border{
/*    border-top:10px solid #f8b500;*/
    border-right:10px solid #ece8d9;
    border-left:10px solid #00adb5;
    border-bottom: 10px solid #393e46;
    padding: 5px;
}

コメントアウトした上の部分と下の部分の角の形状に違いが現れます。

border-topをコメントアウト

border-topをコメントアウト

ボーダーの上の三角部分は残るのではと予想してしまいそうですが、三角は残らずスパッと切れたような形になります。

ボーダーの予想と結果

ボーダーの予想と結果

borderの辺の1つにtransparentを設定

コメントアウトではなくborder-topの色に透明を設定できるtransparentを指定します。


.border{
    border-top:10px solid transparent;
    border-right:10px solid #ece8d9;
    border-left:10px solid #00adb5;
    border-bottom: 10px solid #393e46;
    padding: 5px;
}

先ほどborder-topをコメントアウトした際に予想した形が表示されます

ボーダー透明transparent

ボーダー透明transparent

borderから三角を作成

左のborderだけに注目してください。三角を作るためには、中間部分を削除して三角部分のみ残すことができれば、実現可能だということがわかります。

三角を作るためには

三角を作るためには

まず、HTMLから文字を削除します。


<span class="border"></span>

paddingもなくし、displayにinline-blockを指定すると4つの三角で構成された三角が表示されます。


.border{
    border-top:10px solid #f8b500;
    border-right:10px solid #ece8d9;
    border-left:10px solid #00adb5;
    border-bottom: 10px solid #393e46;
    display:inline-block;
/*    padding: 5px;*/
}

三角で構成された四角

三角で構成された四角

ここまでくれば、先ほど説明したborderの透明化設定であるtransparentを使えば、上下左右の矢印が作成できることがわかると思います。左向きの矢印を作成したい場合は、border-right以外のborderの色をtransparentに設定します。


.border{
    border-top:30px solid transparent;
    border-right:30px solid #ece8d9;
    border-left:30px solid transparent;
    border-bottom: 30px solid transparent;
    display:inline-block;
/*    padding: 5px;*/
}

下記のように左向きの矢印が表示されます

左向き矢印

左向き矢印

左矢印の場合は、border-rightのカラー設定を行い、他はtransparent設定でしたが、各方向の矢印を作成したい場合は、下記のように色の設定を行う必要があります。

矢印のborder設定

displayの設定を変更すると三角は作れるのか?

displayに”inline-block”の設定を行いましたが、もし設定しない場合と”block”を設定した場合の動作も併せて確認しておきましょう。

【displayにblockを設定した場合】


.border{
    border-top:10px solid #f8b500;
    border-right:10px solid #ece8d9;
    border-left:10px solid #00adb5;
    border-bottom: 10px solid #393e46;
    display:block;
/*    padding: 5px;*/
}

block設定にしているため、ブラウザ横いっぱいに領域を確保し、左右のみ三角がつくれています。

displayにblockを指定

displayにblockを指定

【displayに何も指定しない場合】


.border{
    border-top:10px solid #f8b500;
    border-right:10px solid #ece8d9;
    border-left:10px solid #00adb5;
    border-bottom: 10px solid #393e46;
/*    display:block; */
/*    padding: 5px;*/
}

文字の高さ分の領域が確保されているため、左右では三角が作れていません。

displayに何も設定しない

displayに何も設定しない

本当に簡単なCSSしか利用していませんが、三角の作成方法は理解できたのではないでしょうか。

三角を利用して吹き出しを作成しみよう

三角と四角で吹き出し

三角と四角をうまく組み合わせるためには、CSSの擬似要素のbeforeとpositionを理解しておく必要があります。

吹き出しのための擬似要素を理解しよう

吹き出しを作成ために利用する擬似要素のbeforeの使い方について簡単に説明を行います。

例えばp要素にfukidashiクラスを設定して、beforeを下記のように設定した場合は、p要素のコンテンツの前(before)に新たに文字を追加することができます。追加する文字はcontentプロパティを使用します。


<p class="fukidashi">吹き出しを作成しよう</p>


.fukidashi:before{
    content:"★";
    color:red;
}

擬似要素beforeを設定することで、p要素のコンテンツの前に★が表示されることを確認できます。

擬似要素のbeforeを使う

吹き出しのためのpositionを利用しよう

吹き出しでは、擬似要素を使用して三角を作成するので、作成した三角をどこに配置するかということでCSSのpositionを利用します。

relative, absoluteという単語を聞いてまだ理解できていないという人は下記を参考にpositionを理解しましょう。

positionによって擬似要素を指定した場所に配置するためにCSSを下記のように書き換えます。基準となる要素がp要素なのでfukidashiクラスにはpositionプロパティにrelativeを設定します。擬似要素はpositionプロパティをabsoluteに設定し、positionをtopから0、leftから0に設定し、左上に配置する設定にしています。


.fukidashi{
    margin: 2em;
    padding: 1em;
    position:relative;
}

.fukidashi:before{
    content:"★";
    color:red;
    position: absolute;
    top:0;
    left:0;
}

左上の隅に配置していることが確認できます。

positionにrelativeとabsoluteを設定

三角と擬似要素beforeを組み合わせてみよう

擬似要素beforeを使用して三角の作成を行います。先ほどまではcontentに★を設定していましたが、contentを空にして、borderの設定を行います。


.fukidashi:before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    border-top:10px solid transparent;
    border-right:10px solid #ece8d9;
    border-left:10px solid transparent;
    border-bottom: 10px solid transparent;
}

左上の★から三角に変わりました。

擬似要素beforeに三角作成

吹き出しの背景色を設定

吹き出しの要素に幅を持たせて、背景色を設定します。


.fukidashi{
    margin: 2em;
    padding: 1em;
    position:relative;
    width:400px;
    background-color: #ece8d9;
}

吹き出しの背景色を設定

吹き出しの三角の位置を調整

最後にCSSのpositionを使用して位置の調整を行います。擬似要素beforeのtopプロパティとleftプロパティを変更することで指定した位置に配置することができます。ここではtopを15px、leftを-20pxに設定しています。leftはマイナスに設定しているの位置の基準のp要素の外側に配置させています。


.fukidashi:before{
    content:"";
    position: absolute;
    top:15;
    left:-20px;
    border-top:10px solid transparent;
    border-right:10px solid #ece8d9;
    border-left:10px solid transparent;
    border-bottom: 10px solid transparent;
}

上記の設定で吹き出しの完成です。

吹き出しの完成

吹き出しの完成

今回は、左矢印を吹き出しに使用したため、topとleftで調整しましたが、右矢印の場合は、topとrightを使用します。矢印の向きと配置場所によって、top, left, right, bottomをうまく使ってください。

まとめ

吹き出しをコピペではなく自分の力で作成できるようになれば、下記のCSSの理解も深めることができます。ぜひ自分でさまざまな形の吹き出しにチャレンジしてください。

  • borderの理解
  • 擬似要素beforeの理解
  • positionの理解