支援者募集中!仕事依頼はこちら

アイコン吹き出し付きボックスをHTMLとCSSで作る!レスポンシブ対応!

アイコン画像、吹き出し付きボックスをHTMLとCSSで作る カスタマイズ

ボックスにアイコンと吹き出しを付け足したものをHTMLとCSSで作ります。

アイコン、吹き出しの内容を自由に変えられるようになっています。

もちろんスマホでも見れるようにレスポンシブ対応です。

HTMLとCSSがわからなくても使えるようにいくつかサンプルを用意しました。

また、カスタマイズをしやすくするためにCSSにコメントを付け足しました。

修正情報
  • 2019/7/6:JIN対応しました
  • 2019/7/7:AMP対応しました

HTMLとCSSで作るアイコン吹き出し付きボックスデザイン

共通のCSSをコピペ

それぞれHTMLとCSSに大きな差はありません。

ですので、デザインサンプル1のコードを元に他はアレンジされています。

まずは共通のコードになるCSSをコピペしてください。

メモ

WordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

共通のCSS

/************************************
** アイコンつきリスト
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
  	display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 3% 0 0 !important;/* 余白 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 120px; /* 横幅 */
  margin:0; /* 余白 */
}
/* アイコン画像 (amp)*/
.iconballoon amp-img{
  max-width: 120px !important; /* 横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類 色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:12px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:80px;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* アイコン画像(amp) */
.iconballoon amp-img{
  max-width:80px !important;/* 横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li { 
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
	content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}

デザインサンプル1(イエロー×箇条書き記号)

美味しい白菜の見極め方
  • 重量感がある
  • 外側の葉が濃い緑色で厚みがある
  • 葉と葉が詰まっているもの
  • 株の切り口が新鮮なもの
ここに注目!!
基本となるHTML
<div class="iconbox">
<div class="box-title">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<ul class="list">
 	<li>リスト1</li>
 	<li>リスト2</li>
 	<li>リスト3</li>
</ul>
</div>
<div class="iconballoon">
<div class="balloon">
吹き出し内容
</div>
<div class="icon">アイコン画像をここに挿入</div>
</div>
</div>
</div>

文字装飾のHTML、CSSは含まれていません。

アイコン画像は<img>タグでそのまま入れてください。WordPressの場合はメディアを追加からでOK!

アイコン画像のサイズは決まりはありませんが画像の形によっては崩れる可能性があります。サンプルは円(正方形)の形になっています。

CSSの追記は必要ありません。

デザインサンプル2(ピンク×箇条書き番号)

効率の良い掃除の手順
  1. 邪魔なものを片付ける
  2. 上から下へホコリ取り
  3. 全体を掃除機がけ
  4. フローリングを床拭き
  5. 絨毯やソファーをコロコロ掛け
ここを解説!

HTML
<div class="iconbox iconbox-pink">
<div class="box-title box-head-pink">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<ol class="list-number">
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ol>
</div>
<div class="iconballoon">
<div class="balloon">
吹き出し内容
</div>
<div class="icon">アイコン画像をここに挿入</div>
</div>
</div>
</div>

1行目と2行目にclassを追加。

5行目がolタグになり、クラス名が変更されています。

CSS
/************************************
** アイコンフキダシボックス(ピンク)
************************************/
/* ボックス全体 */
.iconbox-pink{
  background: #fdf1f1 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-pink .box-head-pink{
  background: #f7bcbc !important; /* 背景色 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
  background: #f7bcbc !important; /* 背景色 */
}

デザインサンプル3(ブルー)

「了解」は目上に使ってもいい?

ビジネスマナーで「了解」という言葉は目上の人に使ってはいけない。

これ、実は間違っています。「了解致しました」は敬語として目上の人に使っていい言葉です。

間違ったビジネスマナーだね!

HTML
<div class="iconbox iconbox-blue">
<div class="box-title box-head-blue">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<p>ここにコンテンツ</p>
</div>
<div class="iconballoon">
<div class="balloon">吹き出し内容</div>
<div class="icon">アイコン画像挿入</div>
</div>
</div>
</div>

1行目と2行目にclassを追加してます(iconbox-blue、box-head-blue)。

CSS
/************************************
** アイコンフキダシボックス(ブルー)
************************************/
/* ボックス全体 */
.iconbox-blue{
  background: #f2fbff !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-blue .box-head-blue{
  background: #00bfff !important; /* 背景色 */
}

デザインサンプル4(グリーン)

猫の豆知識

猫には鎖骨がありません。鎖骨がないため狭いところに入れたり体が柔軟です。

運動能力が高いのも鎖骨がないことが一つの理由です。

ふーん!

HTML
<div class="iconbox iconbox-green">
<div class="box-title box-head-green">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
<p>ここにコンテンツ</p>
</div>
<div class="iconballoon">
<div class="balloon">吹き出し内容</div>
<div class="icon">アイコン画像挿入</div>
</div>
</div>
</div>

1行目と2行目にclassを追加してます(iconbox-green、box-head-green)。

CSS
/************************************
** アイコンフキダシボックス(グリーン)
************************************/
/* ボックス全体 */
.iconbox-green{
  background: #eafaf7 !important; /* 背景色 */
}
/* ボックスタイトル */
.iconbox-green .box-head-green{
  background: #2fcdb4 !important; /* 背景色 */
}

デザインサンプル5(背景&吹き出しなし)

美味しいトウモロコシの見極め方
葉の緑色が濃いもの、そして粒が均等で指で押してみて少し凹むくらいがGood!穂先が濃い茶色、かつ縮れてるのもがオススメです。

HTML
<div class="iconbox iconbox-bg-none">
<div class="box-title">ここにタイトル</div>
<div class="iconbox-wrap">
<div class="box-content">
ここにコンテンツ
</div>
<div class="iconballoon">
<div class="icon">アイコン画像を挿入</div>
</div>
</div>
</div>

1行目目にclassを追加してます(iconbox-bg-none)。

このように<div class=”balloon”>吹き出し内容</div>を削除すれば吹き出しを消すこともできます。

CSS
/************************************
** アイコンフキダシボックス(背景なし)
************************************/
/* ボックス全体 */
.iconbox-bg-none{
  background: none !important; /* 背景色 */
}

デザインサンプル6(イエロー×タイトルなし)

  • うまい!やすい!はやい!
  • みんなの食卓でありたい。
  • おいしくって、あんしん。
つゆだくで!

HTML
<div class="iconbox">
<div class="iconbox-wrap">
<div class="box-content">
<ul class="list">
 	<li>リスト1</li>
 	<li>リスト2</li>
 	<li>リスト3</li>
</ul>
</div>
<div class="iconballoon">
<div class="balloon">吹き出し内容</div>
<div class="icon">アイコン画像挿入</div>
</div>
</div>
</div>

このように<div class=”box-title”>ここにタイトル</div>を消せばタイトルを非表示にできます。

ボックスの背景色を変える方法

背景色など色を変えたい場合はCSSの一部を変更します。

例えばデザインサンプル1の色を変えたい場合

全体の薄い背景部分

.iconbox{
  margin: 2em auto; /* 余白 */
  background: #fef9ed; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}

CSSの「.iconbox」のbackgroundのカラーコードを変更します。

例えば白の場合は「background: #ffffff;」になります。

タイトルの濃い背景部分

/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #fdc44f; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}

タイトルの背景色は「.iconbox .box-title」のbackgroundのカラーコードを変更すればOK!

文字の色を変えたい場合は文字色と書いてあるcolorのカラーコードを変更してください。

吹き出しの形や色を変えたい場合

吹き出しは「吹き出しデザインジェネレーター」を使っています。

参考 吹き出しデザインジェネレーター

クラス名を「iconballoon」で作り、CSSを置き換えてください。


/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類 色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}

WordPressで繰り返し使いたい場合はプラグイン「AddQuicktag」がオススメ

ブログでWordPressを使っている場合はプラグイン「AddQuicktag」がオススメです。

HTMLを記録しておいてボタン一つで呼び出せるプラグインです。

詳細は下記記事をご覧ください。

あわせて AddQuicktagの使い方と設定方法!Gutenbergでの使い方も紹介するよ!

AddQuicktagの使い方と設定方法!Gutenbergでの使い方も紹介するよ!
AddQuicktagの使い方と設定方法をわかりやすく説明します!WordPressの必須プラグインと言われているAddQuicktag!設定は簡単で超便利、超時短になります。Gutenbergでの使い方も紹介します!

他にもカスタマイズやってます!

他にもカスタマイズをやってますので良かったらご覧ください!

関連 tableタグを使わない比較表デザイン!レスポンシブ対応!

【HTML/CSS】tableタグを使わない比較表デザイン!レスポンシブ対応!
HTMLとCSSで比較表を作りました!比較表はtableタグで作ることが一般的ですがtableタグは使いません!コピペで出来るようにサンプルをいくつか用意しました。スマホでも使えるようにレスポンシブ対応になっています。 好きにカスタマイズして使ってください!

関連 Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!

Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. 記事冒頭にぴったりのデザインで早速使わせて頂きました。もし可能であればはてなブログ用があると助かります。現状でも機能しますが、アイコンのサイズがおかしくなってしまうようです。

    • ありがとうございます。
      もしよろしければ該当するURLを教えていただいでもよろしいでしょうか?

  2. はじめまして!
    サイコーです!
    CSSのコピペって、たいていエラーが出てイライラしちゃうけど
    ぽんひろさんのはすんなりで、気持ちいいくらいでした!
    ありがとうございます!!

    • >ちまめさん

      コメントありがとうございます!
      エラーでるとイライラしますよね!笑

      上手くいって良かったです!

ページトップへ