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

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

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

  • >>背景の装飾 - 色のグラデーション (3) 見出しの装飾

    背景の装飾 色のグラデーション (3)


    ※ 背景をベタ塗ではなくグラデーションの指定で塗ります。
    red(赤)からyellow(黄色) への縦のグラデーションです。

    [ 閉じる ]

    htmlソース

    <h4 class="background-ex3"> 背景の装飾 色のグラデーション (3) </h4>

    CSS

    .background-ex3 { padding-left: 20px !important; /* 本システムCSSの干渉を変更します */ background: linear-gradient(transparent 0%, red 70%, yellow 90%); color: #fff; font-size: 20px !important; font-weight: normal; height: 56px !important; display: flex; align-items: center; }


  • >>背景の装飾 - 色塗 (1) 見出しの装飾

    背景の装飾 色塗 (1)


    ※ 背景を色で塗ります。

    [ 閉じる ]

    htmlソース

    <h4 class="background-ex4"> 背景の装飾 色塗 (1) </h4>

    CSS

    .background-ex4 { padding-left: 2rem !important; /* 本システムCSSの干渉を変更します */ background: linear-gradient(15deg, red 50%, yellow 50%); color: #fff; font-size: 20px !important; font-weight: normal; height: 56px !important; display: flex; align-items: center; }


  • >>見出しの装飾 - 左右にラインを入れる 見出しの装飾

    見出しの装飾 - 左右にラインを入れる


    ※ 背景色を利用して疑似的にラインを描画します。

    [ 閉じる ]

    htmlソース

    <h4 class="background-ex5"> <span>見出しの装飾 - 左右にラインを入れる</span> </h4>

    CSS

    .background-ex5 { margin-top: 12px !important; /* 本システムCSSの干渉を変更します */ position: relative; color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; justify-content: center; } .background-ex5 span { position: relative; z-index: 100; display: inline-block; margin: 0 2.5em; padding: 0 1em; background-color: #fff; text-align: left; } .background-ex5::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background-color: red; /* 線の色 */ }


  • >>見出しの装飾 - マーカーでひいたようなラインを入れる 見出しの装飾

    見出しの装飾 - マーカーでひいたようなラインを入れる


    ※ 背景色を利用して文字の半分のみマーカーをひいたように色をつけます。

    [ 閉じる ]

    htmlソース

    <h4 class="background-ex6"> <span>見出しの装飾 - マーカーでひいたようなラインを入れる</span> </h4>

    CSS

    .background-ex6 { background: linear-gradient(transparent 50%, #fffea4 0%); }