本文へジャンプ

ひと手間加えてオイシク仕上げる! CSS3小ワザまとめ サンプルコードを添えて。「見出し編」

Hafa Adai!

先週末グアムに行ってきました。海はとても綺麗だったのですが、足元にあるガンガゼ?に気が付かず痛い思いをしました(涙
黒い長い刺のアイツには気をつけましょう...。

さてと今回は、なるべく画像を使わずにCSSだけを使って簡単に綺麗に仕上げる方法を、サンプル付きで紹介していきたいと思います。

...と、書いていたらなんかサンプルが増え過ぎちゃったので、今回、まずは「見出し」に使えそうなものをご紹介しましょう。

01:マーカーを引いたような見出し

株式会社MONSTER DIVE(モンスターダイブ)株式会社MONSTER DIVE(モンスターダイブ)
.ttlMarker {
display:inline;
padding:5px;
background:#34495e;
color:#fff;
font-size:2.0rem;
line-height:1.5;
}

その名もズバリマーカーで強調したような見出しです。
ポイントはdisplay:inline;でしょうか。line-heightで重ならないように調整してみてください。

02:アンダーライン見出し

株式会社MONSTER DIVE
.ttlUnderLine {
position:relative;
color:#34495e;
font-size:2.0rem;
line-height:1;
}
.ttlUnderLine:before {
content:"";
position:absolute;
left:0;
bottom:2px;
width:100%;
border-bottom:1px solid #34495e;
}
.ttlUnderLine > span {
position:relative;
display:inline-block;
background:#fff;
z-index:100;
}

文字の終わりから右端まで下線を引いたようなスタイルです。
:beforeで幅100%のラインを生成し、背景に白を敷いた文字ブロックの下に置きます。 背景色が複雑な場合は使えません。

03:角を折り返した見出し

株式会社MONSTER DIVE(モンスターダイブ)
.midashi01 {
position:relative;
padding:20px 25px 20px 35px;
background:#ffb53c;
color:#fff;
font-size:2.2rem;
text-shadow:0 0 1px rgba(000,000,000,0.3);
}
.midashi01:before {
position:absolute;
top:0;
left:0;
display:block;
content:"";
border-top:    10px solid #fff;
border-left:   12px solid #fff;
}

角を折り返したようなスタイルです。
:beforeで左上に要素を生成し、borderを使って左上を白100%(背景色)に、右下を白50%で塗りつぶしています。
折り返し左上を塗りつぶしているため、残念ながら背景が単色以外の場合使えません。 折り返し右下はボックスのカラーに白50%を載せているだけなので、ボックスカラーを変更しても変更する必要はありません。

04:水玉アイコンがついた見出し

Pickup株式会社MONSTER DIVE(モンスターダイブ)
.ttlDrop {
position:relative;
padding:25px 25px 25px 90px;
color:#1d7ee2;
font-size:2.4rem;
}
.ttlDrop .icon {
position:absolute;
top:0;
left:0;
width:80px;
padding:34px 0;
border-radius:200px;
background:#1d7ee2;
color:#fff;
font-size:1.2rem;
line-height:1;
text-align:center;
vertical-align:middle;
z-index:100;
}
.ttlDrop .icon:before {
position:absolute;
bottom:-6px;
right:0;
display:block;
content:"";
width:40px;
height:40px;
border-radius:100px;
background:#1d7ee2;
z-index:-1;
}
.ttlDrop .icon:after {
position:absolute;
bottom:-8px;
left:8px;
display:block;
content:"";
width:10px;
height:10px;
border-radius:100px;
background:#1d7ee2;
z-index:-1;
}

アイキャッチとして水のようなアイコンを置きました。:before/:afterを使い、中・小サイズの水玉を足しています。

05:二重線で囲んだ見出し

株式会社MONSTER DIVE(モンスターダイブ)
.ttlDoubleLine {
width:100%;
padding:3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ttlDoubleLine > span {
display:block;
padding:15px;
border:4px solid #fff;
box-shadow:inset 0 0 0 3px #d35400, 0 0 0 3px #d35400;
color:#d35400;
font-size:2.0rem;
text-align:center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

一つのdivにborderbox-shadowを使って重ねて、二重線に見えるように表現しています。
二重線の間の白い部分はborderなので背景が単色以外だと使えませんね...。

06:背景にテキストをデザイン風に配置した見出し

株式会社MONSTER DIVE(モンスターダイブ)
.ttlTxtBG {
position:relative;
padding:20px;
background:#ecf0f1;
color:#2c3e50;
font-size:2.6rem;
text-align:center;
z-index:100;
overflow:hidden;
}
.ttlTxtBG:before {
position:absolute;
top:-15px;
left:2px;
content:"TITLE";
display:block;
color:rgba(000,000,000,0.05);
font-family: 'Ubuntu Condensed' sans-serif;
font-size:10.0rem;
font-weight:bold;
letter-spacing: 0.1rem;
line-height:1;
-webkit-transform:rotate(-13deg);
-moz-transform:rotate(-13deg);
transform:rotate(-13deg);
z-index:-1;
}

背景にテキストをデザイン的に入れたスタイルです。
content要素で生成しているのでHTMLに影響がありませんし、動的に変更も可能です。

07:立体的な囲みの見出し

A:株式会社MONSTER DIVE(モンスターダイブ)
B:株式会社MONSTER DIVE(モンスターダイブ)
.ttlFrameA {
width:100%;
padding-right:8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ttlFrameA > span {
display:block;
padding:15px;
box-shadow:inset 0 0,8px 8px 0 -2px #fff, 8px 8px 0 0 #2e8ece;
background:#2e8ece;
color:#fff;
font-size:2.0rem;
text-align:center;
}
.ttlFrameB {
width:100%;
padding-right:8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ttlFrameB > span {
display:block;
padding:15px;
border:2px solid #2e8ece;
box-shadow:inset 0 0,8px 8px 0 -2px #fff, 8px 8px 0 0 #2e8ece;
color:#1d7ee2;
font-size:2.0rem;
text-align:center;
}

囲み枠をずらしたようなスタイルです。box-shadowを2つ重ねて線のように見せています。
枠の分右へ8pxずらしているため、親のDIVで8px余白をとっています。
これも塗りつぶしなので白の部分は透過しません。

08:斜めに歪んだ見出し

株式会社MONSTER DIVE(モンスターダイブ)
.ttlWarp {
width:100%;
padding:8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ttlWarp > span {
display:block;
padding:15px;
border:2px solid #16a085;
box-shadow:inset 0 0, 8px 8px 0 0 #16a085;
background:#fff;
color:#16a085;
font-size:2.0rem;
text-align:center;
-webkit-transform: skew(-10deg,-3deg);
-moz-transform: skew(-10deg,-3deg);
transform: skew(-10deg,-3deg);
}

transformのskewを使用しています。これは要素を傾斜させることが出来ます。
残念ながら、IEには対応しておりません。

09:トンボ風?の見出し

株式会社MONSTER DIVE(モンスターダイブ)
.ttlTombo {
position:relative;
display:block;
padding:15px;
border:1px dotted #bdc3c7;
color:#34495e;
font-size:2.0rem;
text-align:center;
}
.ttlTombo:before,
.ttlTombo:after,
.ttlTombo > span:before,
.ttlTombo > span:after {
content:"";
position:absolute;
width:7px;
height:7px;
background:url(/blog/ex_images/imgcorner7.png) 0 0 no-repeat;
}
.ttlTombo:before {
top:-1px;
left:-1px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform:rotate(0deg);
}
.ttlTombo:after {
top:-1px;
right:-1px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
}
.ttlTombo > span:before {
bottom:-1px;
left:-1px;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.ttlTombo > span:after {
bottom:-1px;
right:-1px;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);
}

これだけ画像を使用。
カギカッコのような画像を:befor/:afterで生成、transform:rotateでくるくる回して4隅に配置しています。
画像ブロックを4つ生成しているので、divとspanで囲っています。

10:色見本的な見出し

株式会社MONSTER DIVE(モンスターダイブ)
.ttlGradation {
border:1px solid #3498db;
background: #3498db;
color:#3498db;
font-size:2.0rem;
}
.ttlGradation span {
display:block;
padding:15px 15px 15px 6%;
background: #fff;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.0) 1%,   rgba(255,255,255,0.2) 1%,   rgba(255,255,255,0.2) 2%,   rgba(255,255,255,0.4) 2%,   rgba(255,255,255,0.4) 3%,   rgba(255,255,255,0.6) 3%,   rgba(255,255,255,0.6) 4%,   rgba(255,255,255,0.8) 4%,   rgba(255,255,255,0.8) 5%,   rgba(255,255,255,1.0) 5%,   rgba(255,255,255,1.0) 100%);
background:     linear-gradient(to right,   rgba(255,255,255,0.0) 0%,   rgba(255,255,255,0.0) 1%,   rgba(255,255,255,0.2) 1%,   rgba(255,255,255,0.2) 2%,   rgba(255,255,255,0.4) 2%,   rgba(255,255,255,0.4) 3%,   rgba(255,255,255,0.6) 3%,   rgba(255,255,255,0.6) 4%,   rgba(255,255,255,0.8) 4%,   rgba(255,255,255,0.8) 5%,   rgba(255,255,255,1.0) 5%,   rgba(255,255,255,1.0) 100%);
}

見出しとして背景にグラデーションを敷いてみました。
spanの背景グラデーションに白の透明度を1%ずつずらして指定。親divの背景色に1%幅ずつかぶせます。
もちろんdivの背景色を変更すればグラデーションも変化します。 おなじことをbox-shadowでもできますね。insetで。

次回はまた別のサンプルを紹介したいと思います。
Adios!

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+