更新日: 2022年09月09日
公開日: 2017年08月29日

CSSだけで吹き出しをつくる！デザインサンプル26個

CSSだけでつくれる「吹き出し」のデザインサンプルを26個、用意しました！
どのサンプルもコピペで利用することができますので、デザインの参考にぜひ取り入れてみてください。

コピペでOK！CSSだけで吹き出しをつくる！
普通の吹き出し
枠線付きの吹き出し
角丸の吹き出し
三角アイコンを中心に表示
会話風の吹き出し
影付きの吹き出し
マウスオーバーで表示
まん丸吹き出し
心の声
曲がったアイコン
グラデーション
簡単作成！吹き出しジェネレータのご紹介
シンプルな吹き出しを作るならこれ！
様々な三角形を簡単作成！
グラデーションジェネレータの鉄板！
まとめ

コピペでOK！CSSだけで吹き出しをつくる！

HTMLとCSSだけで作れる吹き出し のサンプルをご紹介します！サンプルのコードをコピー＆ペーストするだけで使える吹き出しを20個以上！シンプルなものから、枠線、丸、影付きなど様々なバージョンをご用意しました。

これから紹介する全ての吹き出しは レスポンシブに対応 しています！

普通の吹き出し

まず、一番シンプルな吹き出しのサンプルです。 balloonクラスのdivを吹き出し本体とし、balloonの before疑似要素 で三角のアイコンを表現します。

balloon.html

<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>上にアイコン
</div>

balloon.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
}

/* beforeで三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff3ad;
  border-left: 15px solid transparent;
}

上下左右にアイコンを並べる

beforeの位置と形を調整することで、上下左右好きな位置の吹き出しを作ることができます。

※ balloon.css のbeforeを書き換えます。

balloon.css

/* アイコンを右に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* アイコンを下に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #fff3ad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

/* アイコンを左に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

横幅を自動変更

また、 display: inline-block; を指定すると、 内包する要素に合わせて横幅が伸び縮みします 。吹き出しを横幅いっぱいに伸ばしたくないときなどに利用できます。

balloon.html

<div class="balloon">
  CSSだけで吹き出しをつくる
  <br>文字数に合わせて横幅を自動で変更
</div>

balloon.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  display: inline-block;     /* 横幅を自動で変更 */
}

/* beforeで三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff3ad;
  border-left: 15px solid transparent;
}

枠線付きの吹き出し

続いて、枠線付きの吹き出しのサンプルです。シンプルな吹き出しでは before疑似要素 のみで三角アイコンを表現しましたが、今回は枠線を表現するために after疑似要素 も使用します。

balloon2.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 枠線
  <br>上にアイコン
</div>

balloon2.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
}

/* beforeで枠線の三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ca8888;
  border-left: 15px solid transparent;
}

/* beforeで本体の三角を表現 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -12px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ffadad;
  border-left: 15px solid transparent;
}

枠線の吹き出しは、 本体のボーダー ＋ 線の色で塗りつぶした三角 ＋ 背景色を塗りつぶした三角 で構成されています。線の色で塗りつぶした三角と、背景色を塗りつぶした三角を少しずらして重ねることで、線を表現します。

枠線のしくみ

上下左右にアイコンを並べる

もちろん枠線付きの吹き出しも、上下左右の好きな位置に三角アイコンを配置できます。

※ balloon2.css のbeforeとafterを書き換えます。

balloon2.css

/* アイコンを右に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -12px;
  top: 20px;
  border-left: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


/* アイコンを下に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #ca8888;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -12px;
  border-top: 15px solid #ffadad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

/* アイコンを左に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

角丸の吹き出し

普通の吹き出しも枠線付きの吹き出しも、 border-radius プロパティを指定することで吹き出しに丸みがつきます。こうすることで、普通の吹き出しよりもぐっと柔らかい表現にすることができます。

balloon3.html

<div class="balloon1">
  CSSだけで吹き出しをつくる
  <br>角丸もOK
</div>

<div class="balloon2">
  CSSだけで吹き出しをつくる - 枠線
  <br>角丸もOK
</div>

balloon3.css

/* 吹き出し本体 - 普通の吹き出し */
.balloon1{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  border-radius: 10px;         /* 角丸を指定 */
}
/* 三角アイコン - 普通の吹き出し */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


/* 吹き出し本体 - 枠線付きの吹き出し */
.balloon2{
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
  border-radius: 10px;         /* 角丸を指定 */
}
/* 三角アイコン - 枠線付きの吹き出し */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon2::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

三角アイコンを中心に表示

三角アイコンの位置を 常に中心に配置する 事もできます。

balloon4.html

<div class="balloon1">
  CSSだけで吹き出しをつくる - 枠線
  <br>アイコンを左右の中心へ配置
</div>

<div class="balloon2">
  CSSだけで吹き出しをつくる - 枠線
  <br>アイコンを上下の中心へ配置
  <br>アイコンを上下の中心へ配置
