CSS

[CSS] クラスをワイルドカード指定する

2018年4月10日
<h2>.list-item-* だけ文字色を赤色にするCSS指定</h2><ul> <li class="list-item-a">.list-item-a</li> <li class="list-data-b">.list-data-b</li> <li class="list-item-c">.list-item-c</li> <li class="list-data-d">.list-data-d</li> <li class="list-item-e">.list-item-e</li> <li class="list-data-f">.list-data-f</li></ul><h2>複数クラスが指定されている場合の .list-item-* だけ文字色を青色にするCSS指定</h2><ul> <li class="list list-item-a">.list.list-item-a</li> <li class="list list-data-b">.list.list-data-b</li> <li class="list list-item-c">.list.list-item-c</li> <li class="list list-data-d">.list.list-data-d</li> <li class="list list-item-e">.list.list-item-e</li> <li class="list list-data-f">.list.list-data-f</li></ul>
CSS

[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

2018年1月24日
<div class="bg-image-loop"></div>.bg-image-loop { width: 100%; height: 160px; /* 画像の高さを指定 */ position: relative; background: url("//onocom.net/code/wp-content/uploads/2018/01/loop_bg.png") repeat-x 0 0; background-size: auto 100%; animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */ margin: 80px 0; padding: 0;}@keyframes bg-slider { from { background-position: 0 0; } to { background-position: -1518px 0; } /* 1518pxとは使用した背景画像の長さ */}
CSS

ボックスの左上に三角形の新着（NEW表示）を表示するCSS

2017年12月6日
.mark-box { width: 200px; height: 200px; position: relative; padding: 30px; background-color: #fef2f2;}.mark-box:before { position: absolute; content: ""; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: #f00 transparent transparent transparent;}.mark-box:after { position: absolute; content: "NEW"; transform: rotate(315deg); display: block; font-size: 11px; white-space: pre; color: #fff; top: 12px; left: 4px; text-align: center; z-index: 2; line-height: 1.2;}