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

2015/04/15 2017/01/31

Pocket

「好きなプログラム言語何？」と聞かれれば、ためらいなく「CSS」と答えるokutani(@okutani_t)です。(ちなみにCSSはプログラム言語ではありません…)

今回はCSSでチャット風のデザインを作ってみました。レスポンシブ対応。

これで面白いやりとりし放題ですね。

1 画像の準備
2 基本のレイアウト
- 2.1 解説１
- 2.2 レイアウト確認１
3 吹き出しを付ける
- 3.1 解説２
- 3.2 レイアウト確認2
4 まとめ

画像の準備

チャット画面の隣に自分と相手の写真を載せるので、90×90px以上の画像を用意しておきましょう。

・自分

・相手

相手の画像は下記リンクから拝借。

LINKFLAT ICON DESIGN -フラットアイコンデザイン-『FLAT ICON DESIGN』

両方ともサーバーにアップロードしておきます。

基本のレイアウト

まずは基本のレイアウトを作っていきます。

HTMLはこちら。

<div class="chat-box">
  <div class="chat-face">
    <img src="[自分の画像URL]" alt="自分のチャット画像です。" width="90" height="90">
  </div>
  <div class="chat-area">
    <div class="chat-hukidashi">
      ふきだしなのですーふきだしですーふきだー
    </div>
  </div>
</div>

<div class="chat-box">
  <div class="chat-face">
    <img src="[相手の画像URL]" alt="誰かのチャット画像です。" width="90" height="90">
  </div>
  <div class="chat-area">
    <div class="chat-hukidashi someone">
      ふきだしだよ<br>
      へへへ
    </div>
  </div>
</div>

CSSは下記。

/* チャットレイアウト */
.chat-box {
    width: 100%;
    height: auto;
    overflow: hidden; /*floatの解除*/
    margin-bottom: 20px;
}
.chat-face {
    float: left;
    margin-right: -120px;
}
.chat-face img{
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    float: right;
}
.chat-hukidashi {
    display: inline-block; /*コメントの文字数に合わせて可変*/
    padding: 15px 20px;
    margin-left: 120px;
    margin-top: 10px;
    border: 1px solid gray;
    border-radius: 10px;
}

解説１

chat-areaの横幅を100%、その中のchat-hukidashi左側に画像分のmarginを。こうすることでchat-hukidashiを画面サイズによって可変させることができます。

位置の微調整は各marginの値を変えてあげればOKです。

レイアウト確認１

PCだとこんな感じ。

スマホ表示もちゃんと対応。

ちなみに枠線は確認のため付けているだけなので、後で削除します。

ではchat-hukidashiの枠左側に、吹き出しを付けていきます。

吹き出しを付ける

HTMLは変更なし。

CSSは下記の通りです。

/* チャットレイアウト */
.chat-box {
    width: 100%;
    height: auto;
    overflow: hidden; /*floatの解除*/
    margin-bottom: 20px;
}
.chat-face {
    float: left;
    margin-right: -120px;
}
.chat-face img{
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    float: right;
}
.chat-hukidashi {
    display: inline-block; /*コメントの文字数に合わせて可変*/
    padding: 15px 20px;
    margin-left: 120px;
    margin-top: 8px;
    /* border: 1px solid gray; ←削除 */
    border-radius: 10px;
    position: relative; /*追記*/
    background-color: #D9F0FF; /*追記*/
}
/* ↓追記↓ */
.chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 50%; left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #D9F0FF transparent transparent;
}
.someone {
    background-color: #BCF5A9;
}
.someone:after {
    border-color: transparent #BCF5A9 transparent transparent;
}
/* ↑追記↑ */

解説２

.chat-hukidashiにposition: relativeを追加して擬似要素(:after)で吹き出しを使えるように。
中身が空の擬似要素はcontent: “”で作成。

ちなみにそれ以外はいまいち僕もわかってないです。勉強して理解できたら追記します…

参考HTML/CSSで簡単な吹き出しの作り方 – Qiita

レイアウト確認2

PCだとこんな感じ。

スマホだとこんなです。

可愛く表示できました( ´ ▽ ` )ﾉ

まとめ

CSSのみでチャット風のデザインを実装しました。

コメントの文字数に合わせて可変＆レスポンシブする便利な吹き出しで気に入ってます。参考にしてください。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

これでブログに誰かとの会話のせられる( ^ω^)まぁ会話する友達いないんだけどね。友達欲しい...

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- BLOG, CSS