</div>

balloon4.css

/* 吹き出し本体 - 左右の中心 */
.balloon1{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}
/* 三角アイコン - 左右の中心 */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #fff3ad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}


/* 吹き出し本体 - 上下の中心 */
.balloon2{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
}
/* 三角アイコン - 上下の中心 */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 50%;
  margin-top: -15px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

会話風の吹き出し

吹き出しの横に画像を配置して、チャットの会話風の吹き出しを作ります。吹き出しの左（もしくは右）に余白を設け、そこに 絶対配置 で画像を配置して喋っているように見せます。

※実際に使用する画像の大きさに合わせてや位置や余白を調整してください。サンプルでは縦横84pxの画像を使用しています。

balloon5.html

<div class="balloon1">
  <div class="icon"> <!-- ●ここに画像を挿入● --> </div>
  CSSだけで吹き出しをつくる - 会話風
  <br>左に画像
</div>


<div class="balloon2">
  <div class="icon"> <!-- ●ここに画像を挿入● --> </div>
  CSSだけで吹き出しをつくる - 会話風
  <br>右に画像
</div>

balloon5.css

/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #0888ff;
  margin-left: 110px;          /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #0888ff;
  margin-right: 110px;          /* 右に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  right: -110px;
  top: 0;
op: 0;
}
/* 三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #0888ff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

影付きの吹き出し

くっきりした影

くっきりした影がついている吹き出しです。見出しなどにも使えそうですね。

balloon6.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 影付き
  <br>くっきりした影
</div>

balloon6.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  border-radius: 10px;
  box-shadow: 6px 6px 0px 0px #318c30;         /* 吹き出し本体の影 */
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 27px;
  bottom: -18px;
  border-top: 15px solid #318c30;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
/* 三角アイコンの影 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #bdffad;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

ほんわかした影

ほんわかした影がついている吹き出しです。くっきりした影の吹き出しと違い三角アイコンに影はありませんが、さほど違和感はありません。

balloon6.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 影付き
  <br>ほんわかした影
</div>

balloon6.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #bdffad;
  box-shadow: 0px 0px 10px 0px #a7a7a7;         /* 吹き出し本体の影 */
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #bdffad;
  border-left: 15px solid transparent;
}

マウスオーバーで表示

マウスオーバーすると、三角のアイコンがニョキッと出て来る吹き出しです。

balloon7.html

<div class="balloon">
  CSSだけで吹き出しをつくる - マウスオーバーで表示
  <br>上にアイコン
</div>

balloon7.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #ecadff;
}
/* 三角アイコン */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  transition: all .2s ease;
  left: 20px;
  top: 0px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ecadff;
  border-left: 15px solid transparent;
}
/* ホバー時に三角アイコンの位置を変える */
.balloon:hover::before{
  top: -15px;
}

まん丸吹き出し

丸の吹き出しアイコンです。ワンポイントに使えますね！

widtとheightに同じ値を指定 し、 border-radiusを50% にすることで正円にしています。さらに line-height を height と同じ値にすることで、テキストを上下の中心に配置しています。

サンプルでは三角アイコンを回転して斜めにしていますが、上下や左右に配置しても素敵なアイコンになりそうですね！

balloon8.html

<div class="balloon1">
  CHECK
</div>

<div class="balloon2">
  POINT
</div>

<div class="balloon3">
  LOOK
</div>

<div class="balloon4">
  GOOD
</div>

balloon8.css

/* CHECK */
.balloon1{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  bottom: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}


/* POINT */
.balloon2{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}


/* LOOK */
.balloon3{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon3::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 2px;
  top: 2px;
  border-right: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(45deg);
}


/* GOOD */
.balloon4{
  position: relative;
  padding: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-size: 14px;
  background-color: #ff9800;
}
.balloon4::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 2px;
  top: 2px;
  border-left: 20px solid #ff9800;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-45deg);
}

心の声

