Help us understand the problem. What is going on with this article?

[Bootstrap]Railsアプリでレスポンシブな『吹き出し』を作る方法

More than 1 year has passed since last update.

2018/03/25追記:
こちら、Bootstrap3の話です。
Bootstrap4では、.row-centerなど実装されたようなので、もっと簡単に作成できますね。
詳しくはBootstrap4移行ガイドをみてください。


gahag-0001247785.png
Bootstrapを導入しているRailsアプリでできるだけ簡単に人が話しているような吹き出しを作る方法を模索したのでまとめてみました。

はじめに完成系を

スクリーンショット 2017-01-17 16.56.20.png
このように、人が話しているような吹き出しを作る方法を紹介します。
スクリーンショット 2017-01-17 16.57.18.png
画面を小さくしても、ちゃんとレスポンシブに変化してくれます。

ソースコードはこんな感じになっています。

sample.html.erb
<div class="row row-center">
 <div class="col-lg-2 col-md-3 col-sm-4 col-xs-5">
  <%= image_tag "/images/woman.png", alt: "東京藝術大学 Mさん", class:"img-responsive img-circle reviews" %>
 </div>
 <div class="col-lg-10 col-md-9 col-sm-8 col-xs-7">
  <div class="popover right show"style="position:relative; top=-90px; left=100px; max-width:100%; display:inline;">
   <div class="arrow"></div>
   <h3 class="popover-title">東京藝術大学 Mさん</h3>
   <div class="popover-content">
    <p>兵庫県神戸市出身。4歳よりピアノ、12歳よりフルートを始める。<br>東京藝術大学 音楽学部器楽科フルート専攻在学中。<br>第67回全日本学生音楽コンクール大阪大会入選。第9回神戸新人音楽賞コンクール優秀賞受賞。</p>
   </div>
  </div>
 </div>
</div>
sample.scss
//吹き出し用の設定
.popover.show{
  margin-bottom: 10px;
}
//横の画像用の設定
img.reviews {
  margin-bottom: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
//並んでいるものを上下中央で揃える設定
.row-center{
  text-align: center;
  letter-spacing: -0.4em;
}
.row-center > [class*='col-'] {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: middle;
  float: none !important;
}

これからできるだけ詳しくこのコードが何を書いているのか?を紹介していきます。

吹き出しの作り方

これは、Bootstrapにある機能で簡単に作ることが可能です。
このページ(twitter bootstrapの吹き出し)を参考にしながら、上下左右向きの静的な吹き出しを作りましょう。

この吹き出しですが、本来modal的に表示するものなので、z-indexの値が異常に高く(確か1000)設定されています。
動くナビバー等を設定されている方はz-indexの値を上書きしておきましょう。

また、marginが設定されてないので、以下のように設定しておきましょう。

sample.scss
//吹き出し用の設定
.popover.show{
  margin-bottom: 10px;
}

レスポンシブな図の大きさの変え方

これも基本的にBootstrapの機能だけで作ることができます。

  • class:"img-responsive"image_tagに設定
  • 画像、吹き出しを横に並べる場合はcol-xs-*を足して12になるようにそれぞれを囲むdivに設定(僕の場合はどのデバイスでもできるだけ綺麗なバランスで見れるよう、col-sm-*col-md-*col-lg-*のそれぞれを指定しています)

また、こちらもmarginが全く設定されていなく、影が吹き出しにしか無いのも変なので、以下のように設定しておきましょう。

sample.scss
//横の画像用の設定
img.reviews {
  margin-bottom: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

図と並べる時に上下中央で揃える方法

Bootstrapのグリッドシステムでは、rowの中身が横に並ぶ時には上揃えになってしまいます。
そこで、この設定を変更しておきましょう。
こちらは、このページ(簡単!Bootstrap拡張:センタリンググリッドシステム)を参考にしました。

sample.scss
//並んでいるものを上下中央で揃える設定
.row-center{
  text-align: center;
  letter-spacing: -0.4em;
}
.row-center > [class*='col-'] {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: middle;
  float: none !important;
}

これで完成です。
今回は右に吹き出しがあるパターンを作りましたが、左にあるパターンも見たい場合は、LiveDeliのHPをご覧ください。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away