2011-06-01から1ヶ月間の記事一覧
MDCによれば、argumentsは全ての関数内で利用可能なローカル変数であり、プロパティには下記がある。 arguments.callee: 現在実行している関数の関数本体を示す。 arguments.caller 非推奨 : 現在実行している関数を呼び出した関数の名前を示す。 arguments.…
ポイントは、２つ。 text-shadowは繰り返し指定することができる 内側の色は文字色と同じ色にすることで、文字の輪郭がぼやけて発光を醸しだす コードは下記。 <html> <style> #boxC { width:500px; height:100px; float:left; background-color: gray; text-align: cente</html>…
text-shadowプロパティを使用して、文字に影をつけてみた。 <style> div#boxB p{ font-family:Myriad, Helvetica, Arial, sans-serif; color: black; font-size: 42px; line-height: 150%; /* 値は左から順に、影をつけるX方向の距離、Y方向の距離、ぼかしの大きさ</style>…
CSS3のtransformプロパティで、変形を試してみた。 下記画像をクリックすると検証サイトが開きます。 非常に面白い。平行移動するためのCSS。 transform:translate(平行移動させるpx); 傾斜変形のためのCSS。 transform:skewX(X軸方向に傾ける角度); 回転。 …
いつも忘れるので、ボックスのpadding,border,marginプロパティ,widthプロパティ,heightプロパティを図で理解する。まず、CSSはボックス単位を基本にしてレイアウトされる。 それで、１つのボックスは図のように4つの部分から構成される。 content：内容 pad…
下記画像をクリックすると、検証サイトが開きます。 これでスマフォ対応もばっちり！？ そこまで言い切るだけの知識と経験はないが、マークアップはHTMLで行い、デザインはCSSで行うという役割分担がしっかりされている場合は、media queriesでスマフォ用の…
これまで、はてなフォトライフに登録した写真を表示するために、fotolife記法を使用していた。 ブログ編集時に次のように書いていた。 [f:id:hatenadiary:20041007101545j:image] ただ、これでは画像をクリックした時にフォトライフの画面が開いてしまうので…
これ便利そう！！２年前には既に存在していたようだが、全く知らなかった(＞-＜)。 画像はcacooのサンプルをPNG形式でエクスポートしたもの。図の著作権はCacooのFAQを見ると下記のようにあるので、自由に配布可能だ。 Cacooで提供しているステンシルの著作…
これは使えるかなと思った。 入力必須項目には背景色を付けておき、視覚的に入力必須項目を伝えることは大切だ。 一旦入力した後に、送信ボタンを押して、入力チェックに通らず、入力し直しとなるサイトもあるが、相当イライラする。先に教えてくれとｗ。そ…
今回試した入力値チェック機能は下記６つ。 required属性による入力必須制約によるチェック pattern属性による入力値のパターン制約によるチェック type属性に応じた入力値のタイプ制約によるチェック step属性による入力値制約によるチェック min属性、max…
今回の記事の内容は、「一度でもtextContentを使用したoutput要素の表示変更を実行した場合、resetボタン実行時にouput要素の値はデフォルト値には戻らない。textContentにセットされた値に戻ってしまう。」事実についてだ。HTML5のouput要素については、前…
今回試したHTML5の新要素は下記３つである。 出力値を表すouput要素 事前定義されたデータのリストdatalist要素 処理の進捗率を表すprogress要素 なお、＠ITの「HTML5とかアプリ開発入門」参考にしている。さて、出力値を表すouput要素だが、例えば下記のよ…
input要素に新しく追加されたタイプ属性を試してみた。正直なところ、opera以外では動かないものが殆どで、現段階では使えないなと思った。それでも、operaで動かして、一番楽しいなと思ったものは、type="color"。 次のように１行書くだけで、写真のような…
前回のエントリーでは、６つの変更点のうち、３つを試した。 今回は残りの３つを試した結果をメモする。これは、inputタイプのaccept属性にMIMEタイプを指定することで、アップロード時に選択できるファイルを限定する機能だ。例えば、次のように書く。 下記…
「HTML5で既存のinputタイプに加わった6つの変更点」を、自分で検証アプリを作成しながら試してみた。まずは、最初の3つ。textタイプのplaceholder属性は、テキストボックスの入力項目を説明するための属性である。 これは、チェックボックスがonでもoffでも…
大量のデータを、一度にまとめてクライアント側にダウンロードして表示しようとすると、表示に時間がかかる。 それを回避するには、表示が必要になった時にダウンロードして表示する方法が考えられる。これを実現するのが、ajaxScrollというライブラリだ。 …
このブログでは自分でHTML5の新機能を実装して、何ができるのかを試している。しかし、Remy Sharpが作成した「機能一覧とデモをまとめたページ」があるので、手っ取り早く機能一覧を確認したい場合は、そちらを利用する。
今回利用したのは、Geolocation API機能。これを利用して、現在位置を取得し、google maps APIも利用して現在位置を地図上に表示している。 例によって、検証アプリを作成した。 JSのメインは下記コード。ただし、jqueryは使用している。 <script type="text/javascript"> $(document).ready…
グラデーション機能を試してみた。グラデーションを付ける部分のコードは下記。 $gradientId.click(function(){ grad = ct.createLinearGradient(20,20,180,180); grad.addColorStop(0, 'rgb(255,0,0)'); grad.addColorStop(0.5, 'rgb(0,255,0)'); grad.addC…
HTML5の新機能の１つ「canvs要素」を試してみた。 例によって検証アプリを作成して、試した結果が下図。作成するのは簡単だが、ボタンをクリックするたびにcanvas描画領域を初期化する方法が分からなかったので、そこはメモしておく。まず、canvasで描画する…
普段はEclipseしか使っていないが、ソースコードと実際の見栄えを見比べながら、GUIでWebページを編集できるらしいので、使ってみようと思った。試しに、テーブルを追加してみた。 wysiwygモードにすることで、GUIでWebページの見栄えを確認することができる…
私が作ったわけではございません。 ただ単に「すげぇ〜」と思いましたので、紹介いたします。 キャプチャを撮ろうと思ったんですが、キャプチャを撮ろうとアプリを操作するとゲームがとまってしまいます。詳しくは、作者のHPを見て下さい。本当にすごいと思…
HTML5の新機能の１つ「video要素」を試してみた。 例によって検証アプリを作成して、試した結果が下図。 使い方は、audio要素とほとんど同じ。 <h1>video要素を試す</h1> <video id="video" controls> <source src="media/earthImage.mp4"></source> <input type="range" id="seekbar" value="0" min"0"/> <p>ブラウザがvideo要素に対応していません</p> </video>
HTML5の新機能の１つ「audio要素」を試してみた。 実際に、検証アプリを作成した。しかし、ハマった＞＜。currrentTimeへの値の設定が、期待通りに動作せず、困った。document.getElementById("id").currentTime = 0と書いても、0がセットされないのだ。原因…
IE8と、それより下のバージョンのIEでスタイルが適用されないことがある。 その対応方法を説明する。 【問題点】 IE8以下では、未知の要素に遭遇すると期待通りのDOMが構成されない。【解決方法】 document.createElement()を使用して、要素を生成する。 HTM…
W3CがHTML5の文法チェックツールをWEB上で公開している。次の、HTMLを文法チェックツールにかけてみた。 <html lang="ja"> <head> </head></html>
thisについて、恥ずかしいことに１つ勘違いして理解していた点があったので、自分の中で頭を整理した。まず、thisを一言で説明すると、次の通りだ。 thisとは、関数内ではthisを使用中の関数をメンバに含むオブジェクト*1を指し、トップレベルコード*2ではグ…
javaでダウンロード機能を作る際に、ユーザがダウンロードするExcelファイルをブラウザ内で表示させない方法をメモしておく。結論は、レスポンスのヘッダーにContent-Dispositionを設定すること。 逆に、ブラウザ内に表示させる場合は、設定しなければよい。…
jQuery内部で下記のようなことをしているので、できるでしょうと思いつつ試してみた。 できた。 当たり前か・・・。 var jQuery = window.jQuery = function( selector, context ) {・・・・ ■親画面 <script type="text/javascript"> var mode = 0; ( function($) { $.testFunc = function(</script>…
