カテゴリー: コーディング

■formタグ
・action属性とmethod属性を指定する

・action属性
→フォームのデータの送信先(※URI)を指定する
※データを送るサーバーのCGIプログラムのURI

・method属性
→データの転送方法を指定する
→post と getの2種類

■inputタグ

・属性
type=”text” 　　　入力ボックス
type=”password”　入力してテキストが●で表示されるボックス
type=”checkbox”　チェックボックス
type=”radio”　　ラジオボタン　※複数のラジオボタンを１つのグループにするにはおなじname属性をつける
type=”submit”　　送信ボタン

など

<form id="" method="" action="">
<input id="" type="text" name="" value="" />
<input id="" type="radio" name="group" value="" />
<input id="" type="radio" name="group" value="" />
<input id="" type="submit" value="会員登録" />
</form>

参考：
－HTMLタグリファレンス

■FireWorks のステートからの書き出し

・差分をまとめて作成するときに便利

・ステートタブから複製を作成し、新規に作ったステートだけを選択して編集
→ スライスし、書き出しを行うとき、「書き出し」の項目を「画像」から「ステートからファイルへ」を選択し書き出し

■ブレースメントとは
ディスプレイ広告を表示できる場所のことで、YOUTUBEなどのウェブサイトやスマホの無料アプリなど様々な媒体があります。

■スマホアプリに表示しないようにする

・ターゲット層が利用しそうなアプリを除いて非表示に。
→例えば、ゲーム中に広告がでても読まれない。
誤操作タップしやすいが、コンバージョンにつながらない。

■操作手順
キャンペーン > ディスプレイネットワーク > ブレースメント
詳細を表示　>　すべて を選択

このページからブレースメントを選択し、除外できます。

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, "-")"章";
}

できたのが↓

漢字にもできます↓