無限の翼 :: MUGEN NO TSUBASA ::　結希猫個人Webサイト

はてなブックマークの方で紹介されてて、
試しに使ってみて結構よかったので、こちらでもご紹介〜(*'-')ｂ

◎wallpapers.x3studios.com
http://wallpapers.x3studios.com/

このサイト内で、いろいろ用意されているテクスチャーを貼っつけたり、拡大したり、色変えたりと、編集しながらデザインを作って、指定サイズでダウンロードできちゃったりします(´・ω・｀)便利なサイトやね。

ただ文字情報の打ち込みに関しては、日本語がフォントに対応してないので、英数だけっぽいかな。

折角いろいろ触る機会があったので、ささっとツイッターの壁紙を作成してみたのですけど...うーんむ、才能ないなー(´Д｀;)ヾ

上記の用に、ツイッター用のオリジナル壁紙をつくってみたり、何かのデザインの下絵とかに気軽にご利用してみてはどうでしょうかー(´∀`)

ちゃっかりサイトのロゴが入ってたりしますけど...(´д`)

本日「無限の翼 モバイルサイト」を公開しましたーヽ(´ー`)ノ

大手の無料ブログサイトとかだと、ブログのアドレスに携帯でアクセスすると、自動で携帯サイトに振分されたりしますよね。

あれがやりたくて（笑）ちょっとこしらえてみました(/ω＼)

まー結構前から裏側に合ったことは合ったのですけど(;´ρ｀)
グーグル先生のツールの関係とかで凍結してまして...。

つい最近やっと解禁になったので、公開とさせていただきました(*'-')

右メニューの方にも QRコードを用意していますので、
俺の携帯だと見れないんですが！っていうご報告待ってます（笑）

ここまでの一連のプログラムの設置とかは、また改めて記事にしようかと思っています〜。

前記事のつづきになります(´・ω・｀)

HTML５の説明だけで長くなったので一度切って、今度は「CSS3」になって出来るようになった事とか、講習会で聞いてきた内容をご紹介(´∀`)
相変わらず IEだけは非対応なので、その辺りはご了承くださいましー。
それと、まだ現状CSS3は開発段階なので、

Safari、Google Chrome では 「-webkit-」
Firefox では 「-moz-」
Opera では 「-o-」

の指定をCSSの指定箇所の頭部分に記入しないと表現できないモノばかりです。
早速試してみよう！と思ってる方は、この３つのコードをそれぞれ用意した方がいいかもです。

ちなみに、HTML5で生成したモノでしかCSS3の表現できない。という事は無いです。

■border-radius

簡単にいうと、「border」「background」等の指定箇所に入力することによって、丸角が作れます！
やっと画像とか用意しなくても、気軽に丸角を作りたい放題ですYO(/ω＼)
table時代からWEB作成していた方には、かなりの朗報じゃないのかな。

まずは、分かりやすい参考サイトさんをご紹介

◎参考サイト様：CSS Border Radius
http://border-radius.com/

このページの四隅に任意に数字を入力すると、
その数字分だけ角丸になり、ページ中央にそのソースコードが表示されます(´・ω・｀)

div {
-moz-border-radius: 12px; /* FireFox+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}

ソースコードの例はこんな感じです。

またIE6、7なら、専用のJavaScriptを設置することで同じような事ができるので、
IE環境のみの方は試してみてください。

◎参考サイト様：border-radius.js - JavaScript ライブラリー - HTML5.JP
http://www.html5.jp/library/border-radius.html

■text-shadow

今度は、指定した文字にドロップシャドウを入れることが出来るようになります(*'-')

◎参考サイト様：Pure CSS Letterpress Effect
http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html

こちらもわざわざ画像文字にしなくても、ドロップシャドウを入れられるので、
かなりデザイン性は向上しますね('Д')ｂ

で、ソースコードの例はこんな感じ。

□テキストタイプの指定
h2 { text-shadow: 0px 2px 3px #555; }

□ボックスタイプの指定
div {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FireFox3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}

数値の意味合いは、

◯◯-shadow:（右方向へ影移動距離）（下方向へ影移動距離）（影をぼかす範囲）（影の色）

になります。

で、カンマ区切りでさらに指定すると、複数のシャドウ入れることも出来ます。

h3 { text-shadow: 3px -3px , yellow -3px 3px 2px, 3px 3px red}

その場合、一番左の指定が一番上になって、下に重なっていく指定になるそうです。

■Media Queries

まずは、参考サイトを見てください！

◎参考サイト様：Vincent van Gogh (Media Queries example page || Media Queries の事例 )
http://people.opera.com/danield/css3/vangogh/

ゴッホの絵が載ってるサイトなのですがー
このサイトを表示させて、ブラウザの右下をドラッグして大きさを縮小してみてくてください

！(´・ω・｀)

な、なんと、実はこのサイト、
iPadとiPhone用のモニターサイズに合わせてデザインが切り替わるんですしおすし！('Д')

CSSの「media」指定には、 handheld, print, screen の指定がもともとあって、
その延長線で、Media Queriesという条件付きのCSSをつかって、ページのデザインをかえちゃおーって感じです。

まずは、IPadとかの画面サイズですがー

iPadサイズ：768 x 1024
iPhoneサイズ：480 x 800
テレビサイズ（Wiiのオペラ等）：横幅 800

で、
これに対応するMedia Queriesの書き方として、

□HTMLソース内に直接記入
<style type="text/css" media="screen and (max-width: 480px), screen and (max-device-width: 480px)">
article {
width:240px;
}
</style>

□外部CSSに記入
@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
article {
width:240px;
}
}

こんな感じで、各サイズごとに @media指定作っていく感じです。

コレが出来たら、わざわざプラットフォームごとにHTMLファイルを用意して...
とか小難しい事をしなくて済むので、かなり良いプログラムなのですが！
全部のプラットフォームでサポートされてる訳ではないので、（とくにIE環境）
これからですかね...

あとは講演ないでは、まだまだ開発段階のもので、

■transition
アニメーションが作れます！

◎参考サイト様：css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
http://kachibito.net/web-design/css3-transition-sample.html

■@font-face
サーバ上にフォントファイルを置いて、それを呼び出すことでPC内に無くても特殊フォントで閲覧できる。

◎参考サイト様：CSS3 「gradient」と「@font-face」
http://ghostpia.com/sample/wft-makiba/

■transition
指定箇所をありえない形に！

◎参考サイト様：css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
http://kachibito.net/web-design/css3-transform-sample.html

■gradient
ついに、グラデーションもCSSで可能に！

◎参考サイト様：CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
http://www.css-lecture.com/log/css3/css3-gradient.html

以上でっす。
こんな感じのものを講演内で、実際に手打ちで行ってもらったものをみてました(´∀`)
次回があるのなら、また行きたいなーと。

今回の記事を作る上で、いろいろ調べてみたら、結構「HTML5」「CSS3」の記事を扱ってるサイトが多かったので相当遅れてるなーと思いましわ(ノД｀)

-おまけ-

帰りの古賀インターで、妹のおみやげに、熊本限定でこぽんのリラックマ(σ￣ー￣)σ

なぜ熊本限定がここに...（笑）

先週末、福岡で開催されたHTML５の講演会に参加してきました(´・ω・｀)
CSS3の情報もあるみたいだったので（こっちも本命）、かなりwktk状態。

で、講演は、６時間ぐらいだったのですが、グーグルの人とかオペラの人とか、CSS3開発スタッフの外国人の方とかかなり聴きごたえがあって楽しかったです(*'-')

で、まだHTML5ってなんなの...
っていうレベルの方もいると思いますので、
講演の中で猫が猫なりに解釈した事を、掻い摘んでダラダラと流しておきますので、
興味のある方は見てあげてください(´д`)
メンドイ人は、外部リンククリックするだけでも楽しめるかも（笑）

まずはHTML5について！
どうたらこうたら〜ってウンチク語ってもわかりにくいだけなので、まー簡単に（笑）

現在主流のXHTML1.1の次にあたるウェブサイトにおける構成プログラム（書き方って言い方がわかりやすい？）

で、どんな事ができるのかっていいますと...

『動画や音声ファイルをFlash、SWFプレイヤープログラムを入れずに、そのままタグ打ちだけで表示が可能』

たぶん、これがメイン（笑）

IEはまだ非対応なんですけど、「Canvas」というJavaScriptで構成されているお絵かきプログラムで、HTML上でFLASHみたいな動画ファイルを作成する事が可能になってます。
Canvasでの作成事例のサイトさんの中でちょっと面白そうなものをご紹介〜♪
※FireFox3.6.3以上、Safari4以上、Google Chrome推奨。IEは非対応です。

◎Canvas例：ブラウザ全体でお絵かき（Harmony - Procedural drawing tool）
http://mrdoob.com/projects/harmony/

◎Canvas例：ツイッターコメント表示ムービー（HTML5 Canvas Experiment « IO 9elements）
http://9elements.com/io/projects/html5/canvas/

◎Canvas例：360°テトリス
http://www.benjoffe.com/code/games/torus/

◎Canvas例：3Dゲームっぽいもの（笑）（www.benjoffe.com | Canvascape）
http://www.benjoffe.com/code/demos/canvascape/

これ全部Flashではないんですよね。うーむ、すごい！

で、手打ちでいままで作ってきた人には朗報で

『構成ソース部分が、すごく簡単になります』

「DOCTYPE宣言」で例をあげると、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

こんな感じで、1行目に長くいれますよね。
こんなの暗記してたら、無駄にすごいんですが...（笑）

HTML5では、

<!DOCTYPE html>

になります！簡単でしょ（笑）

それに、現在の書き方でXHTML形式で作られてる方が多いと思うのですけど、
これのXHTMLとHTMLが組み合わさって、文章構造を明確にしつつ、よりビジュアル的に表現が可能なのがHTML5のソース構造かなって理解してます(;´ρ｀)（たぶん間違ってないハズ！（笑

その他のメリットとして細かいことをいうと、

・SVGファイル（ベクター形式）が表現できる。
・クロスドキュメントが可能。（異なるウィンドウ間でメッセージの送受信を行う事が出来る）

とかかな...。
SVGファイル復活で結構楽しそうですけどね！

また３DゲームもHTML上で遊べたり、

◎Google開発者が「Quake II」をHTML5に移植　ブラウザでプレイ可能に - ITmedia News
http://www.itmedia.co.jp/news/articles/1004/06/news038.html

まだまだ開発中みたいですけどね。

で、なかなかすごいHTML5なんですけど...

マイクロソフトのIEのみ非対応です(´・ω・｀)

具体的に言うと、現在開発中のIE9で一部対応するとはいってますが、
IE9をインストールできるのが「Vista」以降のOSのみとか...(;°ロ°)

会場にグーグルとオペラの人が来てたのですが、マイクロソフトにこれらの機能の事を伝えても、対応するかしないかとかはノーコメントみたいなので、まったくもって開発状況がわかってないとか言ってたな〜。頭抱えてたし(;´ρ｀)
ブラウザのシェア率はトップなので、なんとか対応してほしいところ。

まー、Google Chrome、Opera、FireFox、Safariはほぼ対応済みなんですけどね。
気になる方は、こちらで楽しんでもらえればと思います(/ω＼)

猫が理解したHTML5はこんな所です（笑）

次回は、続きにあたる「css3」ことでもご紹介する予定です(´∀`)
こっちもスゴイですよ！

参考サイト様：
◎HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

自分用にメモメモ

Twitterだと文字数が決まってるので、ハイパーリンクは貼れるけど文字数が足りずに、完全にアドレスが記入できないと思います。
そういうときは、URLを短縮してもらえるサイト様があるので、
こちらでアドレスを短くしちゃいましょー(*'-')

◎TweaK
http://tweak.tk/

例えば...遊戯王のブラックマジシャンガールを画像検索アドレスが

◯グーグルのアドレス
http://images.google.com/images?hl=ja&safe=off&client=safari&rls=en&um=1&q=ブラックマジシャンガール&ndsp=18&ie=UTF-8&sa=N&tab=wi

◯TweaKサイトで変換アドレス
http://uj9ba.tk

こんなに短く！(;°ロ°)スゲー
便利なので活用しましょうねー(*'-')ｂ

あー忘れてました...（汁）
TwitterのブログパーツをTOPページに配置していますー。
ここの記事の更新が遅いので、こっちでもうちょっとアクティブに情報を伝えられたらーというのと、会社の方でもいろいろ商材として使いたいみたいなのでテスト運営も兼ねてるのが狙いでっす。

まー基本駄文なので...
みちゃるかね！っていう気持ちの時だけでOKデス（笑）

自分用のメモですので、ワカンネ！っていう方はスルーでお願いします(*'-')

メニューボタンを押すと、下にリンク項目がずらずら〜と表示される
一昔前にえらい流行ってたプログラムの Ajax版をメモメモ。
ウェブページの数量が多いクライアントにお願いされて設置したものです。

使用するプログラムはこちら！
◎JavaScript Dropdown Menu with Multi Levels
http://www.leigeber.com/2008/11/drop-down-menu/

ええ...
完全英語サイトなのでサッパリですね！（笑）

まーサンプルを見てもらえれば分かりやすいかな？

◎サンプルはこちら
http://sandbox.leigeber.com/dropdown-menu/index.html

◎ダウンロードはこちらから
http://forum.leigeber.com/index.php?app=downloads&showfile=7

「Download File」ボタンからダウンロードしてくだされ

で、設置方法なんですがー

解答したフォルダの中に含まれてる、「script.js」「style.css」を、
ページのヘッダー情報内で呼び出すのは基本なので、割愛します。
※名称が安直なので「dropdownmenu」等、どちらもファイル名称の変更をオススメ

で、本体ソースコードには、リストタグの「ul」「li」を使いますので、
css構築する人には嬉しい限りだと思います！ウレシイデス（笑）

まず、Javascriptの読み込み指定をbodyタグの中で記述します。
えーと、ドロップメニューより後であれば場所は任意で大丈夫です。


<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>


それから、本体の設置方法ですけど、


<ul class="menu" id="menu">
　<li><a href="#" class="menulink">Dropdown One</a>
　　<ul>
　　　<i><a href="#">Navigation Item 1</a></li>
　　　<li><a href="#">Navigation Item 2</a></li>
　　　<li><a href="#">Navigation Item 3</a></li>
　　</ul>
　　</li>
　</ul>


本体の「ul」に「class="menu" id="menu"」を追加。
メニューメインボタンの「li」に「class="menulink"」を追加します。
これでドロップダウンメニューは完成です(*'-')

で、2階層以上のページを作るときは、


<ul class="menu" id="menu">
　<li><a href="#" class="menulink">Dropdown One</a>
　　<ul>
　　　<i><a href="#">Navigation Item 1</a></li>
　　　<li><a href="#">Navigation Item 2</a></li>
　　　<li><a href="#" class="sub">Navigation Item 3</a>
　　　　<ul>
　　　　　<li class="topline"><a href="#">Navigation Item 3−01</a></li>
　　　　　<li><a href="#">Navigation Item 3−02</a></li>
　　　　　<li><a href="#">Navigation Item 3−03</a></li>
　　　　　<li><a href="#">Navigation Item 3−04</a></li>
　　　　　<li><a href="#">Navigation Item 3−05</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　　</li>
　</ul>


階層をつくりたいメインメニューボタンの「a」タグに「class="sub"」を追加。
次の階層の一番上になるメニューボタンの「li」に「topline」を追加します。
これで、右側に次の階層のメニュー一覧が表示されます。

この指定を繰り返すだけで、横幅がある分だけ深い階層のメニューを表示することができます。
以上です！

小難しい設定とかないので、かなり楽々で、おお！な感じじゃないかと思われます(*'-')

にしても...
この手の検索ワードって、なにが正解なのでしょうね...
「アコーディオンメニュー」？　「ドロップダウンメニュー」？　「スクロールメニュー」？

うーん。ワカンニャイヽ(;´Д`)ノ

◎参考サイト様
マルチ階層可能なドロップダウンメニュー/ナビゲーション/SolidStateEveryday
http://solidstate.jp/Navigation/DropdownMenu/script_50.html

自分用のメモですー。興味ない方はスルーで(´ー`)

ActionScript 1〜2で、外部リンク指定として使っていた、ｃは、ActionScript 3 ででは使えないので、ActionScript 3 での構文を掲載しておきます。

FLAファイルの１フレーム目に以下を記述。

　　 // イベントを設定
　 stage.addEventListener( MouseEvent.CLICK , onClick );
　 // 画面クリックをするとonClickが動作するイベント
　 function onClick ( event:MouseEvent ) {
　 // URLRequestを設定
　var url:URLRequest = new URLRequest( "http://xxxxxx.com/" );
　// 実際にページに飛ぶ
　navigateToURL( url );
　 }

一応これで『getURL』の用に、SWFファイルをクリックすると、飛び先（http://xxxxxx.com/）にジャンプします(*'-')

で、ここからが大事！

この「navigateToURL」の指定は強制的に「新規ブラウザを開く（_blank）」指定になってますので、現在の画面上に表示を行なうには以下の方法をとって下さい。

　　 // イベントを設定
　 stage.addEventListener( MouseEvent.CLICK , onClick );
　 // 画面クリックをするとonClickが動作するイベント
　 function onClick ( event:MouseEvent ) {
　 // URLRequestを設定
　var url:URLRequest = new URLRequest( "http://xxxxxx.com/" );
　// 実際にページに飛ぶ
　navigateToURL( url,"_self" );
　 }

赤字の部分を追加。navigateToURL();内に、「_self」指定を加えるだけでOKです。

で、

この「_self」指定した途端...
ローカル上で、SWFファイルをクリックしてもなにもならんぞーーヽ(;´Д`)ノ

って現象が起きるかも知れません...。猫は起きました（笑）

この原因は、「Flash Player」の方あって、

これは、Flash Player 9,0,115,0 以降で、
SWFファイルが、リンク指定したリンク先のhtmlと異なるドメインにある場合、
ターゲットとして「_self」「_parent」「_top」のいずれかを指定すると、
SWFファイルからのリンクが機能しないようになっています。
（※もちろんローカル上も含みます）

で、この対処方法は、

パブリッシュしたときに、掃き出されたHTMLファイルを開いて、
ソースコード上にある「AllowScriptAccess」の指定箇所を
『always』に変更して、保存してください。

これでローカル上からでも確認できると思います('◇')ゞ

SWFファイル内に入れ込むスパムプログラム対策なんでしょうけどね〜
知らない人は知らないので、この仕様はきついなーと...

今回はこんな感じです。

ActionScript １〜２と、３は完全に別物なので、折角覚えたのにまた覚え直しには躊躇するんですけどね〜。
CS4を導入する取引先が増えてきたので、否応なしでも、「ActionScript 3 」を覚え直さないとダメだろなー...と、猫はいってみた(´Д｀;)ヾ（とある禁書風ｗ）

◎参考サイト様。
F-site | [AS3] getURLのように外部ページに行くには

くはー！GIGAZINを見てちと驚いたのですが
どうもブログ検索サービス「テクノラティジャパン」が、10月23日サービス終了するそうです...

◎Hyobans(ヒョーバンズ)、並びにテクノラティジャパンサービス終了のお知らせ
http://www.technorati.jp/weblog/2009/10/service_close_hyobans.html

「テクノラティジャパン」は、もともとGooglePageRankが高いために、
ブログをユーザー登録するだけでお手軽にリンクポイントアップが見込めるといことで、
以前にお手軽なSEOとして紹介させていただいたサイトだけに、業者の猫的にかなり衝撃の２文字(ノД｀)マジカヨ

一応、以前に登録していたアカウントに関しては、親元の「テクノラティUS」へ移行することが出来るそうです。

◎アカウントの移動手続き
http://www.technorati.jp/weblog/2009/10/account_migration.html

具体的な移行手続きは、
10月14日～12月31日の期間内に「テクノラティUS」にてログインするだけっぽいのかな。

とりあえずココもやっておきましたけど...
SEOとしてのどこまで使えることやら...

いままでのロールオーバーイメージの猫的なやり方は、
CSSを用いたをずっと書いてたのですけど、
ちょっとソースが強引な上に、
閲覧者側の回線・PCスペック等に依存しちゃうので...

設置が楽で、なにか良いものないかにゃ〜

あー設置が楽ってことなら、Dreamweaver等のソフトを使えば良いジャン！
って事になりそうなんですけど、余計なソースが多いので邪道だな〜論外(;´ρ｀)

まー捜してみたら外部プログラムファイルを読み込ませて、
ロールオーバ前と後の画像を用意するだけでＯＫっていうプログラムをみつけたので、自分のメモ用にカキカキ。
ですので、興味のない方は見なかった事にしてください(/ω＼)

参考サイト様：
◎Sapphirus.Biz　簡単ロールオーバーイメージ - Javaスクリプト
http://www.sapphirus.biz/javascript/rollover/

こちらのページより「rollover.zip」をダウンロードして
『rollover.js』のみ使用します。

設置手順は、

（１）『rollover.js』の任意のフォルダに設置。（今回は、jsフォルダ）
HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す。

<script src="ドメイン名/js/rollover.js" type="text/javascript"></script>

（２）ロールオーバーさせたい画像をロールオーバ前と後の２種類用意する。
それで、ファイル名を

◎ロールオーバー前の画像　→　○○○_off.jpg
◎ロールオーバー後の画像　→　○○○_over.jpg

という風に、ロールオーバー前なら「_off」、
ロールオーバー後なら「_over」を名称に加え、フォルダ内に設置。
※画像ファイルの拡張子はどれでもＯＫ

（３）HTML上にロールオーバー前の画像をimgタグで呼び出せば完了！

画像に関しては、違うフォルダでも読み込んで来るので、
いくつも違うパターンのメニューを用意するときは、名称に注意してください。

『rollover.js』さえ読み込ませておけば、あとは画像を用意するだけなので、
すっごい楽じゃないでしょうか？（＝ω＝）

気になる読み込みの速度とかは、まだ検証してないので、にんともかんともですが(´ー`;)
たくさんロールオーバーイメージを設置しないといけない！
というときは、利用してみてはどうでしょうか。

ちょっいと仕事の方で、
PCと携帯ユーザー向けの簡単なアンケートフォームを急遽作ってほしいって言われてバタバタ作成していて
アンケートに答えたら抽選でプレゼントという形を取るので、
連絡先用のメールアドレスを記入するフォームを追加したのですけど、
携帯で入力しようとおもったらデフォルトが「ひらがな」モードになっていたので...これは使い難い！

という事で、いろいろ探してみましたら、紹介してあるサイトさんを見かけたので、
自分のメモ用にカキカキ(´_ゝ`)

■DoCoMoの場合

inputタグに「istyle」属性を入れ込みます。

istyle="1″
全角かなモード

istyle="2″
半角カナモード

istyle="3″
半角英字モード

istyle="4″
半角数字モード

■auの場合

inputタグに「format」属性を入れ込みます。

format="*A"
半角英字（大文字）モード

format="*a"
半角英字（小文字）モード

format="*N"
半角数字モード

format="*X"
半角英数（大文字）モード

format="*x"
半角英数（小文字）モード

format="*M"
全角かなモード

format="*m"
全角英字モード

※頭の（*）は、文字数の制限なしという意味だそうです。
*の変わりに数字を入れると文字数も制限できますが、
対応してない端末があったり、機種によってはエラーが出たりと、
他のキャリアでは類似の機能がありませんので、×オススメとか。

■Softbankの場合

inputタグに「mode」属性を入れ込みます。

mode="hiragana"
全角かなモード
mode="katakana"
全角カナモード
mode="alphabet"
半角英字モード
mode="numeric"
半角数字モード

で、これらを対象とするメールフォームを加えれば完成ですヽ(´ー`)ノ

最終的にはこんな感じかなっと。

<INPUT size="22" type="text" name="email" istyle="3" mode="alphabet">

それと、携帯サイト用のメールフォームCGIはこちらを使いました。

◎WEB MAIL [I] ( i-Mode版 ) 　
http://www.pmcj.com/program/p_mail/webmail.html

i-Mode用と書いてますけど3キャリア対応で設置も楽なので、
探してる方がいましたら、こちらを使ってみても(´ー`)

なにかの参考になれば幸いです(*'-')

参考サイト：
◎携帯サイト（モバイルサイト）のフォーム入力項目のデフォルトを半角英数字等にする « WEB制作会社デザイナーのメモ帳
http://5co.jp/mobilesite/41.html