2018/12/04CSSの吹き出しを通してCSSの理解を深めようCSSで吹き出しを作成するためには、複数のCSSの機能を組み合わせるため、まずはその1つ1つの機能を理解する必要があります。まとめ三角を作成するためborder(ボーダー)の理解を深めよう吹き出しを作るためには、CSSで三角を作れるようになる必要があります。三角を作るためには、borderの理解が必要です。三角とborder、全然関係内容に思えるかもしれませんが、本文書を読み進めていくと三角とborderの関係がはっきりします。borderの理解を深めていきましょう。borderを使用する際は、文章を1色の線で囲むということが一般だと思います。borderクラスを設定したspan要素を記述します。class="border">borderは、太さ、線の形、色で設定します</span>CSSで、5pxのborderを設定します。5px;}borderで取り囲まれた文字列がブラウザに表示されます。シンプルなボーダー4つの辺のborderを異なる色に設定HTMLはそのままで、1色だった線を上下左右ですべて異なる色に設定してみましょう。5px;}borderの4つ角に注目してください。1色だと意識しなかった4つの角が色を変えることでborderの角の形状が明確になります。この4つ角の形を理解することが吹き出しの三角を作る上で非常に重要になってきます。5px;}コメントアウトした上の部分と下の部分の角の形状に違いが現れます。border-topをコメントアウトボーダーの上の三角部分は残るのではと予想してしまいそうですが、三角は残らずスパッと切れたような形になります。ボーダーの予想と結果borderの辺の1つにtransparentを設定コメントアウトではなくborder-topの色に透明を設定できるtransparentを指定します。左のborderだけに注目してください。三角を作るためには、中間部分を削除して三角部分のみ残すことができれば、実現可能だということがわかります。三角を作るためにはまず、HTMLから文字を削除します。class="border"></span>paddingもなくし、displayにinline-blockを指定すると4つの三角で構成された三角が表示されます。5px;*/}三角で構成された四角ここまでくれば、先ほど説明したborderの透明化設定であるtransparentを使えば、上下左右の矢印が作成できることがわかると思います。左向きの矢印を作成したい場合は、border-right以外のborderの色をtransparentに設定します。左矢印の場合は、border-rightのカラー設定を行い、他はtransparent設定でしたが、各方向の矢印を作成したい場合は、下記のように色の設定を行う必要があります。displayの設定を変更すると三角は作れるのか?displayに”inline-block”の設定を行いましたが、もし設定しない場合と”block”を設定した場合の動作も併せて確認しておきましょう。5px;*/}block設定にしているため、ブラウザ横いっぱいに領域を確保し、左右のみ三角がつくれています。5px;*/}文字の高さ分の領域が確保されているため、左右では三角が作れていません。displayに何も設定しない本当に簡単なCSSしか利用していませんが、三角の作成方法は理解できたのではないでしょうか。三角を利用して吹き出しを作成しみよう三角と四角をうまく組み合わせるためには、CSSの擬似要素のbeforeとpositionを理解しておく必要があります。吹き出しのための擬似要素を理解しよう吹き出しを作成ために利用する擬似要素のbeforeの使い方について簡単に説明を行います。p要素にfukidashiクラスを設定して、beforeを下記のように設定した場合は、p要素のコンテンツの前(before)に新たに文字を追加することができます。追加する文字はcontentプロパティを使用します。color:red;}擬似要素beforeを設定することで、p要素のコンテンツの前に★が表示されることを確認できます。吹き出しのためのpositionを利用しよう吹き出しでは、擬似要素を使用して三角を作成するので、作成した三角をどこに配置するかということでCSSのpositionを利用します。absoluteという単語を聞いてまだ理解できていないという人は下記を参考にpositionを理解しましょう。あわせて読みたい今回こそ、CSSのpositionを必ず理解したいpositionによって擬似要素を指定した場所に配置するためにCSSを下記のように書き換えます。基準となる要素がp要素なのでfukidashiクラスにはpositionプロパティにrelativeを設定します。擬似要素はpositionプロパティをabsoluteに設定し、positionをtopから0、leftから0に設定し、左上に配置する設定にしています。left:0;}左上の隅に配置していることが確認できます。三角と擬似要素beforeを組み合わせてみよう擬似要素beforeを使用して三角の作成を行います。先ほどまではcontentに★を設定していましたが、contentを空にして、borderの設定を行います。transparent;}左上の★から三角に変わりました。吹き出しの要素に幅を持たせて、背景色を設定します。最後にCSSのpositionを使用して位置の調整を行います。擬似要素beforeのtopプロパティとleftプロパティを変更することで指定した位置に配置することができます。ここではtopを15px、leftを-20pxに設定しています。leftはマイナスに設定しているの位置の基準のp要素の外側に配置させています。transparent;}上記の設定で吹き出しの完成です。今回は、左矢印を吹き出しに使用したため、topとleftで調整しましたが、右矢印の場合は、topとrightを使用します。bottomをうまく使ってください。まとめ吹き出しをコピペではなく自分の力で作成できるようになれば、下記のCSSの理解も深めることができます。自分でさまざまな形の吹き出しにチャレンジしてください。