[HTML] Aタグにおけるrel属性の意味と効果について

とあるASPからGooglePlayに関するこんな情報が届きまして:

Android において、
target=”_blank” のあり/なし ×ブラウザソフト(Chrome)のヴァージョンで
ストアへ遷移しない事象を確認しました。

結論rel属性でnoreferrernoopenerが指定してあればおkって話だったけど、知らないとハマりそうです。
“[HTML] Aタグにおけるrel属性の意味と効果について” の続きを読む

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

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

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

“HTML5 Form Validationサンプル(Bootstrap 4.0 + Constraint Validation API)” の続きを読む

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

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

GALAXY S3

テストコードはこちら

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

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

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

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

“[HTML5] アプリケーションキャッシュの使い方” の続きを読む

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

随分前に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] パンくずリンクについてのまとめと考察

パンくずリンク|パンくずリスト(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] パンくずリンクについてのまとめと考察” の続きを読む

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

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=各記事という扱いになるらしいが…。

“ HTML5のサンプルソースと仕様メモ” の続きを読む

[XHTML] 携帯サイト用 XHTML仕様まとめ

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第3次世代の機種です。
やっぱり三社三様だけどXHTML BasicやXHTML Mobile Profileに準拠しとけば全社に対応が可能な様子。

XHTML Basic » Kanzakiさんの解説
XHTML Basic » W3C仕様書

XHTML Mobile Profile » Openwaveのリファレンス

  Docomo au Softbank
表示対応機種 FOMAシリーズ
※機種によりimode-XHTMLの対応バージョンが異なる
(FOMAでも古い機種は未対応の様子)
WAP2.0ブラウザ搭載端末 3GC型(SoftBank 3G series)
※頭文字が7-9の機種
文字エンコード Shift-JIS・UTF-8 Shift-JIS・UTF-8 Shift-JIS・EUC-JP・ISO-2022-JP・UTF-8
※UTF-8以外の文字コードはゲートウェイにてShift_JISに変換される
DOCTYPE

<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

(Locale/Ver.=ja/1.0)の数字がバージョンによって変化。
1.0、1.1、2.0、2.1、2.2、2.3

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">

※端末はDTDのチェックをしない

<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN"
"xhtml-basic10-plus.dtd">
対応画像フォーマット

iモードブラウザ1.0(XHTML):JPG・GIF
iモードブラウザ2.0:JPEG・GIF・BMP

JPEG・PNG・GIF
※256色インデックス以上は減色表示
JPEG・PNG・GIF
最大ファイルサイズ imodeブラウザ1.0:100KB
imodeブラウザ2.0:500kb
9KB(画像データ等除く)
画像込みではDocomoとほぼ同等
300kb
絵文字 公式一覧ページへ
code.cside.com
一覧ページへ 一覧ページへ
IPアドレス帯域 一覧ページへ 一覧ページへ 一覧ページへ
ユーザーエージェント 一覧ページへ
iモードブラウザ1.0機種の一覧ページへ
iモードブラウザ2.0機種の一覧ページへ
一覧ページへ 一覧ページへ

Docomoとauは同じバイナリコードで似たような絵文字が表示される。
参考:全キャリア絵文字比較表(絵文字を使いこなして見るためのページ)

公式のシュミレーターはXHTMLに微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

“[XHTML] 携帯サイト用 XHTML仕様まとめ” の続きを読む

[XHTML]テキストエディター使用者向けコピペ用ソース

新規でXHTMLのページ作る時に使うタグをバラした。
Dreamweaverなら各ブロックのソースをスニペットにして保存すると便利です。

Usage

  1. Mainのソースをテキストファイルにコピペする
  2. 半角英数の適当な名前+html拡張子で保存する。(ex:hoge.html)
  3. 必要なタグをコピペで追加していく

あとは適当にBodyタグの中を編集すればページが完成。

Main

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
</head>
<body>
<p>Sample Page</p>
</body>
</html>

“[XHTML]テキストエディター使用者向けコピペ用ソース” の続きを読む

[CSS] Flashを背景にする

Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時(無さそうだけど)に使えるんじゃないかなー。

まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。

<div id="content">
<object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
</object>
 <div class="section">
  <h2>Flash Background sample</h2>
  <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p>
 </div>
</div>

今更感漂うけど続くよー
“[CSS] Flashを背景にする” の続きを読む

[XHTML]コピペ用 日本語ダミーテキスト(タグ付き&タグ無し)

タグ付きダミーテキストのコピペが出来るHTML Ipsum百式経由で知ったものの、
見たらなんか凄くラテン語(聖書?)だったので日本語で作ってみた。
リストやテーブルタグ付きのダミーはメニュー・更新履歴・企業挨拶風も作ってみた。

ダミー段落(Pタグ・短文)

<p>この文章は仮の内容として挿入されているサンプルです。本公開時に変更されますので、この文章のまま公開されることはありません。</p>

<p>当ウェブサイトは現在鋭意製作中です。本公開後に再びご訪問頂ければ幸いです。</p>

他、段落(中文・長文)、リスト、定義リスト、テーブルなど。
“[XHTML]コピペ用 日本語ダミーテキスト(タグ付き&タグ無し)” の続きを読む

[XHTML]buttonタグの挙動について

フォーム送信などするときに使うボタンはinputとbuttonがあります。
ボタン要素にもnameとvalueをつければ、ほかのフォームエレメントと同じように値を送信することが出来ます。

buttonタグだと、ボタン要素そのものにつける値とボタンに表示するラベルを違うものに出来るので、
送信ボタンとか作るときには便利なんですが、IEだけ挙動が違うので注意が必要です。

<input type="submit"  name="test" value="send" />

<button type="submit" name="test" value="send">submit</button>

“[XHTML]buttonタグの挙動について” の続きを読む

[XHTML]ValidなFlash表示ソース

今更感漂うW3Cに怒られないFlashの表示ソースについて。
マクパペットいじってた時に思い出したのでメモっておきます。

DreamweaverとかでFlashオブジェクトを挿入すると、大体こんなソースですが

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="32" height="32" title="title">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
  <embed src="index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"/>
</object>

これでチェックすると「there is no attribute “width”」だとか「there is no attribute “flashvars”」みたいにエラーが出てしまう。

最新のCS3では対応されてるかもしれないが、未だ旧バージョンを使用してる場合に、
Flash挿入したときバリデータでエラーを出さないようにするためには次のように修正する。

“[XHTML]ValidなFlash表示ソース” の続きを読む