（´-`）.｡oO（心の中で思っていることなどを表現するときの吹き出しです）

balloon9.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 心の中
  <br>心の中で思ってることなど
</div>

balloon9.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #ade0ff;
  border-radius: 30px;
}
/* 大きい丸 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -35px;
  bottom: 15px;
  width: 30px;
  height: 30px;
}
/* 小さい丸 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -55px;
  bottom: 10px;
  width: 15px;
  height: 15px;
}

曲がったアイコン

三角の部分がちょっと曲がった、おしゃれな吹き出しです。

balloon10.html

<div class="balloon">
  CSSだけで吹き出しをつくる - 曲がったアイコン
  <br>左上にアイコン
</div>

balloon10.css

/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 20px;
  background-color: #107b5e;
  color: #ffffff;
  border-radius: 10px;
}
/* 色付きの半円 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 20px;
  top: -15px;
  border-left: 20px solid #107b5e;
  border-top: 20px solid #107b5e;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
/* 白い半円 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  left: 35px;
  top: -20px;
  border-left: 20px solid #ffffff;
  border-top: 20px solid #ffffff;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

before疑似要素 と after疑似要素 を使用し、色付きの半円と白色の半円をずらして重ねてアイコンを表現しています。

枠線のしくみ

グラデーション

グラデーションの吹き出しです。グラデーションの開始（もしくは終了）の色と三角アイコンの色を合わせることで違和感なくグラデーションにすることができます。

縦方向のグラデーションで横にアイコンを持ってくると、吹き出し本体とアイコンの境目がくっきりしてしまうので避けたほうが無難でしょう。

balloon11.html

<div class="balloon1">
  CSSだけで吹き出しをつくる - グラデーション
  <br>上にアイコン
</div>

<div class="balloon2">
  CSSだけで吹き出しをつくる - グラデーション
  <br>下にアイコン
</div>

balloon11.css

/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 100%);
  color: #ffffff;
}
/* グラデーションの開始の色に合わせた三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #b3dced;
  border-left: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 100%);
  color: #ffffff;
}
/* グラデーションの終了の色に合わせた三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #29b8e5;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

簡単作成！吹き出しジェネレータのご紹介

毎日CSSを触ってる人なら難なく作れてしまう吹き出しですが、普段はあまりHTMLやCSSを触らないという人にとっては少しとっつきにくいもの。そんな人でも 吹き出し作成をサポートしてくれるジェネレーター があるのでご紹介します！

シンプルな吹き出しを作るならこれ！

CSS ARROW PLEASE!

URL：http://www.cssarrowplease.com/

吹き出しそのものを作れるジェネレータです。シンプルなUIで簡単に吹き出しが作れます。

様々な三角形を簡単作成！

CSS三角形作成ツール

URL：http://apps.eky.hk/css-triangle-generator/ja

様々な形の三角形がとても簡単につくれます。意外と混乱する三角形をボタンひとつで作れます。

グラデーションジェネレータの鉄板！

Ultimate CSS Gradient Generator

URL：http://grad3.ecoloniq.jp/

豊富なプリセットが最初から用意されているので初心者でも安心。カスタマイズも容易で、よく使うグラデーションをプリセットとして保存しておけるのでとても便利です。ベンダープレフィクスなども合わせて生成されるので余計なことを考えなくてもOK！

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

CSSだけで通常・枠線・正円・影・マウスオーバーなどなど、レスポンシブに対応した様々な吹き出しを作れることがわかりました。

コピペだけでなく、ジェネレータなどを活用してオリジナルの吹き出しづくりも楽しんでください！

【関連記事】：素人でもプロ並みの配色ができるデザインパターン参考サイト21選

素人でもプロ並みの配色ができるデザインパターン参考サイト21選

Webデザインで大変重要な要素の一つ、配色。ベテランデザイナーでさえ一度配色に悩んでしまうと悪循環からなかなか抜け出せないときもあるほど難しい世界です。その奥深さを象徴するかのように、Web上には配色に関するツール・サイトが数多く公開されています。覚えておくとイザというときに役に立つ、無料のオンラインツール・サイトをご紹介します。

【関連記事】：【2022年最新版】今学ぶべきプログラミング言語ランキング

【2022年最新版】今学ぶべきプログラミング言語ランキング

数あるプログラミング言語の中から、よく利用されている2021年注目の言語をピックアップしてみました。プログラミングに興味のある方、ちょっと始めている方にとって参考になると思います。また今回は各言語の説明だけでなく、各言語の活用事例を紹介したり、編集可能なサンプルコードを紹介することで、よりイメージしやすいようにまとめてみました。今まで体験したことのない言語がありましたら、お試し下さい！

「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで

未経験からエンジニアへの転職を実現している人は、どのようにプログラミングを身に着けて転職を成功させているのでしょうか？今回はCodeCampGATE(現：エンジニア転職コース)の1期生として、エンジニアへ転職した三吉愛さんにプログラミング学習・転職の経験談を伺いました。過去にはビジネスコンテストで優勝した経験もあり、チャレンジ精神が旺盛な彼女がどのようにエンジニアとしての転職を実現したのかを語っていただきました。 ※三吉さんが受講したコースは[CodeCampGate(現：エンジニア転職コース)](https://codecamp.jp/courses/engineer)です。このコースの特徴は - 4ヶ月に及ぶ基礎学習と実践演習 - 計40回のマンツーマンレッスン - 職務経歴書の添削、模擬面接、エンジニアメンターによる推薦状の作成、など充実したキャリアサポート未経験からエンジニアに転職するまでを徹底的に支援するコースです。コース詳細はこちらから確認してみてください！ ▶︎https://codecamp.jp/courses/engineer [![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/9901/0e8d3a419c4954dc2561fedc66fd56eebfc73cc7.9930.desktop.png)](http://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=a5964631fbbe7b)