コピペで簡単♪cssの見出しデザインサンプル10個作ってみた

css, WEB制作

cssでの見出しデザインを作ってみました。
ブログとかで使う見出しや小見出しなんかに使えると思います。
殆どのものを擬似要素を使って作ってみました。

中々センスある見出しデザインを作るのは難しいですね><
ご参考になれば幸いです。

スポンサーリンク

サンプル

サンプルはこんな感じになります。
Resultボタンを押して表示を確認してみてください。

各ソースの紹介

それぞれのソース別にコードを紹介します。
なお各HTMLはこのようになっています。

<h3 class="sample1">CSS見出しデザイン</h3>
<h3 class="sample2">CSS見出しデザイン</h3>
<h3 class="sample3">CSS見出しデザイン</h3>
<h3 class="sample4">CSS見出しデザイン</h3>
<h3 class="sample5">CSS見出しデザイン</h3>
<h3 class="sample6">CSS見出しデザイン</h3>
<h3 class="sample7">CSS見出しデザイン</h3>
<h3 class="sample8">CSS見出しデザイン</h3>
<h3 class="sample9">CSS見出しデザイン</h3>
<h3 class="sample10" title="見出しの小見出しとか入れたり、補足説明とか書いたり">CSS見出しデザイン</h3>

おしゃれちっくなやつ

見出しサンプル

2~3年前くらいからこういう見出しデザインをちらほら見かけますね。
こういったアイコンチックなやつは、結構センスに左様されますね。

.sample1 {
    position:relative;
    padding:0 0 10px 20px;
    border-bottom:3px solid #ddd;
    font-size:22px;
}
.sample1:after{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    width:8px;
    height:8px;
    background:rgba(240,120,255,1);
    -webkit-transform:rotate(-18deg);
    transform:rotate(-18deg);
}
.sample1:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:5px;
    background:rgba(240,120,255,1);
    -webkit-transform:rotate(-20deg);
    transform:rotate(-20deg);
}

任意の文字をアイコンっぽく表示

見出しサンプル

contentに入れた文字を調整して表示しています。
なので、別に!(エクスクラメーション・マーク)でなくても、四角やまる、矢印や星の記号などを使って独自にデザインできたりします。

.sample2 {
    position:relative;
    padding:0 0 10px 20px;
    border-bottom:3px solid #ddd;
    font-size:22px;
}
.sample2:after{
    content:"!";
    position:absolute;
    top:-2px;
    left:5px;
    font-size:26px;
    color:rgba(240,120,255,1);
}

サイクルアイコンを表示

見出しサンプル

いたってシンプルなまる。
シンプル・イズ・ベストっていうけど、ほんとそれ。
作っていると余計なものをつぎ足したくなるのが人間の心情ですが、やはりシンプルなものは美しい。

.sample3 {
    position:relative;
    padding:0 0 10px 20px;
    border-bottom:3px solid #ddd;
    font-size:22px;
}
.sample3:before{
    content: "";
    position: absolute;
    top:7px;
    left:3px;
    width:10px;
    height:10px;
    border-radius:10px;
    background: rgba(240,120,255,1);
}

レイアウトのデザインっぽいやつ

見出しサンプル

適当に作ってたらできちゃったやつ。
ページのレイアウトのアイコンみたいですね。

.sample4 {    
    position:relative;
    padding:0 0 10px 20px;
    border-bottom:3px solid #ddd;
    font-size:22px;
}
.sample4:after{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    top:4px;
    left:0;
    font-size:26px;
    border:2px solid rgba(240,120,255,1);
}
.sample4:before{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    top:4px;
    left:0;
    font-size:26px;
    border:2px solid rgba(240,120,255,1);
}

四角の中にまる

見出しサンプル

ワンポイントデザイン。
四角の中に四角を置くのでも良かった気がする。

.sample5 {
    position:relative;
    padding:0 0 10px 20px;
    border-bottom:3px solid #ddd;
    font-size:22px;
}
.sample5:after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 4px;
    left: 0px;
    font-size: 26px;
    border: 2px solid rgba(240,120,255,1);
}
.sample5:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 10px;
    left: 6px;
    font-size: 26px;
    border-radius: 10px;
    background: rgba(240,120,255,1);
}

リストデザインのアイコンっぽいの

見出しサンプル

リストの矢印みたいな感じです。
むしろこのデザイン、リストに使えばいい感じじゃないか?

