html5とCSS3による装飾サンプル
html5とCSS3のサンプルの実用的なものがたくさんあります。
その一部をランダムに表示しています。 詳しくは サンプルページへどうぞ
-
＞＞タイトルに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; }
-
＞＞タイトルの装飾 定番の付箋風見出し 見出しの装飾
見出しの装飾 付箋風見出しライン付き
※ 定番の付箋風見出しにラインをつけたものです。
[ 閉じる ]
htmlソース
<h4 class="title-ex16"> 見出しの装飾 付箋風見出しライン付き </h4>
CSS
.title-ex16{ margin-top: 16px !important; /* 本システムCSSの干渉を変更します */ padding: 0 0 0 8px !important; /* 本システムCSSの干渉を変更します */ border-left: solid 8px pink; border-bottom: solid 1px #ccc; color: #333; font-size: 20px !important; font-weight: normal; height: 26px !important; }