カテゴリ別に表示出来ます
-
＞＞背景の採色・模様 （9） - チェック柄 背景の装飾
背景の採色・模様
※ チェック柄の背景パターンです
[ 閉じる ]
htmlソース
<p class="background-ex13"> <span>背景の採色・模様</span> </p>
CSS
.background-ex13{ background-color: #9d5b8b; background-size: 10px 10px; background-image: linear-gradient(45deg, #d0af4c 25%, #d0af4c 25%, transparent 25%, transparent 75%, #d0af4c 75%, #d0af4c 75%), linear-gradient(-45deg, #d0af4c 25%, #d0af4c 25%, #d0af4c 25%, transparent 75%, #d0af4c 75%, #d0af4c 75%); color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; border: solid 1px #aaa; } .background-ex13 span{ padding-left: 10px; }
-
＞＞背景の採色・模様 （10） - チェック柄 背景の装飾
背景の採色・模様
※ チェック柄の背景パターンです。
[ 閉じる ]
htmlソース
<p class="background-ex14"> <span>背景の採色・模様</span> </p>
CSS
:root { --pt-color: pink; --b-color: #ccc; } .background-ex14{ background-color: var(--b-color); background-image: linear-gradient(45deg, var(--pt-color) 25%, var(--pt-color) 25%, transparent 25%, transparent 100%), linear-gradient(-135deg, var(--pt-color) 25%, var(--pt-color) 25%, transparent 25%, transparent 100%), linear-gradient(-135deg, var(--b-color) 25%, var(--b-color) 25%, transparent 25%, transparent 100%), linear-gradient(45deg, var(--b-color) 25%, var(--b-color) 25%, transparent 25%, transparent 100%), linear-gradient(45deg, var(--pt-color) 0%, var(--pt-color) 6%, transparent 6%, transparent 11%, var(--pt-color) 11%, var(--pt-color) 17%, transparent 17%, transparent 22%, var(--pt-color) 22%, var(--pt-color) 28%, transparent 28%, transparent 33%, var(--pt-color) 33%, var(--pt-color) 39%, transparent 39%, transparent 44%, var(--pt-color) 44%, var(--pt-color) 50%, transparent 50%, transparent 55%, var(--pt-color) 55%, var(--pt-color) 61%, transparent 61%, transparent 66%, var(--pt-color) 66%, var(--pt-color) 72%, transparent 72%, transparent 77%, var(--pt-color) 77%, var(--pt-color) 83%, transparent 83%, transparent 88%, var(--pt-color) 88%, var(--pt-color) 94%, transparent 94%, transparent 100%); background-size: 40px 40px; background-position: 0 0, 20px 20px, 0 0, 20px 20px, 0 0; color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; border: solid 1px #aaa; } .background-ex14 span{ padding-left: 10px; }
-
＞＞背景の採色・模様 （11） - 斜線 背景の装飾
背景の採色・模様
※ 斜線の背景パターンです。
[ 閉じる ]
htmlソース
<p class="background-ex15"> <span>背景の採色・模様</span> </p>
CSS
.background-ex15{ padding: 5px; background: repeating-linear-gradient( -45deg, #ed1c24, #ed1c24 2px, #ff212a 0, #ff212a 8px ); color: #fff; }
-
＞＞見出しの装飾 - 左右にラインを入れる 見出しの装飾
見出しの装飾 - 左右にラインを入れる
※ 背景色を利用して疑似的にラインを描画します。
[ 閉じる ]
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%); }
-
＞＞タイトルに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; }