CSSだけで作れるトレンド見出しデザイン20選|2019年版

こんにちは! ライターのナナミです。

この記事にたどり着いたということは、見出しのデザインでお困りですね?ちょっとした箇所ですが、なかなか悩ましいポイントですよね。今回はそんなお悩みを解決!

CSSだけで作れる見出しデザイン案をまとめました。この記事は下記の流れで進めていきます。

  • 2019年のデザイントレンドは?
  • デザイン案20選
  • もっとデザイン案を探そう

見出しはサイトの情報発信においてかなり重要な要素です。簡単で素敵なデザインを作れるようになっちゃいましょう!

2019年のデザイントレンド

デザインにおいて大切なのは、現在の流行を捕らえられているかどうかです。せっかく作るんだったら、新しくてかっこいいサイトにしたいですしね。調べたところ、2018年はこんな感じのデザインがトレンドなようです。

head1

画像:デザインサンプル

  • シンプル
  • 写真を大きく使う
  • 動きをつける
  • 幾何学模様
  • タイポグラフィ

すっきりとスタイリッシュな雰囲気が素敵ですね。デザイントレンドについては、こちらの記事がまとめてくれています。
https://ferret-plus.com/8641

これを踏まえて、おすすめ見出しデザインを紹介していきますよ!なお、以降の紹介では擬似要素とpositionを使う場面がいっぱいあります。もしもこの2つのことがよくわからなかったら、下記の記事で確認してみてくださいね。


CSSのposition:absolute;とは?要素を思いのままに配置する方法
更新日 : 2019年7月31日

シンプル系

まずはどんなサイトにも合わせやすい、シンプルなデザイン案をご紹介します。

アンダーライン

head2-1

画像:アンダーライン

HTML

CSS

シンプルイズベスト、アンダーラインです。本文との区切りもわかりやすくていいですね。

飾り付きアンダーライン

head2-2

画像:飾り付きアンダーライン

HTML

CSS

端っこにちょっと差し色を入れてみました。シンプルながらも洒落っ気が出ますね。

二重線

head2-3

画像:二重線

HTML

CSS

太さの違う二重線をいれてみました。強弱がついている感じが、しっかりした雰囲気を出してくれますね。二重線については下記の記事でも色々と紹介していますので、ぜひご覧ください。

【超簡単】もう悩まない!CSSのみで二重線をつける方法
更新日 : 2019年7月30日

ちょっとだけアンダーライン

head2-4

画像:部分的アンダーライン

HTML

CSS

見出し全てではなく、ちょっとだけ線を入れました。このちょっとだけでも、本文との仕切りには十分ですね。

文字の横にライン

head2-5

画像:文字横にライン

HTML

CSS

文字と線を重ねるようにして配置しました。同じ見出しが続いても、区切りをきちんとつけられそうですね。

ポップ系

シンプル系だとちょっと固すぎる…そんな時に使える、ポップでキュートな案をご紹介します。

丸を重ねる

head3-1

画像:丸のデザイン

HTML

CSS

ポップさと言えば丸。文字にちょっと重ねるようにして、おしゃれにしてみました。

ポストイット風

head3-2

画像:ポストイット風

HTML

CSS

影を入れてちょっと質感を出して見ました。背景を方眼柄とかにしてみると、より雰囲気が出そうですね。

グラデーション

head3-3

画像:グラデーション

HTML

CSS

ちょっとエレガントな雰囲気ですかね?するりと色が消えていく感じが、柔らかい雰囲気を出してくれます。グラデーションの細かい設定について知りたい方は、下記の記事をどうぞ!

最初の文字を丸の中へ

head3-4

画像:頭文字を装飾

HTML

CSS

見出しにインパクトをつけつつ、可愛らしい感じにしてみました。飾りでつけたちっちゃい丸がいいアクセントになりますね。

手書き風の線

head3-5

画像:手書き風の線

HTML

CSS

下線は下線でも、ちょっと手書きっぽくしてみました。端っこの線がすっと抜けているので、筆でしゅっと書いたような風合いになりますね。こちらはborder-radiusで要素を変形させて、下線を引いた状態にしています。

border-radiusについてもっと詳しく知りたい方は、下記の記事をどうぞ!

CSSのborder-radiusで要素を角丸にする方法
更新日 : 2018年11月27日

スタイリッシュ系

もっとキリッと、かっこよくしたい!そんなイケてるあなたにはこちら、スタイリッシュなデザイン案です。

背景色とデザインボーダー

head4-1

画像:背景色とデザインボーダー

HTML

CSS

背景色だけではちょっと物足りなかったので、斜めのボーダーを入れてみました。白背景の時にしか使えないのでご注意ください!

