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]テーブルの行に見出しセル（TH）が１つだけ存在する場合にだけ幅を設定する

2018年3月8日
<h2>見出しセルが一行に1つだけの時には見出しセル幅を固定する</h2><table> <tr> <th>見出し</th> <td>データ</td> </tr> <tr> <th>見出し</th> <td>データ</td> </tr> <tr> <th>見出し</th> <td>データ</td> </tr></table><h2>見出しセルが一行に複数ある場合には見出しセル幅を固定しない</h2><table> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <td>データ</td> <td>データ</td> <td>データ</td> </tr></table>
CSS

[jQuery]手軽に実装する上に戻るボタン。最初は非表示である程度スクロールすると表示される機能付き。

2018年1月31日
$(document).ready(function(){ $(window).scroll(function() { if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタンを表示 $(".back-to-top").fadeIn(); } else { $(".back-to-top").fadeOut(); } }); $(".back-to-top").click(function() { $("body,html").animate({scrollTop:0},800); // 800msかけて上に戻る });});
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

[CSS]下にスクロールしろという案内をふわふわアニメートするCSS

2018年1月19日
<p class="scroll-announce">下にスクロールしてね</p>body { background: #000; color: #fff; min-height: 1000px;}.scroll-announce { text-align: center; position: relative;}.scroll-announce:after { font-size: 40px; font-weight: bold; display: block; text-align: center; content: "↓"; position: absolute; left: 50%; left: calc( 50% - 24px ); bottom: -100px; width: 48px; animation: scroll-announce 3s ease infinite;}@keyframes scroll-announce { 0% { transform:translateY(0) } 70% { transform:translateY(-15px) } 100% { transform:translateY(0) }}
CSS

[Bootstrap]ナビゲーションをAffixさせる際にスライドインする処理

2017年12月12日
<div class="navbar" data-spy="affix" data-offset-top="60"> Header Navigation</div><div class="empty-field"></div>.navbar { background: #000; color: #fff; padding: 15px 0; text-align: center;}.navbar.affix-top { position: static; top: -120px;}.navbar.affix { position: fixed; top: 0px; width: 100%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; opacity: 0.95;}body { /* Affixをわかりやすくするためにグラデーションつける */ background-color: #F07575; /* fallback color if gradients are not supported */ background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */}.empty-field { height: 1000px;}
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;}