見出し付きリストボックスの作り方とサンプルコード【Cocoon】

見出し付きボックス・見出し付きリストボックスのサンプルと作り方を紹介します。

見出し付きボックスの作り方

まずリストを作って
それを「htmlとして編集」
前後にコードを追加して完成

文章や画像を入れる事も可能です。シンプルなデザインの方が誇張が少なくて見やすいと思います。

ボックスのサンプルコード
見出し付きリストボックスの作り方
完成イメージ

ボックスのサンプルコード

まずは何パターンかデザインを作成しておきます。追加CSSか子テーマのスタイルシートにコードを追加します。

以下サンプルコードの「ul」「ol」「li」系は無くても大丈夫ですが、ボックスの枠とその中身 (リストや段落) の位置調整用に追加しています。必要に応じて値を変えるか削除してください。

ベーシックな見出し付きボックス

ここに見出し

ここに内容が表示されます。リストや画像を挿入するのも良いですね。まずはコピペですが、自分なりにカスタマイズしていくとより良いものが出来ると思います。

/*見出し付きボックス1*/
.boxw {
  position: relative;
  margin: 10px 0px;
  border: solid 3px #fc9db8;
  padding: 15px 5px 10px 10px;
}
.boxw .box-title {
  position: absolute;
  display: inline-block;
  top: -8px;
  left: 13px;
  line-height: 1;
  font-size: 17px;
  background-color: #fff;
  color: #6f89a2;
  font-weight: bold;
  padding: 0 5px;
}

アイコン&見出し付きボックス

ここに見出し

シンプルなデザインですが、それなりに目に留まります。全体感を損なわずにアクセントを付けたい場合などに使えます。

/*見出し付きリスト2*/
.boxw2 {
  position: relative;
  margin: 1em auto;
  padding: 35px 5px 5px 11px;
  background: #ffe5ee;
  border-radius: 1.5px;
  max-width: 600px;
}
.boxw2 .box-title {
  position: absolute;
  display: inline-block;
  top: 0.6em;
  left:2.2em;
  line-height: 1.5;
  color: #444;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11pt;
}
.boxw2 .box-title:before {
  font-family: FontAwesome;
  position: absolute;
  content: "\F27a";
  color: #696969;
  font-weight: bold;
  left : -1.3em;
}
.boxw2 li {
  background: transparent;
}

タイトルが目立つ見出し付きボックス

ここに見出し見出しに色が付くとアクセントも強まってかなり目立つものになりますね。特に見てほしい重要なポイントなど

 /*見出し付きリスト3*/
.boxw3 {
  margin: 1em auto;
  background: #fef9ed;
  border-radius:4px;
  border: solid #fc9db8 1px;
  max-width:600px;
  padding: 40px 5px 10px 10px;
  position:relative;
}
.boxw3 .box-title {
  background: #fc9db8;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 2.5em;
  padding: 1px;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  font-family: 'Noto Sans JP', sans-serif;
}

.boxw3 ul li {
  background: #fef9ed;
  color: #333;
  font-size: 15px;
  font-family: 'Noto Sans JP', sans-serif;
}
.boxw3 li::before {
  color: #fc9db8;
}

スマートな見出し×2個付きボックス

クリア条件

ウィルス×45 (赤・水色・緑)
コイン×20

ドクター・サポート

ドクターワリオ
キラー・マグナムキラー

いつもは人の真似から入るのですが、「こういうのを作りたい！」と思い頑張って作ってみました。

CSS

/*見出し付きリスト4*/
.boxm {
  position: relative;
  margin: 0.5em auto;
  padding: 1.8em auto;
  max-width: 600px;
  border: 10px #f2f2f2 solid;
}
.boxm .box-title {
  position: relative;
  display: inline-block;
  background: #f2f2f2;
  color: #5f5f5f;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9pt;
  font-weight: bold;
  border-radius: 20px;
  padding: 2px 1em;
  margin: 0.5em;
}
.boxm ul {
  background: transparent;
  font-size: 9pt;
  margin-left: 1em;
}

HTML

<div class="boxm">
<span class="box-title">見出し①</span>
<ul><li>リスト①</li>
<li>リスト②</li></ul>
<span class="box-title">見出し②</span>
<ul><li>リスト③</li>
<li>リスト④</li></ul></div>

※リスト自体もカスタマイズしてあるので、完成イメージは少し異なります

左右の余白も背景色で塗りつぶし

ここに見出し

例えば背景色を黒にして左右の余白も無くすとガラッと雰囲気も変わってかなり目立ちます。

/*見出し付きリスト5*/
.boxw5 {
  margin: 10px -12.5px;
  background: #000;
  position:relative;
  padding : 5em 0.5em 1em 1em;
}
.boxw5 .box-title {
  background: #000;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  margin-top: -3em;
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
}
.boxw5 p {
  background: #000;
  color: #fff;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
}