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

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

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

  • >>見出しのアイコンをテキストキャラクターで代用する(2) アイコンで装飾

    見出しにアイコンをつける(テキストキャラクター2)


    ※ サンプルにするまでもないのですが、最もシンプルなテキスト利用例です。
    htmlコーディングの超初心者向け?です。 (^_^;)

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex9"> <span>■</span>見出しにアイコンをつける(テキストキャラクター2) </h4>

    CSS

    .icon-ex9{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex9 span { font-size: 0.9em; color: pink; padding-right: 8px; }


  • >>見出しにbefore疑似要素でアイコンを設定する(SVG版) アイコンで装飾

    見出しにbefore疑似要素でアイコンを指定する


    ※ before疑似要素でアイコンを指定する。
    このSVGはMITライセンスでの利用となります。 Copyright TopeconHeroes ! all right reserved.
    他にもアイコンがいっぱいあります。 https://icooon-mono.com/

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex8"> 見出しにbefore疑似要素でアイコンを指定する </h4>

    CSS

    .icon-ex8{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex8::before { content: ''; width: 20px; height: 20px; background: url('/sysdata/images/sample/constract_ico.svg') no-repeat; background-size: contain; padding-right: 8px; }