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. カスタムフィールドテンプレートのエラー

    IT

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

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

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

    IT

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

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

  3. マルウェア?突然パソコンがスキャンされる

    IT

    ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マルウェア?これは詐欺です!

    普通にパソコンを使っていただけでした。私のブログの中で…

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

    IT

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

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

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

    IT

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

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

  6. 自作パソコン

    IT

    初めての自作デスクトップパソコン!画像を使って各パーツの役目と使用パーツ紹介Part1

    大きい買い物をしなければいけない日が来ました!それはデ…

コメント

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

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

おすすめ記事

  1. ロッテとトミカキャンペーン
  2. 亀頭包皮炎(きとうほうひえん)
  3. 餃子の王将創業祭2019「500円分割引券」
  4. 子ども用水筒はカバーがおすすめ
  5. クリーミーマヨネーズ味アイス「森永乳業」

最近の記事

  1. トイザらス限定!仮面ライダーセイバー&仮面ライダーブレイズ完…
  2. ビープ音4回はホコリが原因?DellデスクトップPCの異常は…
  3. 【東京モーターショー2019】幼児がいるなら目的決めて行こう…
  4. お年玉付き年賀はがきの切手シートが当たりました!
  5. 仮面ライダー「変身ベルトDXシリーズ」用延長ベルトで大人も変…
  1. マイナポイントは電子マネーWAONがおすすめ

    IT

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

    お金と仕事

    誕生日や母の日・父の日、お礼やお祝いは「Amazonギフト券」に決まり!
  3. トイザらス限定仮面ライダーセイバー&仮面ライダーブレイズ 完全なりきりセット

    子育て

    トイザらス限定!仮面ライダーセイバー&仮面ライダーブレイズ完全なりきりセットが豪…
  4. バーコード5枚でオリジナルトミカ

    子育て

    バーコード5枚でオリジナルトミカ「Toyota GR Supra GT4 Con…
  5. マルウェア?突然パソコンがスキャンされる

    IT

    ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マルウェア?これは詐欺…
PAGE TOP