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. 不労所得?chatGPTに負けない!2年以上ほったらかしブログが毎日お金を生んで…

関連記事

  1. マイナポイントは電子マネーWAONがおすすめ

    IT

    マイナポイントは電子マネーWAONがおすすめ!普段よく使うお店を登録しよう

    私はよくイオンへお買い物に行って、電子マネーWAON払いもしく…

  2. 確定申告e-taxの推奨ブラウザはInternet Explorer

    IT

    【確定申告】e-Tax利用時のブラウザはInternet Explorer!Microsoft Ed…

    確定申告をしなければいけない方にとって、この一か月は忙しい期間…

  3. 年間ビジターアンケートの落とし穴

    IT

    突然現れる「年間ビジターアンケート」は詐欺!ラッキービジターがきたら要注意!

    みなさんは画像のような画面を見たことはありますか?イン…

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

    IT

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

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

  5. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりすることができる?偶然見…

    パソコンでインターネットを何気なく使っていて突然画面が変わりま…

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

    IT

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

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

コメント

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

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

おすすめ記事

  1. イオンキッズパブリック限定Nintendo Switch抽選販売
  2. 飲み口いろいろ水筒タイプ別紹介
  3. マルウェア?突然パソコンがスキャンされる
  4. 算定基礎届と賞与支払届をGビズIDを使って電子申請
  5. 小学館図鑑NEOシリーズは特典いっぱい

最近の記事

  1. 大量の明星チャルメラの外袋が届きました。明星チャルメラxトミ…
  2. 収益1,000円達成でGoogle AdSenseからPIN…
  3. 運転苦手は徒歩で行こう!香川県・天空の鳥居「高屋神社」までは…
  4. 横浜防災フェア2019@赤レンガ倉庫!はしご車搭乗体験や水難…
  5. 2020年小銭貯金額!レア硬貨 昭和61年の10円硬貨があっ…
  1. ドコモ東京2020オリンピック「親子で応援に行こう!キャンペーン」

    お金と仕事

    ドコモキャンペーンに応募しよう!「東京2020オリンピック親子で応援に行こう」
  2. エガちゃんねる EGA-CHANNEL

    その他

    【Youtube】江頭2:50のエガちゃんねる!視聴者の一人として応援してます!…
  3. 4歳児夜中に突然中耳炎

    子育て

    突然耳に激痛が!夜中に4歳息子が泣き叫んだ理由は「中耳炎」でした!
  4. CSSで作る!コピペOK<吹き出しデザイン>

    IT

    CSSで作る!コピペOK<吹き出しデザイン>
  5. アサヒ飲料オリジナルトミカ&マイタウン当選

    グルメ

    【当選】オリジナルトミカx3台&マイタウン「アサヒ飲料キャンペーン」
PAGE TOP