タップしてる間だけクラスを付与する

スマホでサイトを作る際、
ボタンを押した際のアクションは「:hover」でokだったりします。

が。

ブラウザバックした際、その「:hover」の効果が残ってしまうのがキズです…。



というわけで。

・ボタンをタップした際にclassを付与
・タップを話した際にclassを除去

というjQueryを実装します。
（これならブラウザバックでもアクションが残ってることはありません）



html

    ボタン

css(6～8行目部分がタップしてる間の挙動です)

.button{
    display: block;
    background: #888;
    border-radius: 4px;
}
.button.active{
    box-shadow: 0px 0px 5px #fff;
}

jQuery

$('.button')
.bind('touchstart', function () {
    $(this).addClass('active');
})
.bind('touchend', function () {
    $(this).removeClass('active');
});

「class="button"」が付与されている要素をタップしている間のみ
「class="active"」が追加付与されます。
タップを離すと「class="active"」が解除されます。



以下余談。



複数の要素にタップ時「class="active"」を付与したい場合
(カンマ区切りで要素を表記)

$('.button, .button2, #banner1, #banner2')
.bind('touchstart', function () {
    $(this).addClass('active');
})
.bind('touchend', function () {
    $(this).removeClass('active');
});

PCで動作確認をしたいのでマウス挙動も追加する(複数のイベントを設定)
(スペース区切りでイベントを表記)

$('.button, .button2, button3')
.bind('touchstart mousedown', function () {
    $(this).addClass('active');
})
.bind('touchend mouseup', function () {
    $(this).removeClass('active');
});

チェックボックスに画像を使う

普通のチェックボックスはありきたりすぎるので、

こんな感じのチェックボックスを作ろうと思います。



利点は
・画像が使える
・サイズが自由自在
ということで、UIコンセプトに併せて
好きなように使える点です。



image
この2種類を作ります




html（極力cssで制御するのがモットーなので、htmlはシンプルです）
※アメブロ記事上で、formタグ・inputタグが使えないので、スペースが入ってます

< form>
    < input type="checkbox" checked>
    < input type="checkbox">
< /form>

css

input[type="checkbox"]{
    -webkit-appearance: none;  //元々のチェックボックスを非表示
    position: relative;　　　　//checked時画像のためのrelative
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url(./img/checkbox.png);  //未チェック時の画像
    background-size: contain;
}
//チェック時の挙動
input[type="checkbox"]:checked:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url(./img/checkbox_arrow.png);  //チェックした際の画像
    background-size: 100px 100px;
}

ボタンの作り方

スマホサイトでよく見かける

この手のボタンの作り方です。



html

    btn_L

css

.btn_L{
    margin: 0px auto;
    display: block;
    width: 270px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    color: #321e09;
    text-shadow: 1px 1px 1px #f0d6a7;
    background:
        -webkit-gradient(linear,left top, left bottom,
        from(#d4b37a),
        color-stop(0.6,#9f7e3f),
        to(#6d4d19));
    box-shadow:
        1px 1px 0px #1f0f04,
        inset 1px 1px 0px #c8b58d,
        inset -1px 1px 0px #c8b58d,
        inset 1px -1px 0px #c8b58d,
        inset -1px -1px 0px #c8b58d;
}
.btn_L a{
    display: block;    //リンクの判定をボタンサイズに
    color: #321e09;
}

ブログやるよー

どうも、はじめまして。

ソシャゲ開発会社でフロントエンドエンジニアやってます。

ガラケーサイトコーディング5年を経て、
スマホコーディング1年～、といった経歴の人です。



日々「こんなUIどうだろうか」「こんな挙動どうだろうか」と模索している中で

"こんなカッコいいのが出来たのに使わないのか…"と、

使われなかったボツネタをHow toまじえて掲載しようかと思います。



ボク自身、まだまだ学ぶ身ですので、

自分用のメモ書きも含め、少しでも参考になればと思います。



IT系blogでよく見かける「SyntaxHighlighter」を
アメブロにつっこめたので開設に至ったのは内緒。

SyntaxHighlighterはこんなやつ↓

function foo() {
    alert('hello');
}

ぼちぼちやっていきますので、よろしくお願いいたします。