Bootstrapで作ったチャットのデザインのサンプルを紹介！
Bootstrapではデザインフレームワークを提供しています。Bootstrapを使うことで簡単に洗礼されたデザインを実装することができます。この記事ではBootstrapで作ったチャットのデザインをサンプルコード付きで紹介しています。
Bootstrapでチャットのデザインを作りたい
Bootstrapを導入すると、HTMLタグの要素に特定のclass属性を指定するだけで洗礼されたデザインに仕上げることができます。
今回はBootstrapを使用してチャットのデザインを作る方法をサンプルコード付きで紹介したいと思います。
Bootstrapで作ったチャットのデザインのサンプル
BootstrapではFlexboxを使えるようになるクラスが提供されています。
要素にd-flexを指定することで、その要素はflexboxコンテナとなります。その子要素はflexアイテムとなり、子要素で使用できるプロパティを提供するクラスも提供されています。
d-flexを指定した要素で、相手側にはflex-rowクラスを指定し、左がアイコン/右がメッセージ文となるようにしています。
自分側にはflex-row-reverseを指定し、左がメッセージ文/右がアイコンとなるようにしています。
また、メッセージが複数行にわたる場合もアイコンとメッセージ文の上部のラインが揃うようにalign-items-startクラスを指定しています。
さらに、どちらのメッセージか区別がつきやすいように、相手側のメッセージ文背景にはbg-warningクラスで黄色にしています。
自分側のメッセージ文背景にはbg-secondaryクラスを指定して、水色にしています。
まとめ
Bootstrapを使用して、簡単にチャットのデザインを実装することができました。
是非サンプルコードを参考にして、自分好みのチャットデザインを作成してみてくださいね。
