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. Windows10の標準機能で画面録画

    IT

    無料で使える画面録画!Windows10の標準機能でキャプチャもOK!(スクリーンショット)

    特別なソフトを買うことなくパソコンの画面を簡単に録画できる方法…

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

    IT

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

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

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

    IT

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

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

  4. jsFiddle

    IT

    「jsFiddle」は登録なし!コード動作確認が簡単!埋め込みも可

    自分のサイトを持っていて、いろいろいじっているうちにだんだん既…

  5. 算定基礎届(総括表)だけは郵送で!

    IT

    算定基礎届(総括表)だけは郵送らしい!GビズIDで電子申請したけどこれって・・・

    行政の提出書類はとても複雑で大変だと思うのは私だけでしょうか。…

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

    IT

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

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

コメント

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

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

おすすめ記事

  1. 瀬戸大橋記念公園
  2. 息子が作るハッピーセットが斬新すぎる
  3. 仮面ライダーゼロワンのまくら
  4. ものもらい
  5. 長岡まつり大花火大会

最近の記事

  1. おやつカンパニーxトミカ!食べて当てようトミカキャンペーン2…
  2. 四国に来たら海の幸!徳島の漁協食堂うずしおがおすすめ!きたな…
  3. 2020年小銭貯金額!レア硬貨 昭和61年の10円硬貨があっ…
  4. ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マ…
  5. 幼児38度の高熱一週間!インフルでも溶連菌でもない。正体はア…
  1. 算定基礎届(総括表)だけは郵送で!

    IT

    算定基礎届(総括表)だけは郵送らしい!GビズIDで電子申請したけどこれって・・・…
  2. りっくんランド再開館2020

    子育て

    予約制の再開館りっくんランドに行ってみた!さすが自衛隊コロナ禍の感染予防対策は万…
  3. アサヒ飲料CP2020オリジナルトミカ届く

    子育て

    アサヒ飲料キャンペーン2020のオリジナルトミカx3台&マイタウンが届いた!
  4. ロッテサクサク会員登録

    グルメ

    ロッテのサクサク会員登録でお得クーポンやキャンペーンに簡単応募!
  5. タカラトミーファンズ福袋2020

    子育て

    アンケートに答えてタカラトミーファンズ福袋ゲット!
PAGE TOP