vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

css-chat-design

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

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

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

スポンサーリンク

画像の準備

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

・自分
okutani-prof

・相手
someone

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

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;
}

解説1

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

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

レイアウト確認1

PCだとこんな感じ。

css-chat-design2

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

css-chat-design3

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

では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;
}
/* ↑追記↑ */

解説2

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

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

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

レイアウト確認2

PCだとこんな感じ。

css-chat-design4

スマホだとこんなです。

css-chat-design5

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

まとめ

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - BLOG, CSS

スポンサーリンク

PC用AdSense

PC用AdSense

▼格安のWebサイト制作はじめました▼

格安のWebサイト制作
Share
  • このエントリーをはてなブックマークに追加
  • 大変参考になります!
    最後の一言として、使わせていただけたらなと思っています!

  • 最後の一言と言っても、結構長めに書いてしまうのですが、複数段入れると、服着だしの三角が真ん中になってしまうので、人から出るようになりません。
    もしよければ治し方を教えていただけないでしょうか。

    • top: 50%;となっているところを、top: 20px;などとしてみてはどうでしょうか?pxの値は適宜、ご自身の合わせたい値にしてみてください!

      • ありがとうございます。参考にさせていただきます。

  こちらの関連記事もどうぞ

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

SEO見直したらアクセス数が3倍になった件

ハリネズミの記事を書こうと思ってるだけで、全く書いてないokutani(@oku …

ブログ記事にTwitterのツイート&会話のやりとりを載せる方法

こんにちは、okutani(@okutani_t)です。 最近、やっとTwitt …

【Win・Mac】Sassを導入&初めてScssを使ってみる

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法

こんにちは、okutani(@okutani_t)です。Twitterでこんな質 …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。