読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【吹き出しの先端を中央寄せするCSS】

f:id:wp-lesson:20170207145310j:plain

画像でもCSSでもどちらでも可能ですが、
吹き出しなどの先端を中央寄せする方法。
 

<親要素>
  <子要素>
  </子要素>
</親要素>

 
のように、吹き出しの枠に相当するボタンなどを
親要素とし、その内側に子要素を配置して先端を
表示するタグの役目を負わせます。
 
親要素の位置を基準として子要素の位置を
指定できるようにするために、
親要素にはposition:static以外を指定し、
子要素にはposition:absoluteを指定します。
 
子要素の存在が、親要素内の他のテキスト等の
適切な配置を邪魔しないように、子要素自身の
配置は text-align でもなく margin の左右 auto
でもなく、position:absolute で指定します。
 
この場合、left: 50% でいったん親要素の左端から
半分の位置まで子要素を移動させ、子要素の横幅
のちょうど半分だけ左へ引き戻してあげれば、
理屈上も正確な中央寄せになります。
 
吹き出しの先端が横幅16pxの場合だと、

position: asbolute;
left: 50%;
margin-left: -8px;

 
とすればOKです。
 
ただしこの方法は、中央寄せする子要素の横幅に
依存します。レスポンシブで、PCとスマホとで
アイコン等の大きさが異なる場合、margin-leftを
メディアクエリで分岐させるなどいちいち注意を
払わねばなりません。
 
そこでCSS3の transform を使います。
 

position: asbolute;
left: 50%;
transform: translateX(-50%);

 
translateは、指定した要素自身のサイズを100%
とする移動を表すので、吹き出し先端の大きさに
関係なく常に吹き出し先端の横幅の半分だけ左に
移動してくれます。
 
任意のボックスの上下左右中央(ド真ん中)に
配置したいときは、親要素にposition:static以外を
指定した上で、子要素に以下を指定します。
 

position: asbolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

 
CSSデザインにおいて、position プロパティや
margin, padding などボックスモデルの概念は
photoshopなど画像ソフトで必須の「レイヤー」
と同じくらい重要です。