.sample6 {
    position:relative;
    padding:0 0 10px 20px;
    border-bottom:3px solid #ddd;
    font-size:22px;
}
.sample6:after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 5px;
    height: 5px;
    border-right: 2px solid rgba(240,120,255,1);
    border-bottom: 2px solid rgba(240,120,255,1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sample6:before{
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 5px;
    height: 5px;
    border-right: 2px solid rgba(240,120,255,1);
    border-bottom: 2px solid rgba(240,120,255,1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

左上と右下にちょっとしたアクセント

見出しサンプル

見出しっぽい見出し。
ボーダーで囲んでいるんですが、こういうタイプは記事内の見出しとか小見出しには中々使いづらい感じが、個人的にはします。

.sample7 {
    position:relative;
    padding:10px 20px;
    margin:0 20px;
    border:3px solid rgba(240,120,255,1);
    font-size:22px;
}
.sample7:after {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid rgba(240,120,255,1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sample7:before{
    content: "";
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid rgba(240,120,255,1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

吹き出しデザイン

見出しサンプル

みんな大好き吹き出しデザイン
吹き出しの見出しとか凄く需要ありますよね。
確かに見てる側からしても、執筆者が喋ってるのが目に浮かんできそうな気がします。
えっ?いいすぎ?

.sample8 {
    position:relative;
    padding:10px 20px;
    margin:10px 20px;
    border-top:3px solid rgba(240,120,255,1);
    border-left:3px solid rgba(240,120,255,1);
    border-right:3px solid rgba(240,120,255,1);
    font-size:22px;
}
.sample8:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 3px solid rgba(240,120,255,1);
    z-index: 0;
}
.sample8:before{
    content: "";
    position: absolute;
    bottom: -7px;
    left: 30px;
    width: 12px;
    height: 12px;
    border-left: 3px solid rgba(240,120,255,1);
    border-bottom: 3px solid rgba(240,120,255,1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #fff;
    z-index: 100;
}

漫画とかでよくあるやつ

見出しサンプル

\ アッカリーン /
こういう感じです。
使いどころはほぼないと思います。

.sample9 {
    position:relative;
    padding:0 0 10px 20px;
    font-size:22px;
    text-align:center;
}
.sample9:after{
    content: "";
    position: relative;
    top: 0px;
    width: 30px;
    height: 0;
    border-bottom: 3px solid rgba(240,120,255,1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: inline-block;
}
.sample9:before{
    content: "";
    position: relative;
    top: 0px;
    width: 30px;
    height: 0;
    border-bottom: 3px solid rgba(240,120,255,1);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    display: inline-block;
}

見出しの下に補足を追加するデザイン

見出しサンプル

補足部分に表示される文章はHTMLの方のタイトル属性を拾って表示しています。
実際に使う場合であれば、date属性を使うなりして使って、title属性のものはtooltipとかで表示するといいと思います。

.sample10 {
    position:relative;
    padding:0 0 10px 0;
    border-bottom:3px solid #ddd;
    font-size:22px;
    text-align:center;
}

.sample10:after {
    content: attr(title);
    position: relative;
    width: 100%;
    height: 0;
    color: #999;
    display: table;
    text-align: center;
    font-size: 16px;
    font-size: 14px;
    padding: 10px 0 0 0;
}

備忘録

今回は10個作ってみましたが、どれか気に入っていただけたら幸いです。
しかし、こういったワンポイントのデザインを作るのは中々難しいものです。

なんで難しいかと言うと、自分で作っていると、【他人の真似】をしたくないわけなんですよね。
WEB上には素晴らしいデザインが満ち溢れていて、素晴らしいクリエイターのデザインを見て、解析して、そのままトレースして作って・・・と経験地を貯めていくんですが、こうやって公開する場合は、そのまま公開したらただのパクリだし、そこには何のクリエイティブ性がないです。

facebookの公式いいねボタンにしても、今年TEDで【いいねボタン】を作ったチームの講演がありましたが、たったひとつのボタンに何日も何十時間もかけてあらゆるケース・トラブルを想定して、熟練のデザイナーが蓄積された経験を元に作ったボタンのデザイン。これよりいいものを作るのはかなり至難の業だと思っています。

ただ自分のアイデアとセンスと技量で作りたいと言う気持ちが強いので、こうやって公開して反応を見て、自分の技量を高めていくのもブログの醍醐味なのかなぁとか思ってたりします。

この記事が気に入ったら
『いいね』しよう!