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. Altプラスマウスホイールでページが操作できる機能

    IT

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

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

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

    IT

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

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

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

    IT

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

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

  4. ワードプレスの自動入力候補(履歴)を削除する方法

    IT

    Google Chromeでワードプレスの自動入力候補(履歴)を削除する簡単な方法

    まずみなさんはパソコンのブラウザ何をお使いですか?代表…

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

    IT

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

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

  6. PCビープ音4回はホコリが原因

    IT

    ビープ音4回はホコリが原因?DellデスクトップPCの異常は掃除で復活!

    電子機器は突然故障したり終わりを告げる事が多いですよね・・・。…

コメント

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

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

おすすめ記事

  1. アサヒ飲料キャンペーンでトミカ&リカちゃん&プラレールが当たる
  2. 息子が作るハッピーセットが斬新すぎる
  3. jsFiddle
  4. 仮面ライダー変身ベルトDXシリーズ
  5. さくらの山公園は飛行機を間近で見れる絶景スポット

最近の記事

  1. 誕生日や母の日・父の日、お礼やお祝いは「Amazonギフト券…
  2. 家にいながら行政手続き!GビズIDを取得してみよう!今から始…
  3. 今がリュウソウジャー最強竜装セットの底値?購入は放送終了1か…
  4. 東京ディズニーランドにいた鳥が人に慣れすぎてる!
  5. 小学館の図鑑NEOシリーズのクラフトぶっくは作るだけじゃない…
  1. アパホテル&リゾート<横浜ベイタワー>無料試泊会

    その他

    アパホテル&リゾート<横浜ベイタワー>無料試泊会は見事に落選!
  2. りっくんランド再開館2020

    子育て

    予約制の再開館りっくんランドに行ってみた!さすが自衛隊コロナ禍の感染予防対策は万…
  3. 雪見だいふくイベント

    グルメ

    「ふく」が大きい雪見だいふく無料配布イベント!「ふく」と「福」をゲット☆
  4. 4歳児夜中に突然中耳炎

    子育て

    突然耳に激痛が!夜中に4歳息子が泣き叫んだ理由は「中耳炎」でした!
  5. 新潟名物笹だんごとちまき

    グルメ

    新潟名物!笹だんご&三角ちまきが実家から届きました!でも最初から固い!?
PAGE TOP