0414_51

2018/4/14 更新

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

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

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

それぞれ

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

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

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


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

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


タイトル付き囲み枠

実線の角が丸いもの

タイトル
<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制作の流れを掴むにはとても良い本。



 ▼ 人気記事 ▼

▼ 仮想通貨関連の記事もよく読まれています ▼





おすすめ記事

1. スポナビ・VOD関連の記事まとめてます → スポナビ・VOD関連の記事まとめ
2. 箱根駅伝関連の記事まとめてます → 箱根駅伝関連の記事まとめ
3. 高校駅伝関連の記事まとめてます → 高校駅伝関連の記事まとめ
4. テニス関連の記事まとめてます → テニス関連の記事まとめ

随時更新中

超絶面白い「スポーツ漫画」を厳選紹介するよ
『スターウォーズ (STAR WARS)』文庫本・アメコミの歴史