こんにちは。フクロウです。
Webサイトを作るうえで、見出しの存在はとても重要ですよね。
今回は、おしゃれでシンプルかつ汎用性の高い見出しの装飾を7つご紹介します。
奇抜で目新しい装飾ではなく、どんなサイトにも使える使い勝手の良いものを厳選しました。
レスポンシブに対応できるように、基本的に文字の長さに合わせて可変するように作っているので、使える場面は多いかと思います。
また、HTMLが長くならないように囲っているタグも基本的に1つだけで構成されていますし、CSSもなるべく少ない記述で済むようにしています。
Webデザイン・コーディングを勉強中の方、ポートフォリオを制作中の方、見出しのデザインに詰まっている方はぜひ参考にしてみてください。
よく分からない人はコピペして使ってみてください。
※スマホで見ている方は、コードが表示されている部分のResultをタップすると表示されます。
左右を1本線で囲む見出し
See the Pen 見出し1 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
左右を1本の横線（ボーダー）で囲む見出しです。よく見かけますよね。
1つのタグに擬似要素を2つ（::beforeと::after）付けています。
ポイントは親要素にdisplay: flex;を指定し、擬似要素にflex: 1;を指定している点です。
この場合のflex: 1;は簡単に言うと、テキストを除く残りのスペースを埋めてくれると考えればいいです。
テキストが増えても、それに合わせて左右の線は可変してくれるので管理もしやすいです。
flexの指定は細かく分けるとかなりややこしいですが、可変するレイアウトにおいてはとても便利なプロパティなので覚えておいて損は無いです。（僕も完璧には理解できてないです…）
また、綺麗に整えるために擬似要素それぞれに1文字分の余白を付けてあげます。
左の線なら、::beforeにmargin-right: 1em;ですね。
左右を2本線で囲む見出し
See the Pen 見出し2 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
先程の1本の横線を2本の横線に増やしただけです。
border-topとborder-bottomの2種類を指定してあげます。
そこに上下だけpaddingを指定すると線の幅を調整できます。
見本は2pxですが、広げたい場合は単純にこの数値を増やしてください。
ほとんど同じCSSですが、少しの工夫でデザインの幅が広がりますね。
マーカー・蛍光ペンで下線を引くような見出し
See the Pen 見出し3 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
このマーカーで引くような装飾と、次に紹介するストライプマーカーの装飾は、spanタグにクラス名を付けて使用します。
理由はそれぞれ後述します。
マーカーや蛍光ペンでテキストの下半分位に線を引くような装飾で、見出しにはもちろん、文中の目立たせたい部分にも使えます。
これはbackground: linear-gradient();というプロパティを使用しています。
上半分は見えませんが、一応グラデがかかっている状態です。
さて、前述の通りこのマーカーや蛍光ペンを引くような装飾は親要素の中にspanタグで囲みます。
下記を見てください。
See the Pen 見出し3失敗 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
CSSは全く同じなのに、残念なことになってますよね。
これは親にブロック要素（pタグとかhタグとか）を使っているからなんです。
それを解決するために、ブロック要素の中にインライン要素であるspanタグを入れ込んで、そのspanタグにクラス名を付けて装飾してあげます。
クラス名を付けてあげると汎用性も高く、使いまわせるのでオススメです。
hタグの中にspanタグを入れるのはSEO的にどうなの？
と思いましたが、問題ないみたいです。気にせず使っていきましょう。
真ん中に寄せたい場合は、親要素にtext-align: center;を指定してください。
ここで余談ですが、グラデをちまちまコード上で考えるのは大変なので、超便利なジェネレーターに力を借りましょう。
直感的かつ簡単にグラデーションのCSSを生成できます。仕事の時もめちゃくちゃ重宝してるジェネレーターです。
こういうジェネレーターのおかげでかなりの時短に繋がるので本当にありがたいです。
斜めのストライプで下線を引くような見出し
See the Pen 見出し4 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
先程の装飾の斜めストライプバージョンですが、コードはだいぶ違います。
background-image: repeating-linear-gradient();というプロパティを使用してストライプを作っていきます。
ただし前述のマーカーの装飾のように、上半分を透明にして見えなくするみたいなことが出来ないので、擬似要素を使って解決します。
ざっくり言うとposition: relative;とposition: absolute;を使って配置し、heightで縦幅を調整します。
今回はテキストの半分の幅にストライプを引きたいので、height: 50%;を指定します。
さて、マーカーの装飾のところで触れたようにこのストライプもspanタグで囲んであげる必要があります。
しかし！ここでは新たな問題が発生します。下記を見てください。
See the Pen 見出し4失敗 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
悲しいことにbackground-image: repeating-linear-gradient();プロパティは、改行しても装飾が付いてきてくれないんです。
これを解決するためには、行数ごとにspanタグで囲む必要があります。
めんどうですが、そういう仕様なのでしょうがないです。
こちらも真ん中に寄せたい場合は、親要素にtext-align: center;を指定してください。
正直ストライプにこだわりが無い限りは、通常のマーカー風の装飾の方が使い勝手は良いと思います。
余談ですが、このストライプも頭の中で考えるのは無理があるのでまたまた超便利なジェネレーターに頼りましょう。
先程と同様に直感的にストライプのCSSを生成出来るので、重宝しています。
このようなジェネレーターは他にもたくさんあるので、困ったらガンガン活用していきましょう。
左右をカッコで囲む見出し
See the Pen 見出し5 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
左右をカッコで囲む見出しです。
左右のカッコは擬似要素で作り、それぞれにボーダーを3種類指定してください。
左ならborder-top・bottm・left、右ならborder-top・bottm・rightといった感じですね。
レイアウトに関しては、position: relative;とposition: absolute;を使って配置しています。
高さは改行によって可変するように、height: calc(100% + 1em);という指定にしています。
ざっくり言うと、テキストの高さ+1文字分の余白を付けて可変してくれる感じです。
グラデーションのかかった左ボーダー
See the Pen 見出し6 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
見出しの左側にグラデーションのかかったボーダーを引いています。
レイアウトだけならよく見ると思いますが、グラデがかかっているのがポイントです。
これもCSSで簡単に作れます。
使うのはborder-image: linear-gradient();というプロパティです。
本来は画像を指定すると思うんですが、linear-gradientを使用できます。
まずは通常通りborderで線の太さと種類を指定します。
その後border-image: linear-gradient();を使ってグラデを指定し、
最後にborder-image-slice: 1;を指定します。
（これに関しては僕もいまいち理解できていません…とりあえず入れるものだと思っておけば大丈夫だと思います。理解不足で申し訳ないです。）
グラデに関しては前述の通りジェネレーターを使うと便利ですよ。
iPhoneのsafariユーザーの方は、場合によってはこのようになっているかもしれません。
その場合は、ボーダーの指定を下記のように変更してみるとうまくいくと思います。
border-image: linear-gradient(色の指定);
border-image-width: 0 0 0 4px;
border-image-slice: 1;
border-style: solid;border-image-widthは、太さによって自由に書き換えてください。
今回は左線のみの指定なので、最後だけ4pxとしています。
ちょっとおしゃれな装飾の見出し
See the Pen 見出し7 by フクロウ/未経験からWebデザイナーになって2年 (@fukufukurouz) on CodePen.
最後にちょっとおしゃれな装飾の見出しをご紹介します。
これまでの応用というか、特別難しいことはしてないので簡単に作れます。
全体に背景色を指定してあげて、擬似要素で斜め線を作ります。
斜め線は、まずborderで通常通り線を引き、transform: rotate();で斜めに傾けます。
配置はこれまで頻繁に使ってきたposition: relative;とposition: absolute;で行います。
思い切って背景色を無くしてみてもおしゃれに見えるかもしれません。
いろいろ試してみてください。
CSSを少し工夫するだけで、いろんなパターンの装飾が作り出せる
今回は、CSSで作れるシンプルかつおしゃれな見出しの装飾を7つ紹介してきました。
CSSを少し工夫するだけで、いろんなパターンの装飾が作れますよね。
特に擬似要素は使い方を覚えるとかなり自由度の高いデザインを再現できるようになります。
また、レスポンシブに対応できるよう、長さや幅を固定した数値で指定せずに、可変できるように作ってあげることがとても重要なポイントです。
今回紹介したのはどれも使いやすく、汎用性は高いと思います。
よく分からない方は、まずはコピペしてそのまま使ってみて、理解していく中で改善点や応用できるものが見つかったらガンガン自分なりのコードに書き換えていってください。
かなりざっくりとした説明なうえ、ちょいちょい理解不足もあって不徳の致すところです。
いまWebデザイナーを目指してコーディングの勉強をしている方、ポートフォリオを作っている方、見出しのデザイン・装飾に困っている方は参考にしていただければ幸いです。
ここまで読んでくださってありがとうございました。
ありがとうございました！
コメント