pcで見たときのメニューボタンを押したときのスライドの動きは横から、spの表示の時には上から表示させる方法です。
以下では、ウィンドウサイズを拾得して、その画面サイズが768px以下の時に、動きを切り替えています。

応用次第でレスポンシブコーディングに役立てることが可能です。
また、iphoneやandoroidといった機種を指定での条件分岐も可能です。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    スマートフォンでの処理
} else {
    pcの場合の処理
}

場合によって、使い分けるとよいでしょう

Transformとはあらかじめ設定された要素を変形させることが可能です。

注意すべきことはベンダープレフィックスが必要であるということです。

記述する際にはIE9、androidのブラウザに対応させるため,
ベンダープレフィックスの記述する必要があります。

  -webkit-transform : rotate(10deg) ;
  -ms-transform : rotate(10deg) ;
  transform : rotate(10deg) ;

X軸側への横軸の移動/Y軸側への横軸の移動/Z軸…奥行きの移動

transform: translateX(50px);

transform: translateY(50px);

transform: translateZ(50px);

上記の記述だけでなくショートハンドラで省略して記述が可能です。
X軸とY軸側への移動

transform: translate(50px, 50px);

X軸とY軸とZ軸側への移動

transform: translate3d(50px, 50px, 50px);

$('button').click(function() {
  alert('');
});

onを使って、下記のように.on()を使ってイベントを定義できます

$('button').on('click', function() {
  alert('');
});

.on()で可能なこと
１、複数のイベントを、同じイベントハンドラを定義することができます。
２、複数のイベントとイベントハンドラを一括定義
.on()の第一引数にイベントタイプをキー、イベントハンドラを値を指定することで、イベントごとに異なる処理を一括して定義できます。
３、データを渡すことができます。.on()では、引数を渡すことができます
４、.on()で定義したイベントを、.off()を使って解除ができます。

flexアイテムが3カラムの場合に、afterなど擬似要素を利用して空白のflexアイテムを生成することで、どんな数でも左寄せに表示することができます。

  
item1
  
item2
  
item3
  
item4
  
item5

.box{
  border:3px solid #21a8cd;
  padding:10px;
  display : flex;
  flex-wrap : wrap;
  justify-content:space-between;
}
.box::after{
  content:"";
  display: block;
  width:30%;
}
.box li{
  border:3px solid #ae21cd;
  padding:10px;
  margin-bottom:10px;
  box-sizing:border-box;
  width:30%;

}

グラデーションは background プロパティに linear-gradient の値を指定します。

content {
  background: linear-gradient(#05FBFF, #1E00FF);
}

■角度を変更
deg で角度を指定できます。
content {
background: linear-gradient(-135deg, #333333, #22233);
}

■円形グラデーション
直線でのグラデーションではなく、円形のグラデーションを実装するには linear-gradient ではなく radial-gradient を使います。
content {
background: radial-gradient(#AAAAAA, #666666);
}

要素の横幅を均等に分けたレイアウトをコーディング
したいとき、Flex boxは便利なプロパティです。

box-flexプロパティは子要素を並べた時の余白の領域を分配する比率を指定してくれます。

.box {
  display: -webkit-box;
  display: box;
}
.box div {
  -webkit-box-flex: 1;
  box-flex: 1;
  width: 100%;
}

width: 100%」とするとすべての子要素が同じ100%の横幅になろうとしますが、均等に縮めるように配置されるため、均等幅になります。

ワードプレスで、urlによって表示させる内容を分岐させる方法です。

	 		


    表示させる内容

    表示させる内容
			

動的に吐き出されるソースで、urlさえわかっていれば、メイン画像の切り替えなどが可能になります。

カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する方法です。アーカイブページなどにAll in One SEOのメタ情報を適用するためにはfuction.phpに下記の記述をする必要があります。

カスタム投稿のタクソノミーとアーカイブページの固定ページを作って、できたpageIDを以下に入れると、meta情報が反映されます。

// ===========================
// = カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する =
// ===========================
function aioseop_title_extention($title){
  if(is_post_type_archive('タクソノミー')){
    $title = get_post_meta(pageID, _aioseop_title, true);
  }
  return $title;
}
add_filter('aioseop_title', 'aioseop_title_extention');

function aioseop_keywords_extention($keywords){
  if(is_post_type_archive('タクソノミー')){
    $keywords = get_post_meta(pageID, _aioseop_keywords, true);
  }
  return $keywords;
}
add_filter('aioseop_keywords', 'aioseop_keywords_extention');

function aioseop_description_extention($description){
  if(is_post_type_archive('タクソノミー')){
    $description = get_post_meta(pageID, _aioseop_description, true);
  }
  return $description;
}
add_filter('aioseop_description', 'aioseop_description_extention');

レスポンシブサイトでtableを扱うとき、横並びになっていたthやtdのセルをブロック要素にして、横幅100%で表示させることがあります。

指定方法は、thおよびtdにdisplay:blockを指定するだけです。
これで、tdがブロック要素として表示されるので、各ボックスが横幅100%になり、たてに順に並びます。

単にtableにもdisplay:blockをするだけではできません。

table {
    width:100%;
    display:block;
}

blockにするのはthとtdにしてtable の横幅を100%にします。

table {
    width:100%;
}
th,td {
    display:block;
}

横並びのボックスの高さ(下辺)を揃えたい時は、Flexboxを使うと高さを揃えることが可能です。

文字数などで高さがばらばらのボックスを高さを揃えて配置したいときなどに便利です。

例えば、float: left; で横並びのボックスを配置した時、文章量などが変わるとボックスの高さがバラバラで揃いません。

そんな時、Flexbox を使うと、文字量が多いボックスの高さにに他のボックスの高さが揃ってくれるのです。

■html

  

    

      

      
テキストテキストテキストテキスト
    
    

      

      
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    
    

      

      
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    
  

■css

.box{
 display:flex;
}
.box li{
 width: 31%;
 margin: 1%;
}

便利なFlexboxですが、
Flexboxは全てのブラウザとバージョンに対応しているワケではないので、ベンダープレフィックスを使用したほうが良いでしょう

.box {
  display: -webkit-box;
  display: -moz-box;    
  display: -ms-flexbox;
  display: -webkit-flex; 
  display: flex
}