ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
PREMIUM
CSSでチャット風のUIを作ってみよう
CSSで吹き出しを作るテクニックやメッセージを左右に振り分ける方法を学んでいきます。
0%
動画レッスン一覧
(7)
質問と回答
(15)
未完了
#01 開発の準備を整えよう
(02:19)
無料公開中
完成版の確認
index.htmlの作成
未完了
#02 必要な要素を配置してみよう
(02:16)
無料公開中
要素の配置
未完了
#03 画像とテキストを横並びにしていこう
(02:30)
styles.cssの作成
フレックスボックスの設定
未完了
#04 画像とテキストのスタイルを設定しよう
(02:38)
画像のスタイリング
テキストのスタイリング
未完了
#05 メッセージを左右に振り分けよう
(02:19)
メッセージの左右配置
未完了
#06 CSSで三角形を作ってみよう
(01:27)
三角形の実装方法
未完了
#07 チャット風のUIを完成させよう
(02:49)
吹き出しの表現
動作確認
#02 必要な要素を配置してみよう
長いアルファベットの文字列を表示しようとするとはみ出てしまいます
2022年3月27日
メッセージはなぜpタグではなくてdivタグなのですか?
2022年1月27日
#04 画像とテキストのスタイルを設定しよう
文字が重なって表示されてしまいます
2022年1月27日
textの領域幅がなぜそうなるのかわかりません
2022年1月27日
隣接兄弟結合子の動きがわかりません
2022年1月27日
隣接兄弟結合子の使い方がわかりません
2022年1月27日
#05 メッセージを左右に振り分けよう
.messages li .right-side { } がうまく動作しません
2022年1月27日
flex-direction: row-reverse;がうまく動作しません
2022年1月27日
Chromeでうまく更新できません
2022年1月27日
「li.right-side」は「.right-side」でもいいのでは?
2022年1月27日
#07 チャット風のUIを完成させよう
position: relative と position: absolute の関係性がよくわかりません
2022年1月27日
text に position: relative をつけるのはなぜですか?
2022年1月27日
positionをつけなかった場合、borderが長方形になる理由が知りたい
2022年1月27日
nth-childを使ってスタイルを切り替えてもいいですか?
2022年1月27日
絶対配置を外すとBorderが長方形になるのはなぜですか?
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2020年6月10日
バージョン情報
Chrome 80 / Visual Studio Code 1.45.1
関連キーワード
(4)
基礎講座
(369)
初心者向け
(368)
CSS3
(20)
ミニプログラム
(6)
このレッスンを共有する