HTML

CSSのみでradioボタン選択時に親要素を装飾する

例えばこういう構成だった時にinputの親要素であるdivを装飾したかった。 <div> <input id="foo" type="radio"> <label for="foo">foo</label> </div> 結論からいうとこのタグ構成で掲題の件を実現する方法はわからなかった... radioボタン選択時は擬似クラス:checkedを利用することで実現可能。 ただ、セレクタの基準がradioボ…

HTML5で複数ファイルアップロード可能なフォーム

HTML5の新要素についていけていない事案が発生 <input type="file" name="file[]" multiple>

iPhoneアプリでよく見る通知バッヂみたいなものを置く

<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> a { background: #888; display: block; width: 30px; height: 30px; position: relative; } a span { background: #f00; border: solid 1px #fff; border-radius: 8px; color: #fff; display: block; font-size: 10px; font-weig…</meta></head></html>

HTML5の独自データ属性

"data-"で始まる独自データ属性をHTML5では定義することができます。 jQueryとかで使うデータを置いておくのとかに使うといいのかもしれませんね。参考サイト http://www.html5.jp/tag/attributes/data.html

HTML formのradio_buttonやcheckboxとlabelを関連付ける

RailsのRailの上にずっと乗っかっているとこういうの仕組み理解してないんすよねえ(白目) Formのラジオボタンやチェックボックスはデフォルトのスタイルだとクリックできる範囲がとても狭いので 関連したラベルをクリックした場合でもON/OFFできるってやつで…

HTML formのチェックボックスでチェックしない時もパラメータが欲しい

チェックボックスがオフの時は何にも送信されないのだけど チェックされなかったら〇〇みたいなのをやる時に必要になった。 やり方は同じname属性でcheckboxの前にhiddenを準備しておく。 <input type="hidden" name="hoge" value="off"> <input type="checkbox" name="hoge" value="on"> これでチェックボックスがチェックされていないとoffがいくように…

zen-codingでhtml,cssのコーディングスピードが3倍以上になる

zen-codingはHTML and CSS hi-speed codingと謳っているように飛躍的にhtml,cssのコーディングスピードを上げてくれます。 zen-coding - Project Hosting on Google Code 公式でVimには対応していなかったのだけどvimscriptでmattnさんが作っていました。神 …

携帯サイトの入力フォームでデフォルト文字種を指定

何番煎じかわからないけど自分用にメモ 文字種 istyle mode 全角かな istyle="1" mode="hiragana" 半角カナ istyle="2" mode="katakana" 半角英字 istyle="3" mode="alphabet" 半角数字 istyle="4" mode="numeric" inputタグの属性として両方定義すればキャ…