HTML&XHTML

[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 2 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という記事が参考になるかも。
圧倒的に水平+右矢印のデザインが多い。

(さらに…)

[html] HTML5のサンプルソースと仕様メモ

2009/07/08 HTML&XHTML No comments

HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。

html5 demo image

この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。

HTML4・XHTML1.0からの主な違い

  • 新しく追加された要素section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
    ※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。(MIMEをXHTMLのにすればおkらしい
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性ping (aarea要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性id, tabindex, hidden
  • 廃止された要素center, font, strike

Sectionsの使いどころがイマイチよく分からない。
ブログの場合だとarticle=各記事という扱いになるらしいが…。

(さらに…)