三角を重ねる

head4-2

画像:三角の装飾

HTML

CSS

ポップが丸ならこっちは三角だ!安易な発想ですが、結構かっこよくないですか?この三角もCSSで作っています。

詳細は下記の記事が詳しく解説してくれていますので、参考にしてみてください。
https://www.granfairs.com/blog/staff/make-triangle-with-css

最初の文字だけ大きくする

head4-3

画像:頭文字を大きくする

HTML

CSS

もっとシンプルかつスタイリッシュにするならこれですね。インパクトも抜群です。

英語の後ろに日本語

head4-4

画像:英語の後ろに日本語

HTML

CSS

英語が入っているだけなのに、なんでこうもかっこいいんですかね…日本語も入れてあげることでユーザービリティもバッチリです。

もうとりあえずでっかい文字

head4-5

画像:大きい文字

HTML

CSS

もう細かいこと抜きにして、ばーんと出しちゃいましょう。インパクト極大!しかもなんかおしゃれという地味に使える見出しです。

中央揃え系

見出しは左揃えとは限りませんね!ということで中央揃え系の見出し紹介です。

日本語と英語の組み合わせ

head5-1

画像:中央揃え 日本語と英語の組み合わせ

HTML

CSS

英語ずるい、おしゃれになる、ずるい。日本語と強弱をつけて配置するといい感じになりますね。

後ろに丸い飾り

head5-2

画像:文字背景に丸

HTML

CSS

ちょっとロゴっぽい感じになりますね。CSSだけとは思えないデザイン感の見出しにできます。

意外とシンプルに上下ラインもあり

head5-3

画像:上下ライン

HTML

CSS

単純な見出しですが、スッキリしていて汎用性抜群です。borderは偉大。

あえて枠に納めない

head5-4

画像:枠

HTML

CSS

四角だからって文字を全部収める必要はないんじゃない?

という発想の元出来上がりました。丸よりもカチッとスタイリッシュですね。

文字の端に飾りの四角

head5-5

画像:文字端に四角の装飾

HTML

CSS

ちょっと幾何学っぽい感じを出してみました。これもスタイリッシュな雰囲気ですね。

その他の見出し案

CSSではもっといろんな見出しを作ることができます。色々な記事がたくさんの案を紹介しているので、ぜひこちらも参考にしてください。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 – サルワカ
https://saruwakakun.com/html-css/reference/h-design

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
https://www.nxworld.net/tips/50-css-heading-styling.html

シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
http://fit-jp.com/cssheading20/

CSSだけでは高条件の案件獲得が難しい

画像:Shutterstock

WEBサイトの見栄えを整えるCSSですが、CSSだけでは好条件の案件を獲得することが難しいのが現状です。

CSSと合わせてJavaScriptやPHPといったプログラミング言語も学ぶことで、更にできる事が広がりあなたの市場価値を高めることができます。

CSSだけの案件はまだ少ない

もちろんCSSを学ぶことで出来ることは広がりますが、仕事獲得という面で考えるとCSSだけでは厳しい面もあります。なぜなら案件自体は多いのですが、3〜5万ほどの低単価帯が多いのです。

しかし、先ほどお伝えしたJavaScriptPHPなども扱えるとなると、仕事獲得のしやすさや単価もグッと上がります。

だからこそ今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。

でもどの言語を学べばいいんだろう……。

いざプログラミング言語を選ぶとなるとこのような悩みが出てきますよね。そこで作りたいものから必要なプログラミング言語や簡易的な学習プランが分かるプログラミング診断アプリを用意しました。

あなたの作りたいものにあった学習プランと必要なスキルが分かります。ぜひご利用ください。

挫折せずにスキルを身につけたいなら

CSSに合わせて他のプログラミング言語を身に付けることをオススメしましたが、

ここから他にも学ぶのは大変だし挫折しそう……。

と思ってしまう方もいることでしょう。確かにCSSの習得だけでも学ぶべきことは多く大変です。そこに加えて他の言語を身に付けると考えると、難しく感じてしまいますよね。

そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?

弊社では、あなたの目的に合わせて専用のオーダーメイドカリキュラムを作成し、現役エンジニアの講師が専属であなたの学習をサポートします。そのため、つまづくことなく学習をすすめることができますよ。

いきなり入会する必要はありません。まずは無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。

下記ボタンより予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。

無料体験を予約する

まとめ

いかがでしたか?今回は「2018年に流行りそうな見出し」として、いろいろと紹介してみました。テクニックが必要なものもいくつかありますが、どれもCSSオンリーで作れちゃいます。

皆さんの素敵なサイト作りの参考になれば幸いです!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説