<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>
<div class="animation"></div>.animation:after { content: ""; display: block; background: url("http://placehold.it/200x200") no-repeat top left; background-size: contain; width: 100px; height: 100px; animation: bounce 3s ease infinite;}
$(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かけて上に戻る });});
<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とは使用した背景画像の長さ */}
<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) }}
<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;}
.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;}
<div class="grid-x" data-equalize-on="medium" data-equalizer="foo"> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo" data-equalizer="bar" data-equalize-on-stack="true"> <h3>Parent panel</h3> <div class="callout" data-equalizer-watch="bar"> <p>The three callouts in this panel will equalize, even when stacked.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> </div> <div class="medium-4 columns"> <div class="callout panel" data-equalizer-watch="foo"> <p>Where these panels will not equalize on stack, and instead equalize on medium up.</p> </div> </div> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div></div>
<div class="grid-x grid-margin-x"> <div class="small-4 cell">4 cells</div> <div class="auto cell">Whatever's left!</div> <div class="auto cell">Whatever's left!</div></div>
