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

※

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

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

  • ＞＞タイトルにアイコンをつける(border-1) アイコンで装飾

    タイトルにアイコンをつける


    ※ CSSでボーダーを変形させてアイコンを作成しています。
    画像を用意しなくて良いので便利ではあります。

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex1"> タイトルにアイコンをつける </h4>

    CSS

    .icon-ex1 { font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex1::before { content: ''; width: 20px; height: 20px; border: 6px solid pink; border-radius: 20px; margin-right: 8px; }


  • ＞＞タイトルにアイコンをつける (border-2) アイコンで装飾

    タイトルにアイコンをつける


    ※ CSSでボーダーを変形させてアイコンを作成しています。
    画像を用意しなくて良いので便利ではあります。

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex2"> タイトルにアイコンをつける </h4>

    CSS

    .icon-ex2 { font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex2::before { content: ''; width: 14px; height: 14px; border: 5px solid pink; background-color: #ffffd6; /* 白抜きの場合ここは#fff */ margin-right: 8px; }


  • ＞＞タイトルにアイコンをつける (border-3) アイコンで装飾

    タイトルにアイコンをつける


    ※ CSSでボーダーを変形させてアイコンを作成しています。
    borderの角の描画特性を利用したアイコンです。 画像を用意しなくて良いので便利ではあります。

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex10"> タイトルにアイコンをつける </h4>

    CSS

    .icon-ex10{ font-size: 20px; display: flex; align-items: center; height: 36px; } .icon-ex10::before { content: ''; box-sizing: border-box; width: 8px; height: 8px; border: 8px solid transparent; border-left: 8px solid pink; }


  • ＞＞タイトルにアイコンをつける (border-4) アイコンで装飾

    タイトルにアイコンをつける


    ※ CSSでボーダーを変形させてアイコンを作成しています。
    borderの角の描画特性を利用したアイコンです。 画像を用意しなくて良いので便利ではあります。

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex11"> タイトルにアイコンをつける </h4>

    CSS

    .icon-ex11{ position: relative; font-size: 20px; font-weight: normal; position: relative; padding-left: 20px !important; display: flex; align-items: center; height: 36px; } .icon-ex11::before { position: absolute; content: ''; box-sizing: border-box; left: 0; width: 6px; height: 10px; background: pink; } .icon-ex11::after { position: absolute; content: ''; box-sizing: border-box; left: 6px; border: 10px solid transparent; border-left: 10px solid pink; margin-right: 10px; }


  • ＞＞タイトルにSVGでアイコンをつける(1) アイコンで装飾

    タイトルにアイコンをつける（SVG-1）


    ※ タイトルにSVGでアイコンをつける。 このSVGはMITライセンスでの利用となります。
    The MIT License (MIT) Copyright © 2019-2020 css.gg

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex3"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0519 14.8285L13.4661 16.2427L17.7088 12L13.4661 7.7574L12.0519 9.17161L13.8804 11H6.34321V13H13.8803L12.0519 14.8285Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7782 19.7782C24.0739 15.4824 24.0739 8.51759 19.7782 4.22183C15.4824 -0.0739417 8.51759 -0.0739417 4.22183 4.22183C-0.0739417 8.51759 -0.0739417 15.4824 4.22183 19.7782C8.51759 24.0739 15.4824 24.0739 19.7782 19.7782ZM18.364 18.364C21.8787 14.8492 21.8787 9.15076 18.364 5.63604C14.8492 2.12132 9.15076 2.12132 5.63604 5.63604C2.12132 9.15076 2.12132 14.8492 5.63604 18.364C9.15076 21.8787 14.8492 21.8787 18.364 18.364Z" fill="currentColor" /> </svg> タイトルにアイコンをつける（SVG-1） </h4>

    CSS

    .icon-ex3{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex3 svg{ width: 24px; margin-right: 8px; margin-bottom: 4px; }


  • ＞＞タイトルにSVGでアイコンをつける(2) アイコンで装飾

    タイトルにアイコンをつける（SVG-2）


    ※ タイトルにSVGでアイコンをつける。 このSVGはMITライセンスでの利用となります。
    The MIT License (MIT) Copyright © 2019-2020 css.gg

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex4"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0519 14.8285L13.4661 16.2427L17.7087 12L13.4661 7.7574L12.0519 9.17161L13.8803 11H6.34318V13H13.8803L12.0519 14.8285Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M1 19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5C2.79086 1 1 2.79086 1 5V19ZM5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21Z" fill="currentColor" /> </svg> タイトルにアイコンをつける（SVG-2） </h4>

    CSS

    .icon-ex4{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex4 svg { width: 24px; margin-right: 8px; margin-bottom: 4px; }


  • ＞＞タイトルにSVGでアイコンをつける(3) アイコンで装飾

    タイトルにアイコンをつける（SVG-3）


    ※ タイトルにSVGでアイコンをつける。 このSVGはMITライセンスでの利用となります。
    The MIT License (MIT) Copyright © 2019-2020 css.gg
    他にもアイコンがいっぱいあります。 https://css.gg/

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex5"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.2426 16.3137L6 12.071L7.41421 10.6568L10.2426 13.4853L15.8995 7.8284L17.3137 9.24262L10.2426 16.3137Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5ZM5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3Z" fill="currentColor" /> </svg> タイトルにアイコンをつける（SVG-3） </h4>

    CSS

    .icon-ex5{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex5 svg { width: 24px; margin-right: 8px; margin-bottom: 4px; }


  • ＞＞タイトルにSVGでアイコンをつける(4) アイコンで装飾

    タイトルにアイコンをつける（SVG-4）


    ※ タイトルにSVGでアイコンをつける。 このSVGはMITライセンスでの利用となります。
    The MIT License (MIT) Copyright © 2019-2020 css.gg
    他にもアイコンがいっぱいあります。 https://css.gg/

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 14.5V16.5H13V14.5H15V12.5H13V10.5H11V12.5H9V14.5H11Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M4 1.5C2.89543 1.5 2 2.39543 2 3.5V4.5C2 4.55666 2.00236 4.61278 2.00698 4.66825C0.838141 5.07811 0 6.19118 0 7.5V19.5C0 21.1569 1.34315 22.5 3 22.5H21C22.6569 22.5 24 21.1569 24 19.5V7.5C24 5.84315 22.6569 4.5 21 4.5H11.874C11.4299 2.77477 9.86384 1.5 8 1.5H4ZM9.73244 4.5C9.38663 3.9022 8.74028 3.5 8 3.5H4V4.5H9.73244ZM3 6.5C2.44772 6.5 2 6.94772 2 7.5V19.5C2 20.0523 2.44772 20.5 3 20.5H21C21.5523 20.5 22 20.0523 22 19.5V7.5C22 6.94772 21.5523 6.5 21 6.5H3Z" fill="currentColor" /> </svg> タイトルにアイコンをつける（SVG-4） </h4>

    CSS

    .icon-ex6 { font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex6 svg { width: 24px; margin-right: 8px; margin-bottom: 4px; }


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

    OK見出しにアイコンをつける（テキストキャラクター1）


    ※ テキストを白文字にして影をつけてアイコン風にしています。

    [ 閉じる ]

    htmlソース

    <h4 class="icon-ex7"> <span>OK</span>見出しにアイコンをつける（テキストキャラクター1） </h4>

    CSS

    .icon-ex7{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex7 span{ font-family: Arial, sans-serif, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3'; font-size: 1.2em; color: #fff; padding-right: 8px; text-shadow: 2px 2px 1px red, -2px 2px 1px red, 2px -2px 1px red, -2px -2px 1px red, 2px 0px 1px red, 0px 2px 1px red, -2px 0px 1px red, 0px -2px 1px red; }


  • ＞＞見出しのアイコンをテキストキャラクターで代用する(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; }


∧