jQueryのslideToggleとtoggleClassを使って、スマホ用スライドメニューを作成します。
ライブラリはここからCDNで読み込みましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

[jQuery]

$(function () {
    $('#menu_toggle').click(function () {
        $(this).next('ul').slideToggle(200);
        $(this).toggleClass('active');
    });
    $(document).click(function() {
        $('#menu_toggle').removeClass('active');　//エリア外をクリックすると閉じる
    });
    $('#header').click(function() {
        event.stopPropagation();　//ヘッダー領域ではイベントを停止
    });
});

<nav id="slide_nav">
       <a id="menu_toggle" class="active"> <span></span> <span></span> <span></span> </a>
        <ul id="nav_menu">
          <li id="nav01"><a href="#">menu1</a></li>
          <li id="nav02"><a href="#">menu2</a></li>
          <li id="nav03"><a href="#">menu3</a></li>
          <li id="nav04"><a href="#">menu4</a></li>
          <li id="nav05"><a href="#">menu5</a></li>
          <li id="nav06"><a href="#">menu6</a></li>
        </ul>
 </nav>

/* Menu Button */
#menu_toggle {
    position: fixed;
    top: 34px;
    right: 10px;
    width: 40px;
    height: 34px;
}
#menu_toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 4px;
}
#menu_toggle span:nth-of-type(1) {
    top: 0;
}
#menu_toggle span:nth-of-type(2) {
    top: 15px;
}
#menu_toggle span:nth-of-type(3) {
    bottom: 0;
}

/* Nav Menu */
#menu_toggle + #nav_menu {
    height: 100%;
    position: fixed;
    right: -240px;
    width: 240px;
    z-index: 999;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#menu_toggle.active + #nav_menu {
    position: fixed;
    right: 0;
    width: 240px;
    background-color: rgba(0,0,0,0.8);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

■imgタグのalt属性について

1.alt=”” でOKなもの
・装飾的な画像
※コンテンツ以外の画像はbackgroudで表示する

・文章のイメージを表現する為の画像

2.alt属性の値が必要なもの
・基本的に上記に当てはまらないは必ずつける
・また右の画像の例では

「女性の画像」ではなく、

「笑顔で対応するコールセンターの女性の画像」

のように、文章で画像の雰囲気が伝わるような文章にする

 

 

 

 

 

 alt属性の良い事例｜情報バリアフリーポータルサイト

font-sizeには、px以外にも%,em,remなどが指定されている事がありますが、
改めて違いを整理しておきましょう。

1. px

言わずもがな、絶対値ですので、

font-size: 16px;

ならば、何がなんでも16pxですね。

2. %,em

こちらは相対値です。

親要素が基準となります。

html {
    font-size: 16px;
}
div {
    font-size: 100%;
}
div p {
    font-size: 50%;
    font-size: 0.5em;
}

どちらも親要素の半分ですので、pxに換算すと8pxとなります。

3. rem

こちらも相対値ですが、親要素ではなく、ルートが基準となります。

html {
    font-size: 14px;
}
div {
    font-size: 20px;
}
div p {
    font-size: 50%;
}

この場合、親要素の設定に関わらず、ルートのhtml要素の値を基準にしますので、結果は7pxです。

4. vw,vh

こちらはビューポートが基準となります。
どういうことかと言うと、100vw=ビューポートの幅=ブラウザの表示幅※viewport幅がdevice-widthのとき
という解釈です。

つまり、320px幅のスマートフォンで14pxに相当する設定としては、

(320 x 1/100) / 14 = 4.375vw

となります。要するに、端末の幅に応じて文字サイズを可変させることができます。

vhも同じように、ビューポートの高さを基準にして可変します。

Can I Useによるブラウザのサポート状況は下記

ご覧のように多くのモダンブラウザでサポートされています。
もちろんdiv要素などにも使用できますので、
レスポンシブデザインで端末サイズごとに可変する要素を作りたい場合には、
メディアクエリを細かく設定する以外の方法として、知っておくと良いでしょう。

■プロパティに変化があった際に用いる、簡単な動作に適している
・疑似クラス　:hover など変化など

■DEMO
ホバーするとボックスが四角から丸にかわる

＜html＞

