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; }
-
＞＞テキストを変形する（5） - 平体 テキストに装飾
サンプルテキスト ABCDEFG
※ テキストに平体をかけます。
[ 閉じる ]
htmlソース
<p class="text-ex17"> サンプルテキスト ABCDEFG </p>
CSS
.text-ex17{ transform: scale(1.0, 0.6); /* フォントに平体をかけます */ font-size: 30px !important; /* 強制的にフォントを大きくします */ }
-
＞＞タイトルにアイコンをつける (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; }