web memorandum

td:hover {
  background-color: #ff0000;
}

<table>
  <tbody>
    <tr>
      <td rowspan="3">Alphabet</td>
      <td rowspan="2">a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>f</td>
      <td>g</td>
      <td>h</td>
    </tr>
    <tr>
      <td rowspan="3">Number</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

$("td").hover(function() { $el = $(this); $el.parent().addClass("hover");if ($el.parent().has('td[rowspan]').length == 0) $el .parent() .prevAll('tr:has(td[rowspan]):first') .find('td[rowspan]') .addClass("hover"); }, function() { $el .parent() .removeClass("hover") .prevAll('tr:has(td[rowspan]):first') .find('td[rowspan]') .removeClass("hover"); });

.hover { background: red; }

$(window).on('beforeprint', function(event) {

//処理
$("hoge").attr("colSpan","1")//これは印刷時のみ横セル結合を1にする


});

$(window).on('afterprint', function(event) {

//処理
$("hoge").attr("colSpan","2")//横セル結合を2にする（戻す）

});

$(window).on('load resize', function() {

var h = $('#header').height();

$( '#contents' )
.css({
'margin-top' : h + 'px',
})

});

jQuery(document).ready(function(){
var bnrElm = jQuery(".sticky_footer"); // バナー要素

jQuery(window).on("scroll touchmove", function(e){ //スクロール中に判断する
bnrElm.stop(); //アニメーションしている場合、アニメーションを強制停止
bnrElm.css('display', 'none').delay(500).fadeIn('fast'); //スクロール中は非表示にして、500ミリ秒遅らせて再び表示
});
});

<header>
ヘッダ～
</header>

<div id="content">
こんてんつ！
</div>

<div style="height:50px;width:100%;">
<footer id="sticky_footer">

#sticky_footerを固定したい！

</footer>
</div>

<footer id="main_footer">
フッタ～
</footer>

footer.sticky_footer{
background-color: #ff00ff;
height:50px;
width: 100%;
color:#fff;
text-align: center;
line-height: 50px;
}

jQuery(window).on("scroll", function() {
documentHeight = jQuery(document).height();
scrollPosition = jQuery(this).height() + jQuery(this).scrollTop();
footerHeight = jQuery("#site_footer").outerHeight();

if (documentHeight - scrollPosition <= footerHeight) {
jQuery("#sticky_footer").css({
position: "static",
bottom: "auto"
});
} else {
jQuery("#sticky_footer").css({
position: "fixed",
bottom: 0
});
}
});