<div class="box"><p>DEMO<p/></div>

＜css＞

.box {
  width: 100px;
  height: 100px;
  background: #000;
  transition: all 300ms 0s ease;
}

.box:hover {
  background: #ccc;
  width: 100px;
  border-radius: 100%;
}

p{
  color: #fff;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

■参考
　CSSアニメーション 入門

ユーザーリストを用いたリマケでの広告表示だけでなく、+αでディスプレイ広告を配信できる。

■　ターゲティングを自動的に拡張し、リーチを広げる
・ディスプレイ　＞　ターゲット設定　＞　□　チェックボックスで設定
オンとオフでディスプレイ（リマケ＋α）で広げることができる。

■ターゲティング方法の最適化が有効な場合

• 新規顧客を開拓する
• 最も顧客になる可能性の高いユーザーにアプローチするターゲティング方法を特定する
• 同じ入札単価やユーザー獲得単価でリーチを拡大する

■参考：ディスプレイ ネットワークでの自動ターゲティングについて―AdWordsヘルプ

連番リストなんてolでいいじゃないか。
まぁそう言わずに、counter-incrementを使えば、
単純な連番以外にスタイルも自由に付けられるのです。

サポートしているブラウザについては↓

HTMLソース

<div class="sample">
<ul>
<li>旅立ち
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
<li>出会い
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
<li>別れ
  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>
</li>
</ul>
</div>

CSS

.sample ul {
    counter-reset: number;
    list-style: none;
}
.sample ul li {
    counter-increment: number;
}
.sample ul li:before {
    content: "第"counters(number, "-")"章";
}

できたのが↓

漢字にもできます↓

・ボーダーにはグラデーションがかけられないので、:before , :after を使う

→heightを決めて、バックグラウンドにグラデーションをかけて疑似的にボーダーのグラデーションに見せる

.example:before{
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
    background: -moz-linear-gradient(left, #f00, #00f);
    background: linear-gradient(left, #f00, #00f);
}

【CSS3】border要素にグラデーションを施す方法

CSSのみでアニメーション付きのドロップダウンメニューを実装してみます。
メニューオープン動作に使用しているtransitionプロバティのサポートは下記
ベンダープレフィックスとして-webkit-をつけましょう。

HTMLソース

<div id="nav-menu">
<input id="dropdown" type="checkbox"  class="dropdown-toggle">
<label for="dropdown">クリックすると開くメニュー</label>
<ul class="dropdown-menu">
<li id="menu1"><a href="#">メニュー1</a></li>
<li id="menu2"><a href="#">メニュー2</a></li>
<li id="menu3"><a href="#">メニュー3</a></li>
<li id="menu4"><a href="#">メニュー4</a></li>
<li id="menu5"><a href="#">メニュー5</a></li>
</ul>
</div>

CSS

#nav-menu label {
position: relative;
padding-left: 15px;
cursor: pointer;
}
/* 下矢印 */
#nav-menu label::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #5e5e5e transparent transparent transparent;
position: absolute;
top: 8px;
left: 0;
}
#nav-menu .dropdown-toggle:checked ~ ul {
    height: 150px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    padding: 15px 0 0 30px;
}
#nav-menu .dropdown-toggle ~ ul {
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    padding: 0 0 0 30px;
}
#nav-menu .dropdown-toggle {
    display: none;
}

できたのがこちら↓

:first-childは、親要素にとって第一番目の直下要素のみを対象とする擬似クラス
適用対象：要素内の最初の子要素

▼HTML　この場合は【:first-child】は効く

<div class="sample sample1">
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

▼CSS

.sample1 p:first-child{
color:#ff0000;
font-weight:bold;
}

▼HTML　この場合は【:first-child】は効かない

<div class="sample sample2a">
<h1>なんかしらのタイトル</h1>
<p>1つ目のpタグ</p>
<p>2つ目のpタグ</p>
<p>3つ目のpタグ</p>
</div><!-- sample -->

▼CSS

.sample2a p:first-child{
color:#ff0000;
font-weight:bold;
}

【 :first-of-type 】なら、指定した要素の前にどんなタグがあっても効く。
※ブラウザ実装状況はIE9からになります。

参考サイト：https://goma.pw/article/2015-02-06-0/