ブログ

【HTML】タイトル付きボックス(囲み枠)『24パターン』

  /

ブログ作成で、読者にカッコいいと思わせるHTMLを紹介します。

今回は、タイトル付き囲み枠。

タイトル付き囲み枠
こんな感じのやつです。

それぞれ

✔　実線の角が丸いもの
✔　角が四角いもの
✔　点線の角が丸いもの
✔　点線の角が四角いもの

を、各6色掲載しました。

使いたい囲み枠の中のタグをそのままコピペするだけですので、ご自由にお使いください。

CSS/HTML勉強におすすめの本

・「HTMLとCSSは少しなら分かる」という初心者〜中級者にオススメの本
・「実際にWebサイトをイチから作ってみよう」というコンセプト
・読みながら手を動かすという実習書的な要素が強い
・WEB制作の流れを掴むにはとても良い本。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
created by Rinker

あわせて読みたい

【無料あり】30代からエンジニアになった僕がおすすめするプログラミングスクール4社 | 今から学んでも遅くない

タイトル付き囲み枠

実線の角が丸いもの

タイトル
<div style=”background:#8C8C8C; padding:5px 10px; border:2px solid #8C8C8C; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#E7E8E2; padding:10px; border-right:2px solid #8C8C8C; border-bottom:2px solid #8C8C8C; border-left:2px solid #8C8C8C; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff9824; padding:5px 10px; border:2px solid #ff9824; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe5c7; padding:10px; border-right:2px solid #ff9824; border-bottom:2px solid #ff9824; border-left:2px solid #ff9824; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#0060f0; padding:5px 10px; border:2px solid #0060f0; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#cde1fe; padding:10px; border-right:2px solid #0060f0; border-bottom:2px solid #0060f0; border-left:2px solid #0060f0; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#4bbe41; padding:5px 10px; border:2px solid #4bbe41; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#dff3dd; padding:10px; border-right:2px solid #4bbe41; border-bottom:2px solid #4bbe41; border-left:2px solid #4bbe41; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff75ef; padding:5px 10px; border:2px solid #ff75ef; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe0fb; padding:10px; border-right:2px solid #ff75ef; border-bottom:2px solid #ff75ef; border-left:2px solid #ff75ef; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff3d5e; padding:5px 10px; border:2px solid #ff3d5e; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffd1d9; padding:10px; border-right:2px solid #ff3d5e; border-bottom:2px solid #ff3d5e; border-left:2px solid #ff3d5e; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

角が四角いもの

タイトル
<div style=”background:#8C8C8C; padding:5px 10px; border:2px solid #8C8C8C; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#E7E8E2; padding:10px; border-right:2px solid #8C8C8C; border-bottom:2px solid #8C8C8C; border-left:2px solid #8C8C8C;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff9824; padding:5px 10px; border:2px solid #ff9824; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe5c7; padding:10px; border-right:2px solid #ff9824; border-bottom:2px solid #ff9824; border-left:2px solid #ff9824;”><div>内容本文</div></div>

タイトル
<div style=”background:#0060f0; padding:5px 10px; border:2px solid #0060f0; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#cde1fe; padding:10px; border-right:2px solid #0060f0; border-bottom:2px solid #0060f0; border-left:2px solid #0060f0;”><div>内容本文</div></div>

タイトル
<div style=”background:#4bbe41; padding:5px 10px; border:2px solid #4bbe41; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#dff3dd; padding:10px; border-right:2px solid #4bbe41; border-bottom:2px solid #4bbe41; border-left:2px solid #4bbe41;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff75ef; padding:5px 10px; border:2px solid #ff75ef; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe0fb; padding:10px; border-right:2px solid #ff75ef; border-bottom:2px solid #ff75ef; border-left:2px solid #ff75ef;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff3d5e; padding:5px 10px; border:2px solid #ff3d5e; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffd1d9; padding:10px; border-right:2px solid #ff3d5e; border-bottom:2px solid #ff3d5e; border-left:2px solid #ff3d5e;”><div>内容本文</div></div>