/*
* jQuery FadeThis - v1.0.0
* A lightweight, simple, yet powerful jQuery plugin for appear-as-you-scroll features.
* http://jqueryfadethis.com
*
* Made by lwiesel
* Under MIT License
*/
!function(a,b,c){var d=null,e=[],f=a(b),g=function(){};g.prototype={globals:{pluginName:"fadeThis",bufferTime:300},defaults:{baseName:"slide-",speed:500,easing:"swing",offset:0,reverse:!0,distance:50,scrolledIn:null,scrolledOut:null},init:function(a,b){this.addElements(a,b),this._setEvent(),this._checkVisibleElements()},addElements:function(d,e){var f=d===c.body?b:d,g=a(f===b?"body":f),h=this,i=e&&e.baseName?e.baseName:this.defaults.baseName;return g.is("[class^='"+i+"']")?h._addElement(g,e):g.find("[class^='"+i+"']").each(function(){h._addElement(a(this),e)}),g},_addElement:function(b,c){var d=b.data("plugin-options"),f=a.extend({},this.defaults,c,d),g={element:b,options:f,invp:!1};return e.push(g),console.log(g),this._prepareElement(g),b},_prepareElement:function(a){var b={opacity:0,visibility:"visible",position:"relative"},c=null;if(a.element.hasClass(a.options.baseName+"right"))c="left";else if(a.element.hasClass(a.options.baseName+"left"))c="right";else if(a.element.hasClass(a.options.baseName+"top"))c="bottom";else{if(!a.element.hasClass(a.options.baseName+"bottom"))return!1;c="top"}b[c]=a.options.distance,a.element.css(b)},_setEvent:function(){var a=this;f.on("scroll",function(b){d||(d=setTimeout(function(){a._checkVisibleElements(b),d=null},a.globals.bufferTime))})},_checkVisibleElements:function(b){var c=this;a.each(e,function(a,d){c._isVisible(d)?d.invp||(d.invp=!0,c._triggerFading(d),d.options.scrolledIn&&d.options.scrolledIn.call(d.element,b),d.element.trigger("fadethisscrolledin",b)):d.invp&&(d.invp=!1,d.options.reverse&&c._triggerFading(d,!1),d.options.scrolledOut&&d.options.scrolledOut.call(d.element,b),d.element.trigger("fadethisscrolledout",b))})},_isVisible:function(a){var b=f.scrollTop()+a.options.offset,c=b+f.height()-2*a.options.offset,d=a.element.offset().top,e=d+a.element.height();return e>=b&&c>=d&&c>=e&&d>=b},_triggerFading:function(a,b){b="undefined"!=typeof b?b:!0;var c={opacity:1},d={opacity:0},e=null;if(a.element.hasClass(a.options.baseName+"right"))e="left";else if(a.element.hasClass(a.options.baseName+"left"))e="right";else if(a.element.hasClass(a.options.baseName+"top"))e="bottom";else{if(!a.element.hasClass(a.options.baseName+"bottom"))return!1;e="top"}c[e]=0,d[e]=a.options.distance,b?a.element.stop(!0).animate(c,a.options.speed,a.options.easing):a.element.stop(!0).animate(d,a.options.speed,a.options.easing)}},g.defaults=g.prototype.defaults,g.globals=g.prototype.globals,b.Plugin=new g,a.fn[g.globals.pluginName]=function(c){return this.each(function(){a.data(b,"plugin_"+g.globals.pluginName)?a.data(this,"plugin_"+g.globals.pluginName)||a.data(this,"plugin_"+g.globals.pluginName,b.Plugin.addElements(this,c)):(a.data(b,"plugin_"+g.globals.pluginName,"set"),a.data(this,"plugin_"+g.globals.pluginName,b.Plugin.init(this,c)))}),this}}(jQuery,window,document);

<script src="jquery.js"></script>
<script src="jquery.fadethis.min.js"></script>

<script>$(window).fadeThis();</script>

<div class="slide-left"></div>

jQuery(function($){
var headerHight = Number($( 'header#masthead' ).height()) - 6;

$( '#content' )
.css({
'margin-top' : headerHight + 'px',
})

z$( 'header#masthead' )
.css({
'margin-top' : $( '#wpadminbar' ).height() + 'px',
})

});

jQuery(function($){
if($('#wpadminbar').length){
var height1 = $('#wpadminbar').height();
var height2 = $('header#masthead').height();
var height3 = 23;
$('.breadcrumb').css('top',height1+height2+height3+'px');
} else {
var height2 = $('header#masthead').outerHeight(true);
var height3 = 23;
$('.breadcrumb').css('top',height2+height3+'px');
}
});

jQuery(function($){
if($('#wpadminbar').length){
var height1 = $('#wpadminbar').height();
var height2 = $('header#masthead').height();
var height3 = 103;
$('h1.page-entry-header').css('top',height1+height2+height3+'px');
} else {
var height2 = $('header#masthead').outerHeight(true);
var height3 = 103;
$('h1.page-entry-header').css('top',height2+height3+'px');
}
});

<!-- 表示ボタン -->
<p class="openBtn"><i class="fa fa-chevron-down faColor">　</i>★★★項目名★★★</p>

<!-- 説明文 -->
<p class="textArea">★★★説明文★★★</p>

$(function(){
$(".openBtn").click(function(){
$($(this).next(".textArea")).animate(
{height: "toggle", opacity: "toggle"},
"nomal"
);
});
});
JS(WPのとき）
jQuery(function($){
$(".openBtn").click(function(){
$($(this).next(".textArea")).animate(
{height: "toggle", opacity: "toggle"},
"nomal"
);
});
});

/* 表示ボタン */
.openBtn {
cursor: pointer;
padding: 10px;
border: 1px solid #9FD6D2;
border-left: 10px solid #9FD6D2;
color: #666;
}

/* 説明文 */
.textArea {
display: none;
padding: 10px 10px 30px 50px;
color: #666;
}

/* 表示ボタン ー 逆三角アイコン */
.faColor {
color: #9FD6D2;
}