カテゴリー: web_dev

【好奇心にはジレンマが憑き物】であります。
画面右上に「大」「中」「小」というボタンのあるサイトの意味を知るために請けた仕事の中でひとつ発見がありました。

画像のボタンを配置する際のスタイルシートのおまじない
「text-indent:-9999px;」に、どうもブラウザによって表示不具合が生じる件です。

（不具合はもちろんIE！）

[css]
.hide-text {
text-indent:-9999px;
width:**px;
height:**50px;
background:url(***.jpg) no-repeat;
}
[/css]

（下記で解決！）

[css]
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width:**px;
height:**50px;
background:url(***.jpg) no-repeat;
}
[/css]

このコード、以前にもメモ程度ですが
「リンクメニューによく使われるCSS」の一部として書いていました。

一部のスクリーンリーダーで読んでくれない

display : none

それを、off-leftを利用してに対応する方法として

text-indent:-9999px;
background:url(***);

または、

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

▼ ギャラリーで有効にするには

Primary Lightbox - Other Settings / Use For WP Gallery ＞ ON

▼ 表示サイズ制限

Primary Lightbox - Base Settings / Maximum Width

長らく試行を保留していた「HTML5」ですが、そろそろよかろう と試してみたらひっくりかえったり唖然としたり　という話です。

HTML5のリファレンスをざっと見ていて
一番印象的なのは、アクセシビリティ性の高い表示の可能性
例えば視覚障害者向けスクリーンリーダーで感知できなかった動画や音楽の表示や制御が可能になることでした。

今回、web用の年賀によい機会なので、新しいタグの要素「audio」を使って作成してみました。

JavaScriptとの併用で、ずいぶん簡単にやりたいことが出来るので心地よく
しかし
数種のブラウザでデバッグして、ビックリ。
IE8に反映されないのだ。

無視してよいものなら無視したい
「動作しませんので他のブラウザを使ってね」とアラートを出すだけでよいか
USER_AGENTとかとらなきゃいけないのか（←やだ。めんどうくさいっ）

その後、IE9はどうなってるんだ？と　ブラウザ環境の巷の動向を 請け負いサイトのアクセス解析をのぞいてみたけど、IE9の利用が増える傾向を感じない結果に私は唖然とするのであった。

こんなかんじだ

※過去1ヵ月統計（ ）内はアクセス件数

▼ 市内NPO団体（600）ie: 77%, chrome: 10%.../ ie8: 70%, ie9: 13%...
▼ 市委託系NPO団体（510）ie: 71%, chrome: 10%.../ie8: 41%, ie7: 26%, ie9: 19%...
▼ 商店街のサイト（900）ie: 62%, android: 10%.../ie8: 50%, ie9: 20%...
参考に.........
▼ アクセスの5割は海外からのサイトでは（1800）ie: 24%, FireFox:23%, safari:18%.../ie8:56%, ie9: 30%...

では、謹賀新年。今年もよろしくおねがいいたします。
野木村さなえ
⇒ Webでお年賀 2012年

Youtube動画では字幕を設置することができます。
字幕は日本語に限らず他の言語でも表示が可能です。
設置設定されているものであれば、オブジェクト下部の「cc」マークでご覧になれます。

Youtubeヘルプ（字幕の編集）
http://www.google.com/support/youtube/bin/answer.py?hl=ja&answer=100077

字幕の形式：SubViewer（*.SUB）, SubRip（*.SRT）

字幕は文字データが動画に映し出されてるんですね。
Youtubeに限らずあらゆる動画コンテンツにいろんな言語で字幕が見られるプロジェクトが始まりました。

参考サイト：
Universal Subtitles
http://www.universalsubtitles.org

Learn about Universal Subtitles
http://www.universalsubtitles.org/ja/videos/NmkV5cbiCqUU/info/

コミュニティベースで進める動画への字幕付与プロジェクト「Universal Subtitles」
http://www.moongift.jp/2011/10/20111024/

EPUB3とは、W3Cに準拠したWeb標準をベースにしたオープンな電子書籍フォーマットです。拡張子は「.epub」

縦書き、ルビ、圏点の表現にWebkitの実装したcssと、xhtmlにより作成します。（ブラウザ chrome safariで表示可能）

▼ EPUB3pack（生成）http://epubpack.cloudapp.net/

▼ EPUB3ビューア（Win）http://espur.jp/

▼ EPUB 3 Specification Public Draft Released | International Digital Publishing Forum
http://idpf.org/news/epub-3-specification-public-draft-released

▼ 動機
新ＩＣＴ利活用サービス創出支援事業 電子出版環境整備事業（平成 23 年６月）
http://www.soumu.go.jp/main_content/000123221.pdf

▼ サンプル

[css]
@charset "utf-8";
html {
font-family: "HiraMinProN-W3", "@ＭＳ 明朝", serif, sans-serif;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
line-height: 1.75;
text-align: justify;
}
strong.sesame_dot {
font-weight: normal;
text-emphasis-style: sesame;
-webkit-text-emphasis-style: sesame;
-epubt-text-emphasis-style: sesame;
}
span.tcy {
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}
[/css]

▼ サンプル ダウンロード