oshushichangのブログ

プログラマになるため、勉強した内容を日報として家庭用esaに記録し、旦那からFBを貰っている日々を綴っています。

0701日報

日報

やったこと

やったこと ないよう さんこう
CSSの基本を理解する CSSだけで三角形を作ろう! CSSだけで三角形を作ろう!その2:吹き出しやリボンをデザインする | 株式会社グランフェアズ

こまったこと・わかったこと

吹き出しの三角形がうまくつかない

  • 参考通りにコードを書いたが下図のように吹き出し部分が離れてしまった。吹き出しの下が自分が実際に書いたコード。

f:id:oshushichang:20180710061401p:plain

f:id:oshushichang:20180710061412p:plain

  • 参考サイトに記載されていた codepen を確認したところ CSS のコードの内容は同じだったが、下図の通りデベロッパーツールに表示されている要素と padding のサイズが参考サイトとは違っていた。

f:id:oshushichang:20180710061424p:plain

  • 実際にデベロッパーツールに表示されている内容に合わせて、下記の通りにコードを変更したところ吹き出しにうまく三角がくっついた!
/* まんまるの吹き出し */
.balloon2 {
  position: relative;
  width: 64px; /* 120px -> 64px に変更 */
  height: 64px; /* 120px -> 64px に変更 */
  background: #ef887e;
  padding: 28px; /* 2em -> 28px に変更 */
  line-height: 60px;
  text-align:center;
  border-radius: 50%;
}
.balloon2:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: 3px;
  bottom: 3px;
  border-style: solid;
  border-color: transparent transparent transparent #ef887e;
  border-width: 10px 0 10px 17.32px;
  transform: rotate(45deg);
}

ひとこと

  • codepen で書かれているコード(= 参考サイトに見本で載せてあるコード)とデベロッパーツールで見た内容に差分がなんであるのか全然わからなかった。CSS むずかしい!!!

旦那より

  • とくになし

今日のまとめ

  • 結局この問題はbox-sizing: border-box;を自分が指定していなかったからだった... reset.css に組み込まれていた事に気づいていなかった(reset.css をこのときは未だ知らなかった)