IT

CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

CSSでおしゃれな装飾!コピペで見出しをデザインしよう!
CSSでおしゃれにデザインされた見出しはページ全体を見やすくしてくれます。
見出しだけで雰囲気も変わるので、これから紹介するものをコピペしてみなさんのサイトにぴったりの見出しを見つけてください。

HTMLやCSSを紹介するとき、このサイトでは、jsFiddleを使用しています。jsFiddleについて詳しくは下記をご覧ください。

シンプルに線だけ


基本となる下線だけのものです。

基本となる下線を太くし色をつけました。また、文字の上下に余白(padding)を追加することで、見出しが大きく見え強調される効果があります。

下線の種類をdashedにして線の太さを変えました。ここでの線種はdashedを使用していますが、この他の線種にしたい場合はこちらを参照してください。

左だけのものです。padding:15pxは上・右・下・左均等に15pxあけるという意味です。

左と下線の組み合わせです。padding:5px 20pxは上下5px左右20pxあけるという意味です。

二重線の上下です。下だけにしたい場合はborder-topの箇所を消してください。

文字を線で囲むデザイン。

一工夫の線


左のborderの半分だけに色を指定しています。

右端が徐々に透明になっているデザインです。紹介してる線の色は緑色の蛍光色ですが、お好みで色を変えてもいいですね。

短い線です。widthとheightで線の長さ、太さが調整できます。

二色の線です。widthの15%の数字を上げると、青色の割合が多くなります。

線+背景色+影


背景色と文字色を指定する基本的なデザイン。

かなりインパクトのあるものができました。色が与える印象はすごいですね!

ぼやっとした影を付けて立体感を出しました。
みゆ
みゆ

角を丸くしたい場合は、border-radius:〇px;を追加してまるのところに20pxなど数字を入れてください。


角に丸みをもたせる「border-radius」と、下にborderを指定すると立体感のあるボタン風ができます。

背景の内側に線


borderとbox-shadowの組み合わせです。

おしゃれ


文字の横に線があります。CSSのh2にあるmargin-left:30px;の数字を大きくすると文字全体が右に動きます。

最初の文字だけ大きくなります。最初の文字の大きさを変えたい場合はfont-sizeの数字で調整してください。

文字の後ろにサブタイトルを付けました。CSSにあるfont-sizeで前と後ろの文字の大きさを変える事ができます。

斜めの線でおしゃれに

中央に縦長に配置するデザインです。文章の中の見出しで使うより、ページの最初に使うとかっこいいですね。

シンプルに中央で上下に線があるだけですが、とてもまとまっていますね。

左寄せにしたい場合はh2を全て消してください。

下線をストライプにしました。

四隅がクロスしているデザインです。線の色や太さを変えるとガラリと印象が変わります。

反射しているデザインです。全てのブラウザに対応しているわけではないので、普通の黒文字に見える方は違うブラウザでご確認下さい。

細い線+ワンポイント


長方形だけでなく、丸(サークル)もできます。

上にborder-bottomを指定しただけです。印象がかわりますね。

両端をまるくしました。

付箋風


右下に影を付けるだけでふわっと角が持ち上がり付箋風のできあがりです。

マーカー


下の部分にだけマーカーが引かれています。
タイトルが長いと2行となり、横幅が小さいスマートフォンなどで見ると2行目だけしかマーカーがつきません。ご注意ください。

上にあるマーカーのtransparent60%の数値を0にすると、文字全体にマーカーを引いたようになります。

最後の数字を100%などにすると、マーカーの上部分が徐々に透明になります。

吹き出し風


基本となる下向き中央の吹き出しです。
三角を中央から左右どちらかに変更したい場合は、「left:5%」の数字を変更してください。

上の基本となる吹き出しの角を丸くしました。border-radius:10px;を追加しただけです。

枠線だけの吹き出しです。
「left:5%」は三角の位置が左から5%の位置(中央)にあることを示しています。位置を変更したい場合はこの数字を変更してください。

ここに載せきれないCSSだけで作る吹き出しを集めたページを用意しました。興味のある方はこちらも合わせて読んでみてください。

リボン風


基本的なリボンです。

基本的なリボンに縫い目を付けました。

両端が山形になっているリボンです。

両端が山形になっているリボンに線を追加しました。

両端に折り目があるリボンです。メインの色はもちろん、文字色や折り目の色も変更可能です。

上のリボンにtext-align:center;を追加して、文字の位置を中央にもってきました。centerをrightに変えると文字が右にきます。

両端を折り曲がっているおしゃれなリボンです。最初にあるwidth:300px;の数字を大きくするとリボンの幅が大きくなります。必要に応じて変えて下さい。

他にもシンプルなものから複雑なものまで、こちらのCSSで広がる!囲み枠(ボックス)デザイン【コピペ可】で紹介しています。

最後に

デザイン一つでページ全体の印象が変わるのが見出しです。
個性のあるページをみると見出しにもインパクトがあるものだったり、ビジネス系のページではシンプルに、色は黒だけしか使用しないなど管理者の性格と伝えたい内容が伝わってきます。

たくさんの見出しを紹介しましたが、私がおすすめしたいのはページ内で何種類もデザインされた見出しを使用するのではなく、一種類を全てに使用するなどある程度統一感を持つといいと思います。

ごちゃごちゃしたページは読者の離脱する確率が高くなるというデータもあるくらいなので!
シンプル イズ ベストです!

関連記事

  1. 算定基礎届と賞与支払届をGビズIDを使って電子申請

    IT

    年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビズIDを使って電子申請してみよう

    日本年金機構のホームページには詳しく情報が紹介されていると思い…

  2. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>

    CSSだけで作れる「吹き出し」をご紹介します!会話風のものやワ…

  3. 収益1,000円達成でGoogle AdSenseからPINコードが郵送される

    IT

    収益1,000円達成でGoogle AdSenseからPINコードが郵送される!

    Google AdSense(以下、アドセンス)からPINコー…

  4. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=radioが原因?P…

    このブログもワードプレスを利用して作られていますが、カスタムフ…

  5. マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    IT

    マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    windows10にして何枚かの画像を見る時にマウスホイールを…

  6. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

    家にいながら行政手続き!GビズIDを取得してみよう!今から始める電子申請

    毎年5・6・7月になると固定資産税や自動車税、住民税に法人税な…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

  1. タカラトミーファンズ福袋2020
  2. akippa (あきっぱ)
  3. 送料全国一律のクリックポスト
  4. 「食育」保育園で人参堀
  5. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船

最近の記事

  1. 長岡花火の有料観覧席チケットを購入しよう!船上桟敷席(屋形船…
  2. 我が家のクリスマスツリー2020
  3. 種類いろいろ!CSSのborder(線)の使い方
  4. 毎年3,000Pゲット!子育てドコモユーザー必見!「ドコモ子…
  5. 今がリュウソウジャー最強竜装セットの底値?購入は放送終了1か…
  1. akippa (あきっぱ)

    その他

    赤レンガ倉庫のイベントはakippa (あきっぱ)で事前に駐車場予約!満車の心配…
  2. ロッテとトミカキャンペーン

    グルメ

    チョコパイとトミカがコラボ!チョコパイトミカが当たるキャンペーン!トミカ50周年…
  3. 年間ビジターアンケートの落とし穴

    IT

    突然現れる「年間ビジターアンケート」は詐欺!ラッキービジターがきたら要注意!
  4. 長岡花火ツアー会社一覧

    遊び

    長岡花火はツアーで行こう!乗ってるだけでもう会場?ツアー会社一覧
  5. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>
PAGE TOP