CSSで四角い吹き出しを作成する時のCSSコードの意味を徹底解説

初心者でも分かる!左側からの吹き出し(四角)のCSSを徹底解説

 

左側からの吹き出し(四角)〜HTMLとCSSの意味

ここでは一番基本的な吹き出しの設定について解説していきます。

吹き出し左側の例

吹き出し左側の例

吹き出しを作成するときは、吹き出しの内容(コメント)を表すHTML部分と、実際に吹き出しの枠を表すCSS部分に分かれます。

HTML部分で「これは吹き出しですよ 」って宣言をして、その吹き出し部分をCSSコードで作成してあげるって事です。

左側からの吹き出し(四角)〜HTMLの意味

 

HTML<div class="balloon1-left">
<p>左側から吹き出し</p>
</div>

 

<div class="〇〇○○">の意味は、
「ここで書かれることは、CSSファイルの〇〇○○で装飾しますよ!」って意味になります。
ここでは左側からの吹き出しを意味する「balloon1-left」という文字を使用していますが、ここは覚えやすい文字で大丈夫です。
ちなみに「balloon1-left」は「左側からの吹き出しバージョン1」って意味合いです。
そして、実際に吹き出しで使用するコメントは<p>〇〇〇〇</p>の中に書いていきます。

左側からの吹き出し(四角)〜吹き出し枠CSSコード

 

