CSS・HTML Factory
少しでもお役に立てれば。
ＨＯＭＥ
本サイトについて
特殊文字
メタタグについて
裏ワザ
ショートカット
HOME
>
いろいろな見出し１
> いろいろな見出し２>
いろいろな見出し２
タグ風見出し
見出し
ＨＴＭＬ
<div class="tag-fu">見出し</div>
ＣＳＳ
.tag-fu{ color: #505050;/*文字色*/ width:100px;/*横幅*/ padding: 0.5em;/*文字周りの余白*/ display: inline-block; line-height: 1.3;/*行高*/ background: #33f;/*背景色*/ vertical-align: middle;/*上下中央*/ border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/ } .tag-fu:before { content: '●'; color: white; margin-right: 8px; }
右下が尖った見出し
見出し
ＨＴＭＬ
<div class="right-under-pointed">見出し</div>
ＣＳＳ
.right-under-pointed { position: relative; padding: 5px 5px 5px 42px; background: #77c3df; font-size: 20px; color: white; line-height: 1.3; } .right-under-pointed:before { position: absolute; content: ''; left: -2px; top: -2px; border: none; border-left: solid 30px #eee;/*#eeeは尖った所の背景の色*/ border-bottom: solid 39px transparent;/*39px transparentは尖った所の背景の角の角度*/ }
左右両側を斜めに尖らせた見出し
見出し
ＨＴＭＬ
<div class="both-ends-pointed">見出し</div>
ＣＳＳ
.both-ends-pointed { position: relative; padding: 5px 26px 5px 42px; background: #77c3df; font-size: 20px; color: #2d2d2d; line-height: 1.3; border-bottom: solid 3px orange; } .both-ends-pointed:before { position: absolute; content: ''; left: -2px; top: -2px; width: 0; height: 0; border: none; border-left: solid 30px #eee; border-bottom: solid 39px transparent; } .both-ends-pointed:after { position: absolute; content: ''; right: -3px; top: -7px; width: 0; height: 0; border: none; border-left: solid 30px transparent; border-bottom: solid 60px #eee; }
ストライプ柄の見出し
見出し
ＨＴＭＬ
<div class="stripe">見出し</div>
ＣＳＳ
.stripe { color: #010079; text-shadow: 0 0 5px white; padding: 0.3em 0.5em; background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); }
ボーダーが交差した見出し
見出し
ＨＴＭＬ
<div class="border-intersection">見出し</div>
ＣＳＳ
.border-intersection { position: relative; padding: 0.25em 1em; border-top: solid 2px black; border-bottom: solid 2px black; } .border-intersection:before, .border-intersection:after{ content: ''; position: absolute; top: -7px; width: 2px; height: -webkit-calc(100% + 14px); height: calc(100% + 14px); background-color: black; } .border-intersection:before {left: 7px;} .border-intersection:after {right: 7px;}
角に○が付いた見出し
見出し
ＨＴＭＬ
<div class="corner-circle">見出し</div>
ＣＳＳ
.corner-circle { position: relative; padding: 0.25em 1em; border: solid 2px black; border-radius: 3px 0 3px 0; } .corner-circle:before,.corner-circle:after { content: ''; position: absolute; width:10px; height: 10px; border: solid 2px black; border-radius: 50%; } .corner-circle:after {top:-12px;left:-12px;} .corner-circle:before {bottom:-12px;right:-12px;}
ページの先頭へ
CSS・Factoy
メニュー
ボタン
ホバーエフェクト１
ホバーエフェクト２
ホバーエフェクト３
ホバーエフェクト４
ゴーストボタン１
ゴーストボタン２
ゴーストボタン３
バナー種類１
バナー種類２
バナー種類３
ボーダー１
ボーダー２
動画の埋め込み
ホバーキャプション１
ホバーキャプション２
ホバーキャプション３
ホバーキャプション４
ホバーキャプション５
ホバーキャプション６
ホバーキャプション７
ホバーキャプション８
ホバーキャプション９
見出し１
見出し２