【Web制作過程】CSSを書いて見た目を整える【3ページ目】

こんにちは。コンスキです。

今回は、前回作った要素にCSSでスタイルを適用することで見た目を整えていきます。

画像を入れる
吹き出しを作る
位置の調整
メインビジュアルを変える

画像を入れる

CSSを書く前に、img要素のsrc属性に画像のパスを入れます。

吹き出しを作る

CSSで枠線を作ることで吹き出しっぽくします。

次のようなスタイルを効かせます。

#going_to {
  width: 296px;
  height: 293px;
  background-color: #fff;
  border: 1px solid #707070;  
}
.balloon_over {
  position: relative;
  width: 305px;
  height: 293px;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #707070;  
}
.balloon_over:before {
  content: "";
  position: absolute;
  top: 15%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  z-index: 2;
}
.balloon_over:after {
  content: "";
  position: absolute;
  top: 15%;
  left: -28px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #707070;
  z-index: 1;
}
.balloon_under {
  position: relative;
  width: 305px;
  height: 293px;
  background-color: #fff;
  border: 1px solid #707070;  
  filter: drop-shadow(15px 15px 0 #FFEDDE);
}
.balloon_under::before {
  content: "";
  position: absolute;
  top: 15%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}
.balloon_under::after {
  content: "";
  position: absolute;
  top: 15%;
  right: -28px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #707070;
  z-index: 1;
}
#coming_from {
  width: 296px;
  height: 293px;
  background-color: #fff;
  border: 1px solid #707070;  
}

ブラウザに表示すると次のようになります。

位置の調整

吹き出しの位置を調整します。

#balloon {
  display: flex;
  justify-content: space-between;
  width: 704px;
  height: 2258px;
  margin: 106px auto;
}
#balloon_over_row,
#balloon_under_row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

ブラウザに表示すると次のようになります。