CCS.balloon1-left {
position: relative;
display: inline-block;
margin: 1.5em 0 1.5em 15px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #e0edff;}
.balloon1-left:before{
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid#e0edff;}
.balloon1-left p {
margin: 0;
padding: 0;
}

吹き出しのCSSは大きく2つの部分に分けられます。

  1. 四角い枠の部分
  2. 枠左側の三角の部分

それではCSSコードを分解してそれぞれの役割を解説していきます。

.balloon1-left

先ほどHTMLで指定したclass="balloon1-left"のCSSコードを書いていきますよという意味になります。

position: relative;

いちばん最初に、吹き出し枠をどの位置に配置するかを決めていきます。

吹き出し枠を左に配置するのか、真ん中にするのか、それとも右にするのかは、この「position」というプロパティを使用して自由に決めることができます。

ここでは「relative;」(レラティブ)を指定していますが、「relative;」は相対位置という意味です。position:は配置方法の指定。位置関係を決定するプロパティとなります。

簡単に言うと元々その要素(ここでは吹き出しの四角い枠)が配置される場所のことです。

この場合は、吹き出しの位置を初期設定のままの左側としています。

なぜ、初期設定が左なの???って思われた方は、文字を書く場合をイメージしてみて下さい。

基本的には左側からスタートしますよね。「relative;」そういった意味合いになります。

位置を上下左右に動かしたいときは「top」「bottom」「left」「right」プロパティを使用しますが、今回の吹き出しの場合は、位置を動かさないので、このままにしておきます。

※例1:「relative;」のみの場合

relative表示の画像

※例2:「relative;」で左から右へ100px移動させる場合

CSSコードは「position: relative; left:100px;」となって、下図のような表示になります。

relativでleftを使用した場合の画像

display: block;

「block;」は要素の表示のされ方や高さ・幅の設定のプロパティになります。display:はブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定するプロパティになります。

margin: 1.5em 0 1.5em 15px;

「margin:」(マージン)は領域間のスペース(間隔・距離)を指定するプロパティです。

ここでは四角い吹き出し枠が上下左右にどのくらい距離をとるか意味します。

例えば、上下の値を小さくすると上下間の間隔が短くなるといった感じです。

上下左右を異なる値にしたい場合には、スペースで区切って値の指定を行います。

値を1つ指定した場合: [上下左右]等距離のマージンになります。
値を2つ指定した場合: [上下]と[左右]のマージンになります。
値を3つ指定した場合: [上][左右][下]のマージンになります。
値を4つ指定した場合: [上][右][下][左]のマージンになります。

ここでは、値が4つ指定されているので、

1.5em⇒上のマージン

0⇒右のマージン

1.5em⇒下のマージン

15px⇒左のマージン

となります。

「em」と「px」は値の大きさを決める単位になります。

「px」は文字の大きさを指定する時に使う機会が多いのでイメージしやすいと思います。

※「px」は絶対的な値になります。ここでは左のマージンを15pxとしていますが、どんな場合も必ず15pxのマージンがあるという意味です。次に説明する「em」と比較すると分かりやすいです。

「px」は絶対的な値と書きました。

例えば、「em」を使わず上下で15pxにしたと仮定します。

その場合、吹き出し枠の中にあるテキストの上下にそれぞれ15pxのマージンがあることになります。

もし中のテキストを大きくしたらどうなるでしょうか?

「px」は絶対的な値となので、テキストの大きさを大きくしても枠の上下のマージンは変化しません。

テキストが大きくなれば自動的に枠のサイズも大きくなればいいね!!って時に使うのが「em」になります。

「em」は基本のフォントサイズ(文字の大きさ)に対して相対的に大きさが変わります。

つまり文字が大きくなれば、それに合わせて「em」で指定した箇所も相対的に大きくなるというわけです。

※例1:margin: 15px 0 15px 15pxの場合

margin15pxの場合の画像

margin: 15px 0 15px 15pxは上に15px、右から0、下に15px、左に15pxのマージンがあることになります。

※例2:margin: 0px 0 0px 0pxの場合

margin0の場合の画像

margin: 0px 0 0px 0pxの場合は、マージンが0、つまりお互いの距離が0なので、それぞれがくっつく形になります。

marginが0の場合は、px等の単位は省略できます。

※例3:margin: 15px 0 15px 15pxの場合(文字の大きさを16px⇒40px)

文字の大きさを40pxにした画像

これは、先ほどの例1のマージンで文字の大きさを16pxから40pxに拡大したものです。

文字が大きくなって吹き出し枠も拡大されても、上下のマージンは15pxで変化していないのが分かりますね。

先ほど「px」は絶対的な値と書きましたが、これは文字通り文字や枠が大きくなっても「px」で指定されたマージンは変化しないということになります。

「px」が絶対的な値なら、相対的な「em」はどのように表示されるか見ていきます。

※例4:margin: 1.5em 0 1.5em 15pxの場合(文字の大きさを16px⇒40px)

pxからemへ変更した画像

文字や枠が拡大されたことによってマージンも拡大されているのが分かります。

実際、ここまで拡大させることはめったにないと思いますが「margin」での「px」と「em」イメージは何となくつかめたと思います。

「px」だと枠を大きくした時に窮屈に見えることがあるので、枠の拡大に合わせて自動でマージンも大きくなる「em」を使用しています。

padding: 7px 10px;

「padding: 」(パディング)は余白を指定するプロパティです。

吹き出しの場合を例に取ると、吹き出し内のテキスト周り(上下左右)の余白をいくつにするかの設定になります。

先ほどの「margin」の設定と同じく、上下左右を異なる値にしたい場合には、スペースで区切って値の指定を行います。

値を1つ指定した場合[上下左右]等距離の余白
値を2つ指定した場合[上下]と[左右]の余白
値を3つ指定した場合[上][左右][下]の余白
値を4つ指定した場合[上][右][下][左]の余白

※例1:padding: 15px 10px 15px 10pxの場合

padding15pxの画像

padding: 15px 10px 15px 10pxの場合、上下で15px、左右で10pxの余白になります。

吹き出し内の場合はテキストがちょうど上下間の真ん中に来るように設定しています。

※例2:padding: 0px 10px 15px 10pxの場合

padding0pxの場合の画像

padding: 0px 10px 15px 10pxの場合、上の余白が0pxなので、テキストが枠の上部ギリギリに配置されます。

※例3:padding: 0px 10px 0px 10pxの場合

oadding上下0pxの画像

padding: 0px 10px 0px 10pxの場合、上下の余白が0pxなので、枠の高さがテキストの高さと同じになります。

文字の大きさを拡大すると枠も拡大しますが、余白は0pxなので上と同様に枠の高さがテキストの高さと同じなのは変わりません。

※ここでの解説では「padding: 7px 10px;」としていますが、お使いのサイトの仕様(テーマ等)によってはテキストが真ん中に来ない可能性があります。その場合は、上下の値を調整してサイトに合う最適値を見つけて下さい。

min-width: 120px;

「width」はなん通りかの呼び方があって、よく使われるのは「ウィズ」、「ワイズ」、「ウィッズ」と呼ばれます。ここでは「ウィズ」を使用していきます。

「width」は横幅を意味します。

「min」はminimum(ミニマム)の略で最小を意味してます。

ここでは「min-width」となっていますので、直訳すると最小の横幅になります。

これだけ見てもさっぱり意味が分かりませんね。

それでは最小の横幅って一体どういうことなのか解説していきます。

「min-width」とは「width」(横幅)がこれ以上小さくならない「min」(最小値)となり、

今回のケースでは、120pxと指定されているので、

吹き出し枠の横幅が120pxより小さくならない設定となります。

まだ少し分かりにくいですね。

吹き出し枠などのBOXと呼ばれる枠は、パソコンでは通常に表示されていても、モバイル表示になると画面の大きさに合わせて縮小されます。

すると見栄えが非常に悪くなるので、モバイル画面で枠が縮小されたとしても、最低限この幅は維持しますよ!!!っていう設定になります。

つまりモバイル表示時にもユーザーが違和感なく見ることのできる最低限の大きさを、あらかじめ設定しておくということになります。

max-width: 100%;

「max-width」は先程の「min-width」の逆になります。

モバイル画面でちょうど良い大きさの枠だった場合、パソコンで表示させた時、かなり拡大される場合があります。

これ以上大きく表示させないという時に「max-width」を使用します。

単位は「min-width」の時と同様にpxを指定します。

ここでは吹き出しの設定ですので、枠が横に広がっても良いので、100%を使用しています。

color: #555;

「color:」は文字の色を指定します。

サイトで使用できる色はredやblack、whiteなど文字で指定できるものから、「#〜」のように#の後ろに数字とアルファベットを組み合わせたコードがあります。

色はかなりの種類の数があって、全てのコードを覚えるのは不可能なので、色のコードを調べられるサイトをブックマークしておくと便利です。

原色大辞典

このサイトは、沢山の種類の色のコードが慶されているのでとても便利ですよ。

ちなみにここで使用している#555は黒と灰色の中間くらいの色になります。

font-size: 16px;

「font-size:」は吹き出しに使用する文字の大きさを指定します。

16pxは通常使用されている標準的な大きさですが、セリフの内容やサイトのスタイルに合わせて大きくしたり、小さくしたりすると良いと思います。

background: #e0edff;

「background:」は、吹き出し枠内部の背景の色の指定になります。

#e0edffは先程の色を探すサイトで見つけてきたものを使用しています。

左側からの吹き出し(四角)〜三角部分CSSコード

.balloon1-left:before{

「:before」は擬似要素とよばれるものの1つで、対象となるHTMLの前に指定した要素を追加できるコードになります。

ここで指定する要素ですが、吹き出し枠の左側に飛び出ている三角を作る要素になります。

content: "";

「content: "";」は上の「:before」とセットになっていて、実際に指定する要素を書き込んでいきます。

position: absolute;

「absolute;」は絶対位置という意味です。position:は配置方法の指定。位置関係を決定するプロパティとなります。

先ほど吹き出し枠のpositionは「relative」の相対位置を使用していましたが、ここでは絶対位置を指定しています。

絶対位置は起点からどのくらい離れた位置に配置されるかを設定します。

位置を上下左右に動かしたいときは「top」「bottom」「left」「right」プロパティを使用します。

※「relative」を使用することも可能ですが、少し作業が複雑になるので、吹き出しの三角部分は「absolute;」を使用すると覚えて下さい。

top: 50%;

上で指定した「absolute;」(絶対位置)で、上から50%の位置に配置するというプロパティになります。

※例1:top: 50%の場合

top50%の場合の画像

吹き出し枠の上から50%、つまりちょうど半分(真ん中)に三角を設置するという意味です。

※例2:top: 0%の場合

top0%の場合

吹き出し枠の上から0%、枠の最上部に三角を設置するという意味です。

top: 100%なら枠の最下部に配置される設定になります。

※ここでは値の単位に「%」を指定していますが、これは枠の大きさが変化しても枠に対する位置が常に50%の場所に配置されることを意味しています。

例として、「%」ではなく「px」で指定してみます。

※例3:top: 17pxの場合

top17pxの場合の画像

「px」で指定した場合、top: 17pxで三角は枠の真ん中に配置されました。

それではこの状態で、文字の大きさを16pxから25pxへ拡大してみます。

※例4:top: 17pxの場合(文字の大きさを16px⇒25px)

文字の大きさを25pxに拡大した画像

「margin」のとこでもお話しましたが、「px」で指定した場合、文字や枠が大きくなっても「px」で指定されたマージンは変化しません。

それはここでも同じことがいえて、top: 17pxで指定した場合、枠の大きさが大きくなっても三角は17pxの位置で固定されてしまします。

枠の大きさを固定していまえば問題はないのですが、後々文字の大きさ等を変更するう場合、このtopの値も設定しなおさなければなりません。

だけど「%」で設定しておけば、文字の大きさを変更して枠が拡大されても、三角は常に同じ場所に配置されることになります。

※「px」、「em」、「%」はその用途に合わせて最適なものを選択することになります。ここらへんは全部覚えようと思ったら大変なので、意味合いだけ覚えておくと良いと思います。

left: -30px;

上で指定した「absolute;」(絶対位置)で、左から-30pxの位置に配置するというプロパティになります。

吹き出し枠の左の外側から30pxの位置に三角を配置するというプロパティになります。

※例1:left: -30pxの場合

left-30pxの画像

left: -30pxは起点となる位置から左側に30px戻るということを表しています。

CSSコードで分かりにくいのが、このように「−」がつく場合です。

位置関係を表すプロパティでは頻繁に「−」が出てきますが、その意味を理解しようと思ったら、少し面倒なので、ここでは「−」っていうものがあるんだ!というくらいの感覚で見て下さい。

それじゃ起点となる位置はどこなの???ってなりますが、それは下のようになります。

※例2:left: 0pxの場合

left0pxの場合の画像

少し見にくいですが、三角がテキストに重なっているのが分かると思います。

ここが起点の位置で、例1の「left: -30px」というのは、この起点から左に−30px移動するという意味合いになります。

それでは−35px移動した場合はどのようになるのか見ていきましょう。

※例3:left: -35pxの場合

left-35pxの場合

三角が左に移動しすぎて吹き出し枠から離れてしまいましたね。

位置を表す時に使用する「−」のイメージが何となく分かってもらえたと思います。

margin-top: -15px;

「margin-top」は、三角の上部のマージンを指定するプロパティになります。

簡単にいうと上部にどのくらいマージンを設定するかなんですが、先ほど出てきた「top50%」と違いが分かりにくいプロパティになります。

まずは例を見ていきます。

※例1:margin-top: -15pxの場合

margin-top15pxの場合

これは、起点から「-15px」のマージンを指定しています。

これだけだと分かりにくいので起点がどの位置になるのか見てみます。

※例2:margin-top: 0pxの場合

margin-top0pxの場合のがず

topのマージンが0px、つまりマージンを設定しない場合の位置になります。

もしマージンを15pxとかにした場合、三角の上部にマージンが発生するので、三角は下側に移動することになります。

マージン0の位置では三角が吹き出し枠の下側にあるので、「−」を指定してやることで、上部に移動させてやります。

※三角の位置(高さ)を決める場合、まずは「top: %」で枠に対する相対的な位置(50%で真ん中)を決めて、「margin-top: px」で細かい位置を確定するという流れになります。

border: 15px solid transparent;

「border: 15px solid transparent」は、実際に三角形を作成するプロパティになります。

ここでの15pxは底辺の大きさ(長さ)になります。

border-right: 15px solid #e0edff;

「border-right: 15px solid #e0edff;;」は、底辺が15pxで左向きの三角形、色は「#e0edff」を表しています。

.balloon1-left p {

吹き出し枠内のテキストに適用するプロパティを指定します。

例えば、文字の大きさや、色等も統一したければここでCSSコードを書くことによって、全てに反映することができるようになります。

margin: 0;

テキストのマージンを設定するプロパティになります。

ここではデフォルトで0に設定しています。

padding: 0;

テキストのパディング(余白)を設定するプロパティになります。

ここではデフォルトで0に設定しています。

}

ここで一連の設定の終了を宣言するタグになります。

 

 

 

コメント

タイトルとURLをコピーしました