CSS3・html5でのテキスト・見出しの装飾サンプル

ここで紹介するソースコードはご自由に利用いただけるものですが、アイコンなど一部にMITライセンスのものがありますので そのソースについては適切に著作権表示を行っています。 詳しくは著作権についてをご覧ください。
(注意)IE11には対応していません。

カテゴリ別に表示出来ます

  • >>テキストを変形する(4) - 長体 テキストに装飾

    サンプルテキスト ABCDEFG


    ※ テキストに長体をかけます。

    [ 閉じる ]

    htmlソース

    <p class="text-ex16"> サンプルテキスト ABCDEFG </p>

    CSS

    .text-ex16{ transform: scale(1.0, 1.6); /* フォントに長体をかけます */ font-size: 20px !important; /* 強制的にフォントを大きくします */ margin: 10px 0 !important; font-weight: normal; padding: 1rem !important; }


  • >>テキストを変形する(5) - 平体 テキストに装飾

    サンプルテキスト ABCDEFG


    ※ テキストに平体をかけます。

    [ 閉じる ]

    htmlソース

    <p class="text-ex17"> サンプルテキスト ABCDEFG </p>

    CSS

    .text-ex17{ transform: scale(1.0, 0.6); /* フォントに平体をかけます */ font-size: 30px !important; /* 強制的にフォントを大きくします */ }


  • >>テキスト文字に色を付ける テキストに装飾

    サンプルテキスト ABCDEFG


    ※ テキスト文字に淡色ではない色を付けます。

    [ 閉じる ]

    htmlソース

    <p class="text-ex18"> サンプルテキスト ABCDEFG </p>

    CSS

    .text-ex18{ color: transparent; /* 透明を指定 */ background: linear-gradient(to right, red 0%, yellow 100%); /* グラデーション指定 */ background-clip: text; /* 要素の背景をtext で切り抜く */ width: 55% !important; /* グラデーションを文字全体にかけるため幅を調節します */ font-size: 30px !important; /* 強制的にフォントを大きくします */ }


  • >>テキストに蛍光ペン風マーキング テキストに装飾

    サンプルテキスト ABCDEFG あいうえおかきくけこ


    ※ テキストに蛍光ペンでマークしたような効果の装飾をします。

    [ 閉じる ]

    htmlソース

    <p class="text-ex19"> サンプルテキスト <em>ABCDEFG</em> あいうえおかきくけこ </p>

    CSS

    .text-ex19{ line-height: 1; font-size: 20px !important; /* 強制的にフォントを大きくします */ padding: 1rem; } .text-ex19 em { background: linear-gradient(transparent 30%, yellow 60%); /* マーキングする */ }


  • >>背景の採色・模様 (1) - 市松 赤黒柄 背景の装飾

    背景の採色・模様


    ※ 市松模様の背景パターンです。

    [ 閉じる ]

    htmlソース

    <p class="background-ex1"> <span>背景の採色・模様</span> </p>

    CSS

    .background-ex1 { background-color: red; background-image: linear-gradient(45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 0), linear-gradient(45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 0); background-size: 30px 30px; background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; /* ここまでが背景の柄を描く部分 */ color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex1 span{ padding-left: 10px; }


  • >>背景の採色・模様 (2) - 市松 タンジロウ柄 背景の装飾

    背景の採色・模様


    ※ 市松模様の背景パターンです。

    [ 閉じる ]

    htmlソース

    <p class="background-ex2"> <span>背景の採色・模様</span> </p>

    CSS

    .background-ex2 { background-color: #a5c9c1; background-image: linear-gradient(45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 0), linear-gradient(45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 0); background-size: 30px 30px; background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex2 span{ padding-left: 10px; }


  • >>見出しを下線で装飾する(1) 見出しの装飾

    見出しを下線で装飾する 方法その(1)


    ※ タイトル(テキスト)の下線をposition → absoluteを利用して相対的な位置指定で 装飾する。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex1"> 見出しを下線で装飾する 方法その(1) </h4>

    CSS

    .title-ex1{ position: relative; padding: 0.3em 0.3em 0.5em 0 !important; /* 本システムCSSの干渉を変更します */ color: #333; height: 32px; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; } .title-ex1::after { position: absolute; bottom: 2px; left: 0; z-index: -1; content: ''; width: 100%; height: 16px; background: linear-gradient(45deg, green 50%, white 100%); }


  • >>見出しを下線で装飾する(2) 見出しの装飾

    見出しを下線で装飾する 方法その(2)


    ※ h4タグ属性のボーダーに対して太さ色で装飾をする。 色のグラデーションは green → whiteと設定
    linear-gradient( グラデーションの角度または方向, 開始色, 途中色, 終了色 )

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex2"> 見出しを下線で装飾する 方法その(2) </h4>

    CSS

    .title-ex2 { padding: 0 0 8px 0 !important; /* 本システムCSSの干渉を変更します */ border-bottom: 16px solid; border-image: linear-gradient(to right, green 0%, #fff 100%); border-image-slice: 1; display: flex; align-items: flex-end !important; /* 下線に合わせるため */ line-height: 10px; color: #333; font-size: 20px !important; font-weight: normal; }


  • >>見出しを下線で装飾する(3) 見出しの装飾

    見出しを下線で装飾する 方法その(3)


    ※ テキストのbackground属性を利用して装飾する。

    [ 閉じる ]

    htmlソース

    <p class="title-ex3"> 見出しを下線で装飾する 方法その(3) </p>

    CSS

    .title-ex3 { padding: 0 0 4px 0 !important; /* 本システムCSSの干渉を変更します */ background-image: linear-gradient(to right, green, white); background-repeat: no-repeat; background-size: 100% 32%; background-position: bottom; color: #333; height: 48px !important; font-size: 20px !important; font-weight: normal; }


  • >>文字色の変更 ロールオーバー

    サンプルテキスト


    ※ マウスオーバー時に文字色を変更し、下線を波線にする。
    text-decoration-style: wavy の他に solid double dotted dashed がある。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex1"> <a href="#">サンプルテキスト</a> </p>

    CSS

    .hover-ex1 a{ color: #333; text-decoration-line: none; } .hover-ex1 a:hover{ color: red; text-decoration-line: underline; text-decoration-style: wavy; }