実際に書いてみる！CSSで吹き出しを作る方法【初心者向け】
初心者向けにCSSで吹き出しを作る方法について解説しています。LINEのような吹き出しを実際にソースコードを書いて説明しています。上向き下向き・左向き右向きの吹き出しの作り方を紹介しているので、ぜひ参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでLINEのような吹き出しを作る方法について解説しています。
実際にソースコードを書いて説明しているので、書きながら実践的に理解していきましょう。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
田島メンター！！メニューの横に吹き出しのような三角を付けたいのですが、どうすればいいですか〜？
それでは今回はbeforeとafterの疑似要素を使って、画面に吹き出しの形を作成する例を紹介しよう。
beforeとafterは、要素の直前や直後に何かを入れるものでしたね。
そうだね。吹き出しの三角形部分を作るのにはいくつかの手順があるんだ。ひとつ例を見てみよう。
最初に実行結果をお見せします。
吹き出しの書き方
左向きの吹き出しを例に書き方をみていきます。まず、吹き出しの枠を作ります。
html部分 ------------------------------------------ <div class="balloon-left"> 左だよ </div> ------------------------------------------
css部分
------------------------------------------
.balloon-left {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 34px;
text-align: center;
background: #44FF44;
border: 3px solid #000000;
z-index: 0;
}
------------------------------------------
次に、:beforeで、吹き出しの尖った部分を作ります。
html部分 ------------------------------------------ <div> 左だよ </div> ------------------------------------------
css部分
------------------------------------------
.balloon-left {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 34px;
text-align: center;
background: #44FF44;
border: 3px solid #000000;
z-index: 0;
}
.balloon-left:before {
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #44FF44 transparent transparent;
content: "";
position: absolute;
top: 50%; left: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
z-index: 0;
}
------------------------------------------
最後に、:afterで吹き出しの尖った部分に枠線を追加します。
html部分 ------------------------------------------ <div class="balloon-left"> 左だよ </div> ------------------------------------------
css部分
------------------------------------------
.balloon-left {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 34px;
text-align: center;
background: #44FF44;
border: 3px solid #000000;
z-index: 0;
}
.balloon-left:before {
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #44FF44 transparent transparent;
content: "";
position: absolute;
top: 50%; left: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
z-index: 0;
}
.balloon-left:after {
border-style: solid;
border-width: 11px 11px 11px 0;
border-color: transparent #000000 transparent transparent;
content: "";
position: absolute;
top: 50%; left: -12px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
z-index: -1;
}
------------------------------------------
以上で吹き出しが完成しました。
beforeで三角の部分、afterで枠線の部分を形成しているんだ。
一番最後に処理されるafterで枠を作っているんですね。枠線を入れない場合はbeforeだけでいいということでしょうか？
そうなるね。次は色々な方向で作成してみようか。
左向きと右向き
左向きと右向きの吹き出しは次のように作ります。
html部分 -------------------------- <div class="balloon-left"> 左だよ </div> <div class="balloon-right"> 右だよ </div> --------------------------
css部分
--------------------------
/*左向き*/
.balloon-left {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 34px;
text-align: center;
background: #44FF44;
border: 3px solid #000000;
z-index: 0;
}
.balloon-left:before {
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #44FF44 transparent transparent;
content: "";
position: absolute;
top: 50%; left: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
z-index: 0;
}
.balloon-left:after {
border-style: solid;
border-width: 11px 11px 11px 0;
border-color: transparent #000000 transparent transparent;
content: "";
position: absolute;
top: 50%; left: -12px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
z-index: -1;
}
/* 右向き */
.balloon-right {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 34px;
text-align: center;
background: #44FF44;
border: 3px solid #000000;
z-index: 0;
}
.balloon-right:before {
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #44FF44;
content: "";
position: absolute;
top: 50%; right: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
z-index: 0;
}
.balloon-right:after {
border-style: solid;
border-width: 11px 0 11px 11px;
border-color: transparent transparent transparent #000000;
content: "";
position: absolute;
top: 50%; right: -12px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
z-index: -1;
}
-----------------------------
上向きと下向き
上向きと下向きの吹き出しの作り方です。また、border-radiusを使って、丸くしています。
html部分 -------------------------------- <div class="balloon-top"> 上だよ </div> <div class="balloon-bottom"> 下だよ </div> --------------------------------
css部分
--------------------------------
/* 上向き */
.balloon-top {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 32px;
text-align: center;
background: #44FF44;
border: 3px solid #000000;
z-index: 0;
border-radius: 60%;
}
.balloon-top:before {
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #44FF44 transparent;
content: "";
position: absolute;
top: -8px; left: 50%;
margin-left: -9px;
display: block;
width: 0px;
height: 0px;
z-index: 0;
}
.balloon-top:after {
border-style: solid;
border-width: 0 11px 11px 11px;
border-color: transparent transparent #000000 transparent;
content: "";
position: absolute;
top: -12px; left: 50%;
margin-left: -10px;
display: block;
width: 0px;
height: 0px;
z-index: -1;
}
/* 下向き */
.balloon-bottom {
position: relative;
display: inline-block;
padding: 0 15px;
width: auto;
min-width: 150px;
height: 40px;
line-height: 34px;
text-align: center;
background-color: #44FF44;
border: 3px solid #000000;
z-index: 0;
border-radius: 60%;
}
.balloon-bottom:before {
content: "";
position: absolute;
bottom: -8px; left: 50%;
margin-left: -9px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #44FF44 transparent transparent transparent;
z-index: 0;
}
.balloon-bottom:after {
border-style: solid;
border-width: 11px 11px 0 11px;
border-color: #000000 transparent transparent transparent;
content: "";
position: absolute;
bottom: -12px; left: 50%;
margin-left: -10px;
width: 0px;
height: 0px;
z-index: -1;
}
----------------------------
まとめ
CSS部分は少し複雑ですが、色や形などは以下の例をベースにカスタムすることで様々なパターンの吹き出しを作ることができます。
多少失敗してもパラメータを変えて練習してみましょう。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
左右と上下、それぞれの場合の例だよ。
かなり複雑な手順なんですね。自分でやるとなるとなかなか大変そうです。
まずはサンプルで実際に画面に反映させてみて、そこから手を加えてみるのもいいね。
そうですね、色々練習してみます。ありがとうございました！
また、TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。
独学に限界を感じている場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
