月: 2009年7月

[mootools]　スクロールバーを画像でカスタマイズする

by

スクロールバーを画像で作ることが出来るMootools Powered Scrollbarというcoolな関数をちょっと拡張してみた話。

custom_scrollbar

このオリジナルの関数ちょっとクセがありまして

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

上記のようにスクロールさせる要素とスクロールバーを兄弟にした場合、contentに#wrapperを指定しないとスクロールされません。
これで#wrapperにposition:relaviteしてあるとスクロールバーまで一緒にスクロールしてしまうわけです。

次のような入れ子のソースで、#wrapperの中身の#scrollareaをスクロールさせたいとした場合

<div id="wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>

スクロールする要素包んでスクロールバーを作れば何も考えずに済む 😀 

<div id="wrapper">
<div class="scroll-wrapper">
<div id="scrollarea" style="height:1000px">dummy contents</div>
</div>
<div id="scrollbar"><div id="knob"></div></div>
</div>

ので、そういうもの作ってみたというわけです（自分用に）
空要素作らなくて済むし一石二鳥かなぁと。

ViewDemo »

続きを読む

[mootools] 別窓を開くアイコンとhrefの拡張子に応じたアイコンや属性を追加する

by

mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。

jQuery版も追々書き換えたい…。

こんなことします。

  • リンクの前にファイルタイプアイコンを追加
  • 別窓で開くアイコンと属性を追加
  • PNG、JPG、GIFへのリンクにQuickBoxのrel属性を追加

上記３つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて２～３文字のものです。オプションで設定してない拡張子にはアイコンは出ません。

拡張子以外にhrefの内容で判別するものは次の通り

  • mailto:　→mail
  • https://　→https
  • window.print() →print

矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。

ViewDemo »

続きを読む

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

by

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のにすればおｋらしい）
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性 – ping (a 、area要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性– id, tabindex, hidden
  • 廃止された要素 – center, font, strike

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

続きを読む

[CSS] buttonタグの中に画像だけを入れる場合

by

フォームのボタンをカスタマイズする場合にオーソドックスなのは、

  1. type="image" を使う（タイプ属性にimageを指定する）
  2. inputやbutton要素にbackground-imageを指定する

の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。

普通に入れたらこうなるけれども、

CSSをちょっと弄れば…

中の画像入れ替えるだけでokな代物に。

続きを読む

[XHTML] 携帯サイト（ガラケー）用 XHTML仕様まとめ

by

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第３次世代の機種です。
やっぱり三社三様だけど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に微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

続きを読む