普通じゃつまらない！
見出しのデザインって大体似たようなものになりがちですが、それだとあまり印象に残りません。
なにより、自分のサイトなんだから自分らしさを出していきたいですよね。
そこでこの記事では、個性的で少し変わった見出しのデザインを紹介します。コピペでも使えるので、ぜひ参考にしてください。
使用上の注意
この記事で紹介するCSSは以下のようなコードで使用できます。(一部例外アリ)
例としてh2にしていますが、タグをh3,h4,h5などに書き換えて使用することも可能です。
また、大きさはChrome標準のh2のサイズ感(24px)になっています。”padding”や”margin”などの余白は、使用サイトのフォントサイズに合わせて微調整してください。
カッコイイ見出し
それでは紹介していきます。
最初はカッコイイ系の見出しから。さりげなくクールさを醸し出したい、そんな時におすすめのデザインです。
エッジの効いたグラデーション下線
エッジがある下線を引いた今風のデザイン。IT・ガジェット系との相性は抜群です。
線の尖り具合を調整したい場合は、16行目の値(-60deg)を変更してください。
コードを表示する
h2{
position:relative;
padding-bottom:6px;
}
h2:after{
display: inline-block;
position:absolute;
bottom:-3px;
left:0;
content: '';
height: 6px;
background: -webkit-linear-gradient(to right, rgb(0, 0, 0), transparent);
background: linear-gradient(to right, rgb(0, 0, 0), transparent);
width: 100%;
transform: skewX(-60deg);
}
スマートな矢印下線
今風のスマートな下線デザイン。
さりげなく添えられた矢印がポイントです。
コードを表示する
h2{
position: relative;
padding: 10px 3em;
padding-left: 10%;
}
h2:before{
position: absolute;
bottom: 0;
left: 5%;
width: 95%;
height: 10px;
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
transform: skew(55deg);
}
h2:after{
position: absolute;
bottom: 2px;
left: -webkit-calc(5% - 6px) ;
left: calc(5% - 6px) ;
width: 95%;
height: 10px;
content: "";
border-right: 2px solid #000;
transform: skew(55deg);
}
立体的
影と線を付けて立体感を表現したデザイン。
WordやPowerPointでも見かけるので、親近感はあると思います。
コードを表示する
h2{
margin: 1em 0 0.5em 0;
color: #232323;
line-height: 42px;
text-shadow: 0 2px white, 0 3px #888;
}
ほのかなライトアップ
文字を青白く光らせた見出し。
さりげないオシャレさがあるので汎用性は高めです。
白背景のページでも使えるように、黒背景に影を付けてボックス風に。悪目立ちしないようにフォントは細めにしています。
コードを表示する
h2{
color:white;
font-weight:lighter;
padding: 10px 1em;
background: #222;
border-radius: 3px;
box-shadow: 0 6px 8pt -4px #454545;
text-shadow:0 0 10px rgb(120 190 255 / 50%), 0 0 20px rgb(120 190 255 / 50%), 0 0 30px rgb(120 190 255 / 50%);
}
オシャレな見出し
少し特殊でなんとなくセンスを感じる、そんな見出しデザインです。
サイケデリック3重下線
派手な色を重ねた下線の見出し。
疑似要素を使った赤・黒・青の3重下線です。
目に優しくない色合いなので各線を細め(1px)にしています。
コードを表示する
h2{
position:relative;
padding-bottom: 6px;
border-bottom: 1px solid #000; /*黒線*/
}
h2:before{
position: absolute;
bottom: 0px;
left: -1px;
display: block;
width: 100%;
height: 100%;
content: '';
border-bottom: 1px solid #F35325; /*赤線*/
}
h2:after{
position: absolute;
bottom: -2px;
left: 1px;
display: block;
width: 100%;
height: 100%;
content: '';
border-bottom: 1px solid #0596F0; /*青線*/
}
ドットフィルター
ドットフィルターを背景にした見出し。
これだけでも十分ですが、左線を加えたり画像を背景にするのもアリだと思います。
コードを表示する
※line-heightは各サイトの文字サイズに合わせて調整してください。
h2{
position:relative;
color:#fff;
background-color:#bbb;
background-image:linear-gradient(90deg,rgba(0,0,0,.5) 50%,transparent 50%),linear-gradient(rgba(0,0,0,.25) 50%,transparent 50%);
background-size:2px 2px;
padding:0.75em 0.5em;
}
ジーパン風
ドットフィルターの応用。
服飾関係やワイルドなブログにピッタリなデザインです。
コードを表示する
h2{
position:relative;
color: rgb(255 255 255 /90%);
padding: 1em 0.5em;
border-radius: 3px;
background-color: #415F83;
background-image:linear-gradient(45deg,rgba(255,255,255,.2) 20%,transparent 50%),linear-gradient(rgba(255,255,255,.4) 20%,transparent 50%);
background-size:1px 2.5px;
box-shadow: 1px 4px 8pt -2px #454545;
text-shadow: 0 0 1px #000;
}
h2:before{
position:absolute;
content:"";
top:6px;
left:0;
width:100%;
border-top: 2px dashed rgb(217 184 163);
}
h2:after{
position:absolute;
content:"";
bottom:6px;
left:0;
width:100%;
border-top: 2px dashed rgb(217 184 163);
}
雑誌に使われていた
タイトル通り、とある雑誌に使われていた見出しをCSSに落とし込んだもの。
左にある三角形はblur()で少しぼかし、全体を花浅葱色で整えています。
コードを表示する
h2{
padding-left: calc(0.8em + 5px);
background-color: rgb(0,115,138,.4);
border-radius: 4px;
line-height: 2em;
color:white;
}
h2:before{
position: absolute;
top:calc(50% - 1em);
left:5px;
content: "";
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1.2em solid rgb(0,115,138);
filter: blur(1px);
}
立体感のある付箋
貼っている感がある付箋の見出し。
落ち着いた雰囲気・センスのある感じを出したい時にピッタリのデザインです。
また、明朝体など線の細いフォントとの相性もいいと思います。
文字の太さは細め(lighter)に。影付きの疑似要素を後ろ(z-index:-1)に配置して立体感を表現しています。
コードを表示する
h2{
position:relative;
background-color: #ffffff;
color:#6a4e38;
font-weight:lighter;
border-left: solid 5px #a8917E;
padding: 0.75em 1em;
}
h2:before{
position: absolute;
bottom: 15px;
left: 12px;
width: 100%;
height: 80%;
max-width: 300px;
max-height: 300px;
z-index: -1; /*後ろに配置*/
content: "";
box-shadow: rgb(0 0 0 /30%) -15px 15px 10px;
transform: skew(-4deg,-4deg);
-webkit-transform: skew(-4deg,-4deg);
}
※影が見出しの上に表示される場合は、h2に”z-index:auto;”を追記してみてください
メタリックな見出し
金属っぽさのある光沢をグラデーションでつけた見出し。
無骨ながらも派手さがあり、ゴシック調のフォントと相性がいいデザインです。青系統の色だと落ち着きのある感じに、赤系統にすれば更にハデハデになります。
このダサカッコいい感じが好きで、当ブログのトップページでも使っています
コードを表示する
h2{
font-weight: 900;
color: transparent;
background: linear-gradient(0deg, #002461 0%, #61779C 40%, #9BA9C0 50%, #61779C 60%, #002461 90% 100%);
-webkit-background-clip: text;
}
特殊な見出し
読みやすさなんか関係ねぇ！ とにかく個性を出したい！ という時のための見出しデザイン。
標準デザインとしては非推奨です。ここぞという時だけ使うのが良いと思います。
レインボー
デザインのレイン暴
流行りのゲーミングデザイン。
与えるインパクトが大きい分、その代償ははかり知れません。
コードを表示する
h2{
position: relative;
color:#fff;
text-shadow:1px 1px 0 #000;
padding:1em 0.75em;
background: linear-gradient(0.63turn, #ff0000 12%, #f39800 26%, #ffcc00 42%, #009900 58%,
#0066ff 72%, #0000cc 86%, #9900cc 100%);
opacity:0.7;
background-size:800%;
animation: animation-rainbow 4s linear 0s infinite alternate;
}
@keyframes animation-rainbow{
0%{
background-position:0% 50%;
}
100%{
background-position:100% 50%;
}
}
ネオン風
怪しさ満点の見出し。
夜の街、アダルト、都市伝説などのジャンルに向いています。
広い範囲で影を散らすため、黒背景のページでしか使えないのが難点です。
コードを表示する
h2{
color:#ff00de;
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #ff00de,
0 0 35px #ff00de,
0 0 40px #ff00de,
0 0 50px #ff00de,
0 0 75px #ff00de;
}
P〇rnhub風
ズンズンチッチ♪ズンズンチッチ♪と聞こえてきそうな見出し。
日本語でも使えますが、やはり英語の方がしっくり来ます。
コードを表示する
※オレンジの部分はspanタグで囲う必要があります。
<h2>ここは白文字<span>ここはオレンジ</span></h2>
h2{
color:white;
background:#1B1B1B;
border-radius: 3px;
box-shadow: 0 6px 8pt -4px #454545;
padding: 10px 1em;
}
h2 span{
color:black;
background:#FF9000;
border-radius:3px;
margin-left:0.1em;
padding:4px 0.2em;
}
