どうも7noteです。破線の間隔を調節する方法

もっとも簡単な点線や破線をCSSで再現する時はこのようにかきますが、
この方法では間隔を調整することができません。

style.css

/* 点線 */
.dotted {
  border-bottom: 2px dotted #000;
}
/* 破線 */
.dashed {
  border-bottom: 2px dashed #000;
}

では間隔を調整して点線や破線を書く方法は？？？

↓↓↓↓↓↓↓↓↓↓

点線や破線の間隔を調整する方法

点線や破線の間隔を調整するには、本来の線を作るborderではなくbackgroundを使用して再現します。

style.css

/* 点線 */
.dotted {
  background-image : linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
  background-size: 8px 2px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}

/* 破線 */
.dashed {
  background-image : linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
  background-size: 8px 1px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}

background-imageの数字が横幅になり、background-sizeの2つ目の数字が高さになります。
そのため、

・点線を作る時はbackground-imageの数字とbackground-sizeの2つ目の数字を同じにします。
・破線を作る時はbackground-imageの数字の方が大きくなるように調整します

4方向全てに点線・破線を作るには4回分書く

style.css

/* 点線(4方向) */
.dotted {
  background-image :
    linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 8px),  /* 上の線 */
    linear-gradient(to bottom, #000, #000 2px, transparent 2px, transparent 8px), /* 右の線 */
    linear-gradient(to left, #000, #000 2px, transparent 2px, transparent 8px),  /* 下の線 */
    linear-gradient(to top, #000, #000 2px, transparent 2px, transparent 8px);   /* 左の線 */
  background-size:
    8px 2px,  /* 上の線 */
    2px 8px, /* 右の線 */
    8px 2px,  /* 下の線 */
    2px 8px;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
}

/* 破線(4方向) */
.dashed {
  background-image :
    linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px),  /* 上の線 */
    linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 8px), /* 右の線 */
    linear-gradient(to left, #000, #000 3px, transparent 3px, transparent 8px),  /* 下の線 */
    linear-gradient(to top, #000, #000 3px, transparent 3px, transparent 8px);   /* 左の線 */
  background-size:
    8px 2px,  /* 上の線 */
    2px 8px, /* 右の線 */
    8px 2px,  /* 下の線 */
    2px 8px;   /* 左の線 */
  background-position:
    left top,  /* 上の線 */
    right top, /* 右の線 */
    right bottom,  /* 下の線 */
    left bottom;   /* 左の線 */
  background-repeat:
    repeat-x,  /* 上の線 */
    repeat-y, /* 右の線 */
    repeat-x,  /* 下の線 */
    repeat-y;   /* 左の線 */
}

ソースが少し長くなりますが、このような方法で4方向ともに線を書くことが可能です。
ただし、角の部分が重なって見えてしまう可能性があるのでpxで微調整するか、開始位置（background-position）を数pxずらして対策をしなければならない場合があります。
あまり万能というわけではないので使いどころには注意したほうがよさそうです。

微妙にかぶってしまう場合も・・・

まとめ

通常のborderでは点線や破線はデザインの微調整が難しいので、このような代替策を用意しておくとコーディングの幅が広がっていいですね。
線が1本か2本だけなら、疑似要素に背景を指定して長さなども調整して配置することもできるのでそのような方法をとるのもアリかもしれません。

かといってあまり点線や破線にこだわり過ぎても気づく人も少ないとは思うので、作業時間とのバランスを見てborderで簡略化するか、backgroundで作りこむか決めればいいかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

修正

221/1/12 12:30頃にclassnamesの記述とコードブロックの修正を加えました。それ以前は誤った記述になっていたので、現状を参考にしてください。

classNameとは

htmlではclassを使ってスタイリングをしますが、Reactが使っているjsxではclassNameを使ったスタイリングを行います。

classNameの使い方

classNameの使い方は簡単で、classと全く同じです。

export default function App() {
  return (
      <div className={App}>
        <h1>Hello CodeSandbox</h1>
      </div>
  );
}

今回はAppを入れましたが、変数などを入れることも可能です。

classNames

動的なクラスの使い分けをする場合や複数のクラス名をつける場合はclassNamesというnpmパッケージを使うと便利です。
https://www.npmjs.com/package/classnames#usage-with-reactjs

基本的な使い方

今回はfoobarClassNamesで定義しています。オブジェクトの値がfalseだとそのkeyとなるclass名は付与されません。
よって今回はfooのみがクラス名として与えられています。

import React from "react";
import classNames from "classnames";

export default function App() {
  const foobarClassNames = { foo: true, bar: false };

  return (
    <div className={classNames(foobarClassNames)}>
      <h1>Hello CodeSandbox</h1>
    </div>
  )
}

複数のクラス名を使う

classNamesを使うことで複数のクラス名を手軽に使えます。

import React, { useState } from "react";
import classnames from "classnames";

export default function App() {

  return (
    <>
      <div className={classnames("login", "isActive")}>
        <h1>Hello CodeSandbox</h1>
      </div>
    </>
  );
}

loginとisActiveが付与されています。

動的にクラス名を切り替える。

下記の画像ではuseStateによって定義されたstatus（progressかcreared）によってstatusClassNamesの値が切り替わる例です。
常にpazzleクラスは持っています。

import React, { useState } from "react";
import classnames from "classnames";

export default function App() {
  const [status, setStatus] = useState("progress");
  const statusClassNames = {
    pazzle: true,
    progress: status === "progress",
    creared: status === "creared"
  };

  return (
    <>
      <div className={classnames(statusClassNames)}>
        <h1>Hello CodeSandbox</h1>
      </div>
    </>
  );
}

classNamesを使うことで、Reactにおける様々なスタイリングを行うことが出来ます。

参考

・React公式ドキュメント(CSS とスタイルの使用)
https://ja.reactjs.org/docs/faq-styling.html

・classnamesパッケージドキュメント
https://www.npmjs.com/package/classnames

---

フリーランスでフロントエンドエンジニアをしています。
お仕事のご相談こちらまで
gunners6518@gmail.com

技術ブログ

今回は「Webグラフィックス Advent Calendar 2020」に投稿した記事「SVG + CSS + Node.js + receiptline で電子レシートを発行してみよう」の補足です。

上記の記事では、作成した SVG の電子レシートを貼り付けることができず、仕方なくスクリーンショットを撮って PNG 形式で貼り付けていました。

ところが、翌日に投稿された、カレンダー作成者 warotarock さんの記事には、「動くもの」が CodePen で埋め込まれているではありませんか！

そこで、作成した SVG の電子レシート各種も CodePen でデモしてみたいと思います。

動くもの

See the Pen SVG + CSS + Node.js + receiptline = Digital Receipt by dopperi46 (@dopperi46) on CodePen.

何とかできました！
ハマりどころは、CodePen 埋め込みスクリプトの URL を変更しないと表示されないところ。

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

また何か作ったら投稿します。ではまた！

iOS Safariでモーダルを表示した際、作り方によっては画面下部のツールバーが表示されているとモーダルを下までスクロールすることができないことがあります。

おそらくheightのとり方に問題がありそうで、width: 100vw; height: 100vh;で設定しているときに発生しました。
それをtop,right,bottom,leftにすることで解決することができました。

コードとしては下記のようになります。

<div class="modal">
  <div class="modal_background"></div>
  <div class="modal_content_wrap">
    <div class="modal_content">モーダル</div>
  </div>
</div>
<style>
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: scroll;
}
.modal_background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* モーダルをセンタリングするため */
.modal_content_wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal_content {
  height: 1000px;
}
</style>

ちなみに元の作りは下記のようにしていました。

<style>
.modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow: scroll;
}
</style>

現象

flexクラスがついたtdの中身を上下中央の横並べにしようとすると、flexクラスがついたtdのみborderが太くなる

See the Pen table by kena-nk (@kena-nk) on CodePen.

回避策

① tdの中にdivタグを入れて、そこにflexクラスを当てると回避できる

index.html

<table>
    <tr>
        <td>aaa</td>
        <td>
          <div class="flex">
            <span class="badge">new</span>
            <div>
              <span>aaa</span>
            </div>
          </div>
        </td>
        <td>aaa</td>
    </tr>
    ...省略
</table>

② div要素をインライン要素にして回避する

index.html

<table>
    <tr>
        <td>aaa</td>
        <td>
            <span class="badge">new</span>
            <div style="display: inline">
              <span>aaa</span>
            </div>
        </td>
        <td>aaa</td>
    </tr>
   ...省略
</table>

③ 要素を指定する系で解決する

style.css

table > td > div:nth-of-type(2) {
   display: inline;
}

↑のnth-of-type(2)はdivの2つ目という指定ではなく、表の左から2列目を指している。

なぜtdタグにdisplay:flexを当てるとうまくいかなくなるのか(推測)

tdタグはdisplay: table-cellと同じ役割を担っている。

なので、tdタグにdisplay: flexを当ててしまうと、同じテーブル内にdisplay: table-cellとdisplay: flexが共存してしまう感じになるので、結果うまくいかなくなるのかな〜と推測した。

なぜ共存するとおかしくなってしまうのか厳密には分からないので誰か知ってる人いたら教えて欲しい・・・！

追記 (2021/01/12)

@nagtkk さんにコメントをいただきました！

tdにdisplay: flexを当てるとdisplay: table-cellが自動生成されてしまい、その下にdisplay: flexがくるためborder-collapse: collapseが効かなくなり2重になって見えるようです！

参考：https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

最近マウスカーソルがカスタマイズされたイケイケのwebサイトをよく見かけるので、作りました。
ただUIの事を考えると、変にカスタマイズされたカーソルはストレスでしかないのでやりすぎはNGです。

作り方

以下のように2つの円形を作って、1つは通常のカーソルの動き、2つは少し遅らせ追従するような動きになるように作りました。

jQueryで座標の取得とクラス追加、cssでカーソルの装飾をしていきます。

HTML

div.cursorの中に2つspanが入っていて、dot1とdot2で別々の動きを作っていく

html

<div class="cursor">
  <span class="dot1"></span>
  <span class="dot2"></span>
</div>

jQuery

• [ $(window).mousemove ]でカーソルのホットスポットが要素内（body）で動いた時の処理
• [ left: e.pageX , top: e.pageY ]で座標を取得
• [ $('a').on('mouseenter', function () { } ] でaタグにホバーしたときに[active]というクラスを追加

jquery

$(window).mousemove(function (e) {
  $('.cursor span').css({
    left: e.pageX,
    top: e.pageY
  })
})
$('a').on('mouseenter', function () {
  $('.cursor span').addClass('active');
})
$('a').on('mouseleave', function () {
  $('.cursor span').removeClass('active');
})

CSS

• [cursor: none;]でデフォルトのカーソルを非表示
• [.cursor span { } ]の中で基本的な形（今回だと円形）を作る
• dot1とdot2にそれぞれの形を作る
• [.active]でホバー時の形を作る

css

* {
  cursor: none;
}
.cursor span {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.cursor span.dot1 {
  background: rgba(98, 77, 112, 0.8);
  transition: width 0.2s, height 0.2s;
}
.cursor span.dot1.active {
  height: 50px;
  width: 50px;
  background: rgba(98, 77, 112, 0.3);
}
.cursor span.dot2 {
  height: 20px;
  width: 20px;
  border: solid 1px #624d70;
  transition: top 0.2s, left 0.2s, width 0.5s, height 0.5s;
  transition-timing-function: ease-out;
}
.cursor span.dot2.active {
  height: 80px;
  width: 80px;
}

2つ目の円形の動きの遅延

円形の1つの動きを少し遅らせて、後を追うような動きにしています。
この動きが遅い円形を作ることでマウスカーソルの良い感じが増します！
動きの作り方は、cssの[ transition: top 0.2s, left 0.2s, width 0.5s, height 0.5s; ]で指定しています。

• 追従の遅延は [ top 0.2s, left 0.2s ]
• 大きさの遅延は [ width 0.5s, height 0.5s ]

それぞれの数字を変えると動きを変えることができます。

transitionについて詳しくは以下
https://developer.mozilla.org/ja/docs/Web/CSS/transition

ホバーの動きをCSSだけでなく、 jQueryを絡ませる理由

aタグにホバーしたときに[::hover]ではなく[.addClass('active')]を使っています。
理由リンクだけでなく、画像やテキストにもホバー時の変化をもたせるためにjQueryでクラスを付けています。
（最初は[::hover]でしていましたが、最近jQueryでクラスを付けるようにしました。こっちのほうが都合がいい！）

ipadのようにテキスト部分にホバーすると縦棒になるようにカスタマイズ

以下のように特定の指定部分にホバーすると違う形になるようにする。

CSSとjQueryに以下を追加

css

.cursor span.dot1.text_active {
  height: 1.4em;
  width: 2px;
  border-radius: 0;
}
.cursor span.dot2.text_active {
  display: none;
}

jquery

$('p').on('mouseenter', function () {
  $('.cursor span').addClass('text_active');
})
$('p').on('mouseleave', function () {
  $('.cursor span').removeClass('text_active');
})

わかりやすくaタグとpタグにホバーすると形が変わるように書きましたが、実際は特定クラスを作っておいて指定する使い方のほうが良いかと思います。

まとめ

少ないコードでwebサイトの印象がガラッと変わるのでおすすめです！
僕はsassの変数を使ってデザインガイドを作っているのでjQueryとCSSを使いましたが、jsだけで作ってプラグイン化してもいいかと思います。
時間があればjsだけで完結するコードも公開します。

Tailwind CSSとは

CSSフレームワークの一種。CSSを書かなくてもクラス名を付けるだけでスタイリングができるようになる、便利なフレームワークです。

例えば：

<div class="hoge">fuga</div>

というHTMLにheight: 12px;を掛けたい場合、

<div class="hoge">fuga</div>
<style>
  .hoge{
    height: 12px;
  }
</style>

と書く必要があるわけですが、Tailwind CSSを使えば

<div class="h-3">fuga</div>

と書くだけでheight: 12px;が掛かります。その他主要なCSSプロパティに対応したクラスが用意されており、いちいちCSSを手動で編集する手間を省くことができる優れものです。

Tailwind CSSはpx指定ができない

上記の例で示したようにheight: 12px;は.h-3というクラスで指定できるのですが、height: 400px;みたいな、任意のheightやwidth、padding、marginなどをpx指定で掛けたいときは結局CSSを書くしかなくなります。

不便すぎる...

任意の.scssファイルに以下を書けば解決

SCSSという、動的な定義を使えるCSS記法が存在します。これを使って、以下のようにクラスを動的に定義すればpx指定できないのが不便すぎ問題を解決できます。

@for $i from 1 through 1024 {
  .h-#{$i}px {
    height: #{$i}px;
  }
}

こんな感じにすれば.h-400pxクラスでheight: 400px;を指定できる、といったクラスが1~1024pxの間で定義できました。これで、px指定できないのが不便すぎ問題を解決できましたね。

※繰り返し回数をあまり大きくしてしまうと、読み込むCSSが肥大化してページ速度低下の原因になるので、程々にしましょう

まとめ

• Tailwind CSSというフレームワークが便利なので使おう
• Tailwind CSSでpx指定できない問題はSCSSのfor文で解決可能

筆者連絡先

https://twitter.com/soeno_onseo

吹き出しコンポーネントとは

吹き出しコンポーネントは会話などを表示するために方向を表示する三角のアローとボーダーのある四角いボックスを組み合わせたUIコンポーネントを意味します。英語ではSpeech Balloonと言うそうです。会話のほかに、ボタンの機能説明やメニューの拡張などにも使います。

この記事の目的

この記事では吹き出しコンポーネントの実装・拡張しやすいベストプラクティスを探します。

Amazonパターン

Amazonではトップナビゲーションバーのログインボタンをホバーしている間にログインと新規登録を促す吹き出しが出てきます。

吹き出し部分のHTML構造は下のように、

<header>
    <div id="nav-belt">
        <div class="nav-left"></div>
        <div class="nav-fill"></div>
        <div class="nav-right">
            <div id="nav-tools">
                <a class="nav-a nav-a-2 nav-truncate" id="nav-link-accountList">
                    <div class="nav-line-1-container"></div>
                    <span class="nav-line-2 nav-long-width"></span>
                    <span class="nav-line-2 nav-short-width"></span>
                </a>
            </div>
        </div>
    </div>
    <div id="nav-flyout-anchor">
        <div id="nav-signin-tt nav-flyout">
            <div class="nav-arrow">
                <div class="nav-arrow-inner">
            </div>
            <div id="nav-signin-tooltip"></div>
            <div class="nav-flyout-buffer-left"></div>  
            <div class="nav-flyout-buffer-right"></div> 
            <div class="nav-flyout-buffer-top"></div>   
            <div class="nav-flyout-buffer-bottom"></div>    
        </div>
    </div>
</header>

なります。

ポイント解説

<div id="nav-belt">はナビバーを指します。そして、吹き出しの部分はnav-flyoutと名付けている。このネーミングから、吹き出しはナビバーに専属していることが分かり、さらにログインボタンの吹き出し以外にもほかのナビバー項目も吹き出しが存在することが推測できます。実際に、ログインボタンの左隣のリージョンアイコンの吹き出しも用意されています。

ログインボタンとログインボタンの吹き出しの間は直接なネストではなく、ナビバー全体（<div id="nav-belt">）の下にナビバー用の吹き出しセクション（<div id="nav-flyout-anchor">）を入れることで、ナビバー項目と吹き出しの上下位置は確定されます。そして、後からに他項目の吹き出しを追加したい時に<div id="nav-flyout-anchor">に新しい<div>を追加するだけで済むようになります。ナビバーの実装をいじる必要がなくなり、拡張性はよくなります。

吹き出しコンポーネントの表示は<div id="nav-signin-tt nav-flyout">に対してdisplay: none;指定の有無によってコントロールしています。

吹き出しの左右位置はJSを使って、<div id="nav-signin-tt nav-flyout" style="left: 120px;">のように動的に設定します。このために吹き出しdivをposition: absolute;にする必要があり、同時にその親コンポーネント<div id="nav-flyout-anchor">はposition: relative;にする必要があります。

style="left: 120px;"の中は数値はElement.getBoundingClientRect()を使ってログインボタンのウインドーに対する位置を取得できます。ウインドーサイズが変わるにつれて、吹き出しの位置も動くとしたいなら、イベントトリガーwindow.resizeを追加するといいでしょう。

三角アローはCSSのボータートリックを利用して作られています。上向きのアローならば、

div.arrow-up {
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid white;
}

によって作れます。

三角アローと吹き出し本体の位置調整はleft: 50%; top: -11px;のように指定しています。当然、三角アローのpositionをabsoluteに指定する必要があります。left: 50%;は三角アローを吹き出しの真ん中に持っていくため、top: -11px;は三角アラーを吹き出しの外に突っ張るようにするための指定です。同じロジックで、三角アラーを下向きにする時はbottomをマイナスの数値に指定すればいいでしょう。

Twitterパターン

Twitterではログイン後、サードバーの下にある自分のアイコンをクリックした時にアカウントスイッチとログアウトを促す吹き出しが出てきます。

吹き出し部分のHTML構造は下のように、

<div id="layers">
    ...
    <div class="css-idbjc4n r-1xcajam" style="bottom: 79px; left: 21px;">
        <div class="css-idbjc4n">
            <svg class="r-uoibet r-9uutrm r-lrsllp" style="left: calc(138px);"></svg>
            <div class="css-1dbjc4n r-1azx6h r-7mdpej r-1vsu8ta r-ek4qxl r-1dqxon3 r-1ipicw7">
                <div class="css-1dbjc4n r-1w50u8q">
                    <li></li>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

なります。

ポイント解説

Twitterの場合、scopedスタイルではなく、1種類のスタイルを1クラス名に集約するようにスタイルを定義しています。例えば、上の例に何度も出てきたclass="css-idbjc4n"はFlexboxのスタイルを指定するクラスとなっており、このクラスのスタイルをいじると、クラス名にcss-idbjc4nが入っている全divが影響を受けます。そのため、HTMLのDOMツリーを見る時の可読性は非常に低くなっています。一方的に、スタイル共通化によって、画面全体のスタイルの統一感が向上します。

<div id="layers">で分かるように、Twitterでは吹き出しのために画面全体に新しいレイヤーを追加しています。

三行目の<div class="css-idbjc4n r-1xcajam" style="bottom: 79px; left: 21px;">は吹き出しのルートノードとなっています。positon: fixed;にすることで、画面（Viewport）に対する位置を設定することが可能となります。style="bottom: 79px; left: 21px;"はその位置の指定となります。具体的な数値はAmazonパターンと同様、JSを使って、実際のログインアイコン（上のスクリーンショットの一番下）の位置から計算している可能性が高いでしょう。ただ、画面全体に対して位置を指定しているから、水平位置leftのほかに、垂直位置のbottomも指定しなくてはなりません。

吹き出しコンポーネントの表示は、上の吹き出しルートノードの生成と削除によってコントロールしています。実際、ログインボタンをホバーすると、吹き出しのDOMノードは生成されます。

<svg class="r-uoibet r-9uutrm r-lrsllp" style="left: calc(138px);"></svg>は三角アローを指しています。TwitterではSVGで三角を描画しています。SVGで描画した三角はデフォルトで上向きとなっており、三角アローの向き先の調整はtransform: rotate(180deg);によって実現しています。

水平位置ではstyle="left: calc(138px);のように調整していて、138pxという数値はおそらく吹き出しのサイズと三角アローのサイズから計算した値と考えられます。CSSを確認したところ、吹き出しボックスはwidth: 300px;で、三角アローのサイズはwidth: 24px;となっているから、leftからは300/2 - 24/2 = 138pxを移動すれば、三角アローは吹き出しの真ん中に行くでしょう。

比較

	Amazon	Twitter	コメント
吹き出しコンポーネントの親	<div id="nav-flyout-anchor">	<div id="layers">	Amazonではナビバー専用の吹き出しのために、ナビバーの下に吹き出しのanchorが置いてある。Twitterでは画面全体に新しいレイヤーを追加。anchorを入れることのメリットは吹き出しとその対象の間の垂直位置は気にしなくて済むこと。吹き出しと吹き出し対象のコンポーネントを一緒に変更する場合は便利だろう。一方で、anchorの範囲以外に吹き出しを追加すると、まずanchorを追加する必要がある。画面全体にレイヤーを追加することで元のコンポーネントと吹き出しは完全に独立となる。よって、各所に吹き出しを追加したり、削除したりすることも容易となるだろう
吹き出しコンポーネントの位置	position: absolute;	position: fixed;	position: fixed;は画面全体（viewport）に対して位置を指定することになる
吹き出しコンポーネントの位置指定	style="left: 120px;"	style="bottom: 79px; left: 21px;"	Twitterパターンは画面全体に対して位置指定となるので、bottomとleft両方の指定が必要
吹き出しコンポーネント中身のレイアウト	display: flex;	display: flex;
吹き出しコンポーネントの表示	display: none;	HTML要素の生成と削除	display: none; に設定する場合、レンダリング時に吹き出しなどのサブエレメントも一緒に生成することになるから、処理が重くなる可能性はある。一方、吹き出しコンポーネントが他の機能的コンポーネントから独立していない場合、吹き出しHTML要素の生成と削除する時に影響範囲の把握が難しくなる
三角アローの作り方	CSSボーター	SVG	CSSボーターのトリックはとても賢いと思う
三角アローの位置	position: absolute;	position: absolute;
三角アローの位置指定	left: 50%; top: -10px;	left: calc(138px); bottom: -10px;	topとbottomにマイナスの数値を指定することで、実質三角アローを吹き出しの内部に治ることができ、三角アローによって位置がずれるなどの問題を解消
三角アローの向き先	border-topとborder-bottomの設定による	transform: rotate(180deg);	transform本当にいろんな使い方があるなと感心し、もっと活用して行きたい

参考

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://www.amazon.co.jp/
https://www.twitter.com/

Bootstrapとは

・Teitter社が開発したCSSのフレームワークの事です。
・サイトのデザインを簡単に作成することができます。
・よく使われるスタイルがあらかじめ定義されているので、定義されたルールに従って利用すれば整ったデザインのページを作成できます。

Bootstrapの導入方法

1.gemを追加する

Bootstrapを使用する為に、以下gemを追加します。
・bootstrap-sass

Gemfile

gem 'bootstrap-sass', '3.4.1' 

Gemfileに書き込み、bundle installを実行します。
コマンド実行後、最後に「Bundle complete!」という文字列を含む節が表示されればインストール完了です。

2.ファイルにbootstrapを読み込ませる

Bootstrapを適用させたいcssファイルを選択します。
その後、以下のようにコードを入力します。

※cssファイルでは、「//」でコメントアウトすることができます。

example.css

//bootstrap-import
@import "bootstrap-sprockets";
@import "bootstrap";

コードを入力し終えたら、拡張子を「css」から「scss」に変更します。

example.scss

//bootstrap-import
@import "bootstrap-sprockets";
@import "bootstrap";

以上で、bootstrapの導入は終わりです。