HTML&XHTML

HTML5 Form Validationサンプル(Bootstrap 4.0 + Constraint Validation API)

2017/09/22 HTML5 No comments ,

フォームのバリデーションを自前で実装せざるを得ない場合に使える Constraint Validation API のサンプルを作った。
ついでに Bootstrap 4.0の Forms Validation との連携もしてみた。

See the Pen Bootstrap 4.0 + Constraint Validation API Sample (ja) by Tenderfeel (@Tenderfeel) on CodePen.

(さらに…)

[HTML] Android 4.0.x のselectタグにおけるdisabledの挙動がおかしい件

2013/02/10 HTML&XHTML No comments

selectをdisabledにすると通常はタップやクリックしてもoptionが開かなくなります。
でもAndroid4.0.xだと選択できないピッカーが表示されます……

GALAXY S3

テストコードはこちら

Andoird2.3以下はピッカーが出ません。
どうしてこうなった……

ちなみに、[disabled]{pointer-events:none} かontouchstartにpreventDefaultしてあれば表示されません。

[HTML5] アプリケーションキャッシュの使い方

2011/05/31 HTML5 3 comments , ,

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。

(さらに…)

YouTubeのiframe版埋め込みコードでもwmodeを有効にする

2011/02/21 HTML&XHTML 1 comment ,

随分前にYouTubeの埋め込み用ソースをValidにするという投稿をしたんですが、
最近仕様が変わったらしく、埋め込み用として表示されるソースがiframeになってました。
どうもiframe版だと内部でHTML5プレイヤーとの切り替えが行われるようです。

youtube まるさん

これをそのまま貼ってみたところ、デフォルトではwmodeが効いてないことが判明。
position:absoluteとz-indexで要素を重ねるとFlashが上に来てしまう。(上の画像をクリックするとテストできます)

解決方法

貼り付け用iframeのURLに ?wmode=transparent を追加するだけです

<iframe title="YouTube video player" width="560" height="349" src="http://www.youtube.com/embed/2XID_W4neJo?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Overlay Test

その他のパラメータ

wmode以外のパラメータも&や&amp;で繋げて使えます。

  • hd=1 – HDで再生
  • autoplay=1 – 自動再生
  • loop=1 - ループ再生
  • rel=0 – 関連動画を含めない
  • disablekb キーボードによる操作(1:有効 0:無効)
  • start – 再生位置指定(秒)

[HTML] パンくずリンクについてのまとめと考察

2010/12/28 HTML&XHTML No comments

パンくずリンク|パンくずリスト(breadcrumb navigation)はどうコーディングするのが今風なんだろう。
ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。

パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、
よくあるデザインパターンは次の通りである。

  1. 1行テキスト
    テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。

    1. ページタイトルを > で繋いだもの
    2. ページタイトルを > 以外の文字で繋いだもの
  2. シンプルなリンクの羅列
    区切り文字を入れずに画像やCSSで階層を表現する。
  3. マルチステップ
    開始から完了までの行程を表示する。
  4. サブナビゲーションつき
    各ページリンクに属するページをマウスオーバーで表示する。
  5. インタラクティブなアクションつき
    deliciousのパンくずリンクは階層表示とタグの絞込みを兼ねている
  6. 実験的なもの
    Booreilandはナビゲーションがパンくずリンクっぽい。

割合についてはWeb Design PracticesのBreadcrumb Navigationという記事が参考になるかも。
圧倒的に水平+右矢印のデザインが多い。

(さらに…)