HTML5とCSS3で、LINE風チャット画面を作ってみる

HTML5とCSS3で、LINE風チャット画面を作ってみる

参考URL

画像と吹き出しテキストで会話風にするHTMLとCSS。

1, 自分の写真と名前を、表示する

figureタグは、図と説明文を表示する
imgタグは、画像を表示する
figcaptionタグは、図の説明文を表示する
divタグは、ブロック要素してグループ化する

・・・せめて、発言は下じゃなくて右側に来て欲しいな

2, CSSファイルを使う
linkタグのrel属性って、relation(関係)の省略系だったのね。

発言を下では無く右側にするには、自画像表示の方をCSSでfloat: left指定する
CSSのfloat属性とは何か?
文字通り、要素を浮かせて、無かったものとして次の要素が表示される(下には回り込まないのが賢い!)
left, center, rightの3パターンの指定方法がある。centerだと同じ表示?

3, CSSファイルに切り出して、class名で管理する

ちなみにHTML要素のインライン要素(span, strong)とブロック要素(div, p, h1)の違いは、
ブロック要素 = 次の要素が下に来る(改行)
インライン要素 = 次の要素が右に来る(改行されない)

ってだけ。ブロック要素の前後の要素を、横に置きたい時は、float属性で指定する。

4, 発言を、LINEの吹き出しっぽい表示にしたい!

一気に、それっぽくなった!

5, 全体的な配置(画像と名前)を整える

6, 吹き出しの口(発言者が分かる三角錐っぽい奴)を付ける(一番大変で、人によって実装が結構違う)
:beforeと:afterは、指定したHTML要素の直前と直後にCSSから、HTML要素を追加できる。New!とか※とか付与する。

だいたい出来た。
相手側の発言は、単純に反転すればOK?

コメントを残す

メールアドレスが公開されることはありません。