CSS 見出し CSS 見出し Post Share Hatena Pocket RSS feedly Pin it ギガギガ丸 ここにテキストを入力します ここにテキストを入力します <div style="margin-left:18px;">ここにテキストを入力します</div><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-20px;margin-left:0px;margin-bottom:20px;"></div> <div style="margin-left:18px;">ここにテキストを入力します</div><div style="width:15px;height:15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-20px;margin-left:0px;margin-bottom:20px;"></div> 見出し <div class="heading1">見出し</div> <style> .heading1{ position:relative; padding-left:20px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading1:before{ content:''; height:12px; width:12px; display:block; background:#00A8FF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; position:absolute; top:-0px; left:5px; transform:rotate(-50deg); -webkit-transform:rotate(-50deg); -moz-transform:rotate(-50deg); -o-transform:rotate(-50deg); -ms-transform:rotate(-50deg); } .heading1:after{ content:''; height:8px; width:6px; display:block; background:#00A8FF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; position:absolute; top:16px; left:2px; transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-75deg); } </style> チェック見出し <div class="heading2">チェック見出し</div> <style> .heading2{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading2:after, .heading2:before{ content:''; height:18px; width:4px; display:block; background:#00A8FF; position:absolute; top:8px; left:15px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } .heading2:before{ height:10px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); top:16px; left:7px } </style> 矢印見出し <div class="heading3">矢印見出し</div> <style> .heading3{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading3:before{ content:''; height:0; width:0; display:block; border:5px transparent solid; border-right-width:0; border-left-color:#00A8FF; position:absolute; top:11px; left:8px; } .heading3:after{ content:''; height:2px; width:10px; display:block; background:#00A8FF; position:absolute; top:15px; left:0px; } </style> 円マーク見出し <div class="heading5">円マーク見出し</div> <style> .heading5{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading5:before{ content:''; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:12px; width:12px; display:block; position:absolute; top:13px; left:5px; background-color:#00A8FF; box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset } </style> 重ね丸 .heading6{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading6:before{ content:”; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:12px; width:12px; display:block; position:absolute; top:14px; left:7px; background-color:#6B0CE8; box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset; filter:alpha(opacity=50); -moz-opacity:0.50; -khtml-opacity: 0.50; opacity:0.50; z-index: 1; } .heading6:after{ content:”; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:15px; width:15px; display:block; position:absolute; top:7px; left:2px; background-color:#00A8FF; box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset } </style> 吹きだし見出し <div class="heading7">吹きだし見出し</div> <style> .heading7{ position:relative; padding:9px; font-weight: bold; font-size: 18px; background-color: #51A2C1; color: #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } .heading7:before{ content:''; height:0; width:0; display:block; border:13px transparent solid; border-right-width:0; border-left-color:#51A2C1; position:absolute; top:25px; left:15px; transform:rotate(-270deg); -webkit-transform:rotate(-270deg); -moz-transform:rotate(-270deg); -o-transform:rotate(-270deg); -ms-transform:rotate(-270deg); } </style> 下線 <div class="heading10">下線</div> <style> .heading10{ position:relative; padding:9px; padding-left:0px; font-weight: bold; font-size: 18px; } .heading10:before{ content:''; height:15px; width: 100%; display:block; position:absolute; top:18px; left:0px; background-color:#ccc; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity: 0.20; opacity:0.20; box-shadow: 0px 3px 3px 3px rgba(255,255,255, 0.3) inset; } </style> ⇒引用元 スポンサーリンク Post Share Hatena Pocket RSS feedly Pin it 投稿者: tecinfo CSS 見出し 正規表現で HTMLタグのパラメータを抜き出す 機種依存文字一覧 関連記事一覧 単純な、タイトル飾り
