[レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep

「好きなプログラム言語何？」と聞かれれば、ためらいなく「CSS」と答えるokutani(@okutani_t)です。(ちなみにCSSはプログラム言語ではありません…) 今回はCSSでチャット風のデザインを作ってみました。レスポンシブ対応。 これで面白いやりとりし放題ですね。 スポンサーリンク 画像の準備 チャット画面の隣に自分と相手の写真を載せるので、90×90px以上の画像を用意しておきましょう。 ・自分 ・相手 相手の画像は下記リンクから拝借。 LINKFLAT ICON DESIGN -フラットアイコンデザイン-『FLAT ICON DESIGN』 両方ともサーバーにアップロードしておきます。 基本のレイアウト まずは基本のレイアウトを作っていきます。 HTMLはこちら。 <div class="chat-box"> <div class="chat-face"> <img src=

[witchstyle]

(2015/04/15、2016/09/30のエントリ)

[ai_mani]

すごくわかりやすいです！大して詳しくもないのに＾＾；どうしてもこういうレイアウトにしたくて調べてました。内容をある程度理解してから実装したいなと思っていたので、解説部分は本当にありがたいです。

[piece-hairworks]

うげえええ( ；´Д｀)おくたにさまーが自慢してくるー((((；ﾟДﾟ)))))))[レスポンシブ対応] CSSでチャット風デザインを実装する - vdeep

[okutani]

【過去記事】かなり気に入ってる。 [レスポンシブ対応] CSSでチャット風デザインを実装する - vdeep