何時に待ち合わせ?</div></div></div>特に気にすることなく、枠とメッセージ本文を書いていけばOKです。ここで、それぞれのメッセージには、ID名をつけてあげましょう。クラス名のmsg-receiveとmsg-sendは、スタイルシート用の色分けです。下記がCSS全文です。長いですが、解説はCSSの下のとおりです。疑似要素は、タグと同じことを意味しています。タグよりも上位(親、外側)の要素です。–(ハイフン2つ)は変数を表します。変数名「msg-spacing」は30pxだということを表しています。変数の名称は一般には、好きな名前をつけることができます。ここでは、rootに対してそれぞれの変数を定義しているので、このWebページ内の任意の場所で、宣言した変数を呼び出すことができるようになりました。装飾に関する部分は省略します。left;}で横並びにする人、多いかと思います。いっても過言でないほど、当たる壁です。いう意味があるのですが、このような回り込みに適用すると、親要素に高さを与えることができます。hidden;により表示されなくなってしまう場合があります。疑似要素を利用します。具体的には次のサンプルコードの通りです。空の要素を置いてあげます。要素を空要素としています。