【CSSサンプル】見出しタイトル部分のデザインをコピペで装飾する方法

cssの使い方




LINEで送る
Share on LinkedIn
Pocket

CSSだけで見出し部分(hタグ)のデザインを装飾出来るデザインサンプルです。ソースコードをCSSにコピペするだけで簡単に実装できます。シンプルで使えそうなものをセレクトしました。

 

ここでは見出し<h1>としていますが、CSSの記述をh2にすれば、HTMLのh2の部分が装飾されます。以下のCSSのタグをオリジナルタグにすることもできます。

 

(オリジナルタグの例)

CSSのh1の部分をaaaと書き換えて、HTMLで装飾を反映したいテキストを<aaa>テキスト</aaa>として囲います。

WordPressの場合

固定ページや投稿ページから「テキスト」で<h>タグの内側に記述します。

 

 

 

 

吹き出しA

cssでhタグ見出しをコピペでデザイン変更する方法

CSS

 

 

 

 

吹き出しB

CSSのコピペだけでhタグの見出し部分のデザインを見やすくカスタマイズする方法

CSS

 

 

 

吹き出しC

cssでhタグ見出しを装飾して見やすくする方法

CSS

 

 

 

 

 

下ボーダー

cssのコピペでタイトル部分を下ボーダーにする方法

CSS

 

 

 

 

下ボーダー(先頭の文字が大きくなる)

CSSで最初の文字が大きくなるボーダーの見出しタイトルにする装飾

CSS

 

 

 

 

左ボーダー

CSSのコピペでタイトルhタグ見出し部分を左ボーダーに装飾する方法

CSS

 

 

 

左ボーダー(下ボーダー)

CSSで左と下ボーダーの見出しタイトルにコピペで装飾する方法

CSS

 

 

 

 

ボーダーで囲む

cssのコピペで見出しhタグをボーダーで囲うデザインの方法

CSS

 

 

 

 

 

ボーダーで囲む(角丸)

cssにコピペで見出しhタグ部分をボーダー角丸で装飾する方法

CSS

 

 

 

 

ボーダーで囲む(手書きっぽい感じ)

CSSで見出しhタグ部分のデザインを手書き風にするコピペ方法

CSS

 

 

 

 

背景色

cssで見出しの背景色をコピペで装飾する方法

CSS

 

 

 

 

背景色(角丸)

cssで見出し部分を角丸背景色にするコピペ方法

CSS

 

 

 

 

背景色(左ボーダー)

css-htag-desgin-backgroundcollor-sidebar

CSS

 

 

 

 

サブタイトルを表示出来るもの

CSSのコピペでサブタイトルをつける方法

 

HTML

CSS

※見出しの下に表示させたい場合は、span要素の記述位置を変更して、CSSのmargin-bottommargin-topにすることなどで実装できます。

 

 

 

 

折り目(小)

cssで見出しタイトルに折り目をつけるコピペ装飾方法

CSS

 

 

 

 

折り目(大)

css見出しタイトルhタグ部分を折り目にするデザインコピペ装飾方法

CSS

 

 

 

 

ボックスに影をつける

cssで見出しタイトルのボックスに影をつける方法

CSS

 

 

 

このように、CSSのみでも色々デザインを変更することができます。他にもオススメのデザインがあったら教えてくださると嬉しいです。

 

LINEで送る
Share on LinkedIn
Pocket

よく読まれている記事




cssの使い方

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    嶋耕作

    ライター、自主制作アニメも作ったりしている。自身が主催してきたイベント企画で培った集客運営等のノウハウを使ってサイトやYouTubeなどメディア運営のサポートを行っている。