ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/20
NEW
【週刊ドットインストール】 レッスン制作の進捗、社内開発のススメ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】CSSで吹き出しを作ろう
CSSで吹き出しのようなデザインを作る方法について解説していきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSSでチャット風のUIを作ってみよう
CSSで吹き出しを作るテクニックやメッセージを左右に振り分ける方法を学んでいきます。
0%
動画レッスン一覧
(8)
質問と回答
(7)
#01 CSSで吹き出しを作ろう
(02:24)
無料公開中
完成版の確認
必要となる知識
対応ブラウザ
index.htmlの作成
未完了
#02 borderで三角形を作ってみよう
(03:01)
無料公開中
正方形の作成
色が異なる境界線の設定
三角形の作成
未完了
#03 三角形を切り出してみよう
(01:35)
三角形の切り出し
未完了
#04 三角形を変形させてみよう
(02:37)
三角系の変形
未完了
#05 ベタ塗りの吹き出しを作ってみよう
(02:59)
ベタ塗りの吹き出し
未完了
#06 ベタ塗りの吹き出しを変形させよう
(02:23)
三角形の変形
未完了
#07 枠線付きの吹き出しを作ってみよう
(02:36)
枠線付の吹き出し
未完了
#08 枠線付きの吹き出しを変形させよう
(02:28)
三角形の変形および調整
未完了
#03 三角形を切り出してみよう
背景色が消えないのはなぜですか?
2016年10月12日
#04 三角形を変形させてみよう
なぜ border-top に width を設定するだけでは表示されないのですか?
2016年10月21日
#05 ベタ塗りの吹き出しを作ってみよう
.balloon1-1はなぜbeforeを使うのでしょうか?
2017年10月16日
吹き出しの三角部分の表示にbeforeを使っているのはなぜでしょうか?
2017年9月1日
擬似要素を使うのはなぜですか?
2016年10月7日
なぜ相対配置をつかう必要があるのですか?
2022年1月27日
#07 枠線付きの吹き出しを作ってみよう
画像で吹き出しを作ることはできますか?
2017年9月1日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2016年9月13日
バージョン情報
HTML5 / CSS3