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

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

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

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

    サンプルテキスト ABCDEFG


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .text-ex16{ text-align: center; font-size: 2.2em !important; /* 強制的にフォントを大きくします */ transform: scale(1.0, 1.6); }


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

    サンプルテキスト ABCDEFG


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .text-ex17{ text-align: center; font-size: 2.2em !important; /* 強制的にフォントを大きくします */ transform: scale(1.0, 0.6); }


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

    サンプルテキスト ABCDEFG


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .text-ex18{ width: 55% !important; /* グラデーションを文字全体にかけるため幅を調節します */ font-size: 2.2em !important; /* 強制的にフォントを大きくします */ color: transparent; background: linear-gradient(to right, red 0%, yellow 100%); -webkit-background-clip: text; }


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

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


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .text-ex19{ line-height: 1; } .text-ex19 em { background: linear-gradient(transparent 30%, yellow 60%); }


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

    背景の採色・模様


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .background-ex1 { color: #fff; 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; padding-left: 1rem; font-weight: bold; }


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

    背景の採色・模様


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .background-ex2 { color: #fff; 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; padding-left: 1rem; font-weight: bold; }


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

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


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .title-ex1{ position: relative; padding: 0.5em 0.5em 0.5em 0 !important; } .title-ex1::after { position: absolute; bottom: 2px; left: 0; z-index: -1; content: ''; width: 100%; height: 12px; 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; /* 本システムの基本的な設定を上書き 通常は不要です */ border-bottom: 16px solid; border-image: linear-gradient(to right, green 0%, #fff 100%); border-image-slice: 1; height: max-content; display: flex; align-items: flex-end !important; /* 下線に合わせるため */ line-height: 10px; }


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

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


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

    [ 閉じる ]

    htmlソース

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

    CSS

    .title-ex3 { padding: 0 !important; background-image: linear-gradient(to right, green, white); background-repeat: no-repeat; background-size: 100% 30%; background-position: bottom; }


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

    サンプルテキスト


    ※ マウスオーバー時に文字色を変更し、下線を波線にする。
    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; }