HTMLでタイトル付きの枠のデザインが崩れてしまいます。

Question

ワードプレスでHTMLを使ってタイトル付きの枠を付けたいのですが
タイトルと枠が画像の通り離れてしまいます。

試したHTML↓

<div style="height:12px;">
<span style="margin-left:8px; padding:6px 10px; background:#ef858c; color:#ffffff; font-weight:bold;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">タイトル</span>
</div>
<div style="border:2px solid #ef858c; padding:10px 12px 10px; font-size:0.85em;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">
<span style="font-size: 16px;">サンプル1</span><br /><span style=" font-size: 16px;">サンプル２</span>
</div>

本当は上記のように、なってほしいのですが調べても分からず出来ませんでした。
どなたか修正お願いいたします。

テーマはCocoonです。

Answer 1

こんな感じ？

<section class="box">
  <dl>
    <dt>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dt>
    <dd>
      <ol>
        <li>サンプル1</li>
        <li><a href="">サンプル2</a></li>
      </ol>
    </dd>
  </dl>
</section>

.box {
  margin:0 auto;
  width:90%;
}
.box dl dt {
  display:inline-block;
  margin:0 8px;
  padding:6px 10px;
  background-color:#ef858c;
  border-radius:5px;
  color:#fff;
  font-weight:bold;
  transform:translateY(15px);
}
.box dl dd {
  padding:20px 10px 10px;
  border:2px solid #ef858c;
  border-radius:5px;
  font-size:.75em;
}
.box dl dd ol {
  list-style-type:none;
}

ブラウザを縮めると分かりますが、タイトルが複数行になっても大丈夫。

Comments

[cote33]

回答いただいてありがとうございました。
やってみましたが枠の中にまた枠が出来てしまいました。
でも他の方法でできましたのでご報告させていただきます。
せっかく回答いただいたのにすみませんでした。

[LibertyBell3]

ちゃんと、上記のソースだけで試しましたか？
自身でインライン記述したCSSの当たったdivをそのまま入れたりしないと
そんなことにはなりませんよ。

[cote33]

枠の中にまた枠が出来てしまっています。
多分、箇条書きが反映されてしまっているようです。
私の質問は解決しましたのでご報告します。
ありがとうございました。

[cote33]

すみません。
箇条書きのHTMLを消したら出来ました。
ありがとうございます。

[LibertyBell3]

ここの初めに書かれたような回答だと、不具合があるものを
教えたように取られてしまいかねないので、お気を付けください。
検証する際は、最低限の記述のみで行えばこのようにはならないはずです。

Answer 2

本来と使用方法が違うのであんまやっちゃいけないのかもしれませんが
fieldset/legendではダメですか？
※cssがなくてもタイトル付きフィールドになります

<style>
legend{
margin-left:8px;
padding:6px 10px;
background:#ef858c;
color:#ffffff;
font-weight:bold;
border-radius:5px;
}
fieldset{
border:2px solid #ef858c;
padding:10px 12px 10px;
font-size:0.85em;
border-radius:5px;
}
fieldset span{
font-size: 16px;
}
</style>
<fieldset>
<legend>タイトル</legend>
<span>サンプル1</span><br>
<span>サンプル２</span>
</fieldset>

Comments

[cote33]

回答いただいてありがとうございます。
試してみましたが出来ませんでしたが他の方法で出来ました。
回答いただいたのにすみませんでした。

Answer 3

CSSがきちんと適用されれば希望通りのデザインになるかと思います。
ブラウザの検証ツールを使って、打ち消されているスタイルがないか確認してください。

Comments

[cote33]

回答いただいてありがとうございます。
検証ツールでチェックを外したり探ってみて
CSSシートに下記を追加して変更できました。

.entry-content> *, .demo .entry-content p {
margin-top:0.2em;
margin-bottom:0.5em;
}

デザインが崩れた時は今度から検証してみますね。
本当にありがとうございました。

[H40831]

検証ツールで検証するコツを掴んで頂けたようでうれしいです。