点線の角が丸いもの

タイトル
<div style=”background:#8C8C8C; padding:5px 10px; border:2px solid #8C8C8C; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#E7E8E2; padding:10px; border-right:2px dashed #8C8C8C; border-bottom:2px dashed #8C8C8C; border-left:2px dashed #8C8C8C; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff9824; padding:5px 10px; border:2px solid #ff9824; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe5c7; padding:10px; border-right:2px dashed #ff9824; border-bottom:2px dashed #ff9824; border-left:2px dashed #ff9824; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#0060f0; padding:5px 10px; border:2px solid #0060f0; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#cde1fe; padding:10px; border-right:2px dashed #0060f0; border-bottom:2px dashed #0060f0; border-left:2px dashed #0060f0; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#4bbe41; padding:5px 10px; border:2px solid #4bbe41; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#dff3dd; padding:10px; border-right:2px dashed #4bbe41; border-bottom:2px dashed #4bbe41; border-left:2px dashed #4bbe41; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff75ef; padding:5px 10px; border:2px solid #ff75ef; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe0fb; padding:10px; border-right:2px dashed #ff75ef; border-bottom:2px dashed #ff75ef; border-left:2px dashed #ff75ef; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff3d5e; padding:5px 10px; border:2px solid #ff3d5e; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffd1d9; padding:10px; border-right:2px dashed #ff3d5e; border-bottom:2px dashed #ff3d5e; border-left:2px dashed #ff3d5e; border-radius:0px 0px 10px 10px;”><div>内容本文</div></div>

点線で角が四角いもの

タイトル
<div style=”background:#8C8C8C; padding:5px 10px; border:2px solid #8C8C8C; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#E7E8E2; padding:10px; border-right:2px dashed #8C8C8C; border-bottom:2px dashed #8C8C8C; border-left:2px dashed #8C8C8C;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff9824; padding:5px 10px; border:2px solid #ff9824; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe5c7; padding:10px; border-right:2px dashed #ff9824; border-bottom:2px dashed #ff9824; border-left:2px dashed #ff9824;”><div>内容本文</div></div>

タイトル
<div style=”background:#0060f0; padding:5px 10px; border:2px solid #0060f0; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#cde1fe; padding:10px; border-right:2px dashed #0060f0; border-bottom:2px dashed #0060f0; border-left:2px dashed #0060f0;”><div>内容本文</div></div>

タイトル
<div style=”background:#4bbe41; padding:5px 10px; border:2px solid #4bbe41; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#dff3dd; padding:10px; border-right:2px dashed #4bbe41; border-bottom:2px dashed #4bbe41; border-left:2px dashed #4bbe41;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff75ef; padding:5px 10px; border:2px solid #ff75ef; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffe0fb; padding:10px; border-right:2px dashed #ff75ef; border-bottom:2px dashed #ff75ef; border-left:2px dashed #ff75ef;”><div>内容本文</div></div>

タイトル
<div style=”background:#ff3d5e; padding:5px 10px; border:2px solid #ff3d5e; color:#fff; font-weight:bold;”><div>タイトル</div></div><div style=”background:#ffd1d9; padding:10px; border-right:2px dashed #ff3d5e; border-bottom:2px dashed #ff3d5e; border-left:2px dashed #ff3d5e;”><div>内容本文</div></div>

CSS/HTML勉強におすすめの本

・「HTMLとCSSは少しなら分かる」という初心者〜中級者にオススメの本
・「実際にWebサイトをイチから作ってみよう」というコンセプト
・読みながら手を動かすという実習書的な要素が強い
・WEB制作の流れを掴むにはとても良い本。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
created by Rinker

あわせて読みたい

【無料あり】30代からエンジニアになった僕がおすすめするプログラミングスクール4社 | 今から学んでも遅くない

RELATED POST