コメントはまだありませんこんにちは、中村です。最近、WEB周りのところで自社のサイトだったり、お世話になっている方のお手伝いでサイト内のCSSの変更をさせていただく機会があるのですが、意外と見出しにこまることが多いので、デザインのテンプレートも兼ねてCSSでの見出しをいくつかご紹介します。この記事の目次CSSを利用した見出しまとめ見出し(下にボーダー)見出し(レフトにボーダー)見出し(背景色:グレー)見出し(上下のボーダー)見出し(ボタン調)見出し(影)見出し(影を重ねる)見出し(文頭にアイコン)見出し(ボーダーで三角を作る)見出し(角丸)見出し(重ね図形)見出し(一部角丸)見出し(隆起)見出し(擬似クラス利用)追加でCSSだけで作った見出しを追加しました。transparent;}テキストの下にボーダーを差し込んだ見出しです。シンプルなので使い勝手が良いです。pixel数やカラーコードを変えることで、線の太さやカラーの調整が行えます。(ボーダーのpixel数を変更すると、場合によってはレイアウトの崩れがおこる場合があります)「border-left」に幅を指定してtransparent(透明)を適用することで、鋭角なラインを生じさせることができます。#5A718F;}レフトにボーダーを加えた見出しです。こちらもシンプルで使い勝手の良いCSSです。初心者の方でも簡単に設定ができるのでオススメです。#E2E2E2;}背景色を変えて、少しだけ文章と異なるように見せる見出しです。カラーコードの書き換えだけで、そのサイトにあった色合いに変更ができます。CSSに馴染みの無い方でもさわりやすいCSSです。0;}ボーダーを二重線に設定することで、少し上品な見出しが作れます。カラーコードを変えるだけで、ボーダーの色は変更が可能です。#EFEFEF;}box-shadowのinsetを利用することで、少しボタンのような印象の見出しが作れます。色を修正するだけでポップな雰囲気にもなるので、少しセンスの良いデザインをしたいときには使えるCSSの見出しです。#fff;}box-shadowを利用して、影を付けることで高級感のある見出しが作れます。カラーコード}という指定になっています。#fff;}「box-shadow」は重ねがけができるプロパティです。「,」で区切ることで、こういったボーダー柄のようなエフェクトを作ることもできます。#5A718F;}擬似要素を利用して、文頭に「◆」を追加しています。これは意図的に入力しなくても、CSSの指定さえできていれば自動で付与されます。contentに渡す値を変更すれば、文字列であればほぼ表示させることができます。自分の好きな記号やテキストを使うことも可能です。!important;}ボーダーでは、transparent(透明)を上手くつかうことで三角形を再現することができます。テキストに頼らずに図形を作成することができるので、知っておくと重宝します。0;}border-radiusでは角丸を実装することができます。これとボーダーを利用して吹き出しを作ったりすることもできますし、こちらの見出しのように曲線のボーダーを作ることもできます。#5A718F;}図形が2つ重なったような形をbox-shadowによって実装しています。ぼかしのpixelを0に設定し、x,y軸にずらすことで作成しています。カジュアルな見出しを作ることができます。0;}border-radius(角丸)は、角ごとの設定ができるので、不安定な角丸をつくることもできます。#5A718F;}borderにoutsetを指定することで、出っ張ったような隆起したデザインの枠線を作ることができます。rotateZ(-8deg)scale(0.6);}擬似クラスとcontentを利用して、独自の枠線のような装飾をつくれます。transformを使うことで、色々な変化を付けることができます。追加でCSSだけで作った見出しを追加しました。見返したら、「紹介してるやつ大半レベルひっくいな〜。CodePen.左からラベルっぽいものが突出しているような見出しです。CodePen.CSSのbeforeとafterの擬似クラスを利用して、ダイヤっぽいものを装飾として頭にいれています。CodePen.CSS3のAnemationを利用して、くるくると回るアイコンを追加しました。CodePen.なんか、擬似クラスを利用してもっと綺麗な見出しを作りたいなぁと思いながら作ったものです。見たら、多分これborderとbox-shadowで同じエフェクト作れますね。CodePen.ラベルっぽいものを取り付けました。テキストは擬似クラスのcontentプロパティの値を変更すれば変わります。歩バランスが良くないなと思いましたが、ゲシュタルト崩壊しました。CodePen.本の付箋っぽいようなデザインを見出しに入れました。CodePen.見出しの頭にハートをつけました。これ作れるのは知ってたので自力で試行錯誤してたのですが、結局わからずググりました。CodePen.鉛筆です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。