• Blog.37to.net
    • home
    • blog
    • labs
    • about
    • contact
  • プログラミング・開発 > JavaScriptでCSSとイベントを扱う from Kanasan.JS

    • CSS
    • JavaScript
    • Kanasan.JS
    • 勉強会
    作成:
    2009-04-18T22:41:35+09:00
    更新:
    2009-04-19T20:27:25+09:00
  • 先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。

    ご参加頂いた皆様、ありがとうございました。

    JavaScriptからCSSを扱う

    それ程難しくはないので、簡単にまとめておきます。

    はまりがちな事

    Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。

    僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。

    <style>
    #foo {
        background-color : #000;
    }
    </style>
    <span id="foo" style="font-size:20px">bar<span>
    <script type="text/javascript">
    function hoge(){
        alert( document.getElementById('foo').style.fontSize );
        alert( document.getElementById('foo').style.backgroundColor );
    }
    </script>
    
    bar

    上記コードを実行すると分かりますが、インラインで定義したものしか取得出来ないので、注意が必要です。

    スタイルシートオブジェクト

    各要素にインラインでCSSを指定するには、前述の方法でいいのですが、次は外部CSSや埋め込みのstyle要素の扱いです。

    ほとんど使った事がなかったのですが、document.styleSheetsを使って、操作が出来ます。

    IEの場合はプロパティやメソッド名が違うので少しだけ注意が必要ですが、以下のリンクが参考になります。

    Javascript cssRules - とみぞーノート

    getComputedStyle

    ここまでで、JavaScriptからインラインで書かれたCSSや、外部CSS、style要素で書かれたCSSの値を取得出来る事が分かりました。

    但しこのままでは、最終的にどういうCSSが当たっているかが分かりません。

    そこで現在のスタイル値を参照出来るのが、getComputedStyle()メソッドです。

    getComputedStyle()については、id:amachangのエントリが詳しいです。getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記

    少し付け加えると、amachangのエントリでは、Safariの場合はdefaultViewからしか取れないと書かれていますが、 Safariもバージョン3からは取得出来るようで、手元のWin版ver3.2.2で確認すると、そのまま取得出来ました。

    • getComputedStyle()の第二引数は擬似要素。mozillaやFirefoxでは省けないので、通常はnullを指定する
    • IEはHTMLElementのcurrentStyleプロパティを使う(擬似要素は調べる事ができない)
    • getComputedStyle()とcurrentStyleは別物
    • getComputedStyleが理論値なのに対して、currentStyleは実測値
    • Operaは両方使える

    理論値(算出スタイル)と実測値を補足すると、例えばCSSでフォントに「MSゴシック」を指定したとします。
    「MSゴシック」がないPCで見た時は、ブラウザにより適当なフォントに置き換えられるのですが、この時に、
    CSSで指定されている「MSゴシック」を返すのがgetComputedStyle、
    実際に使用しているフォントを返すのがcurrentStyleです。とはいえ、currentStyleもどこまで正確かは怪しいようです。

    以下、参考リンク。

    • getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
    • ブラウザ毎の getComputedStyle の戻り値 - latest log
    • さぼてん: 【Javascript】CSSの値を取得する

    CSSの扱い方のまとめ

    JavaScriptからCSSを扱う為の方法を表にしておきます。(表をクリックで拡大)

    対象 普通のブラウザ IEなブラウザ
    インラインスタイル Element.style.color
    外部CSS、style要素

    スタイルシート(配列で複数定義されている) document.styleSheets[0]

    スタイルシートの数 document.styleSheets.length

    スタイルシート内のルールオブジェクト(配列で複数定義されている) document.styleSheets[0].cssRules[0]

    ルールのセレクター document.styleSheets[0].cssRules[0].selectorText

    スタイルオブジェクト(Element.style)と同じ使い方が出来る document.styleSheets[0].cssRules[0].style

    ルールのテキスト全体(innerHTMLのイメージ) document.styleSheets[0].cssRules[0].cssText

    スタイルシート document.styleSheets[0];

    スタイルシートの数 document.styleSheets.length;

    スタイルシート内のルールオブジェクト(IEはcssRulesではなく、rules) document.styleSheets[0].rules[0]

    ルールのセレクター document.styleSheets[0].rules[0].selectorText

    スタイルオブジェクト(Element.style)と同じ使い方が出来る document.styleSheets[0].rules[0].style

    ルールのテキスト全体(innerHTMLのイメージ) document.styleSheets[0].rules[0].cssText

    スタイルシートへのルール追加

    CSSルールのテキストと挿入インデックスを指定 document.styleSheets[0].insertRule("body {color:#CCC}", 0)

    セレクタとスタイルを分けて指定。オプションで第三引数に挿入インデックス(デフォルトは最後) document.styleSheets[0].addRule("body", "color:#CCC")

    有効になっているスタイルの参照

    第一引数はHTMLElement。第二引数は擬似要素で、通常はnullを使う。 getComputedStyle(document.body, null)

    IEはHTMLElementがcurrentStyleというプロパティを持っている。 厳密にはgetComputedStyle()で取得出来る値と違う。 document.body.currentStyle ちなみにOperaもこのプロパティを持っている。

    link要素にdisabledが使える

    見出しの通りなのですが、link要素にもdisabledが使えるようです。

    但し、HTML要素ではなく、JavaScriptから操作する必要があります。

    <html>
        <head>
            <link id="example" type="text/css" rel="stylesheet" href="example.css" />
        </head>
        <body>
            <script type="text/javascript">
                function hoge(){
                    document.getElementById('example').disabled = true;
                }
            </script>
            <button type="button" onclick="hoge()">CSSをオフ</button>
        </body>
    </html>
    

    あまり使い所は少ないかも知れませんが、ユーザー側でCSSのオンオフをさせたい時はいいかも知れません。

    あとはCSS Naked Dayに合わせて、ページ読み込み時にJavaScriptでCSSをオフにするぐらいしか、使い所が思い浮かばない。
    CSS Naked Dayを忘れないためのJS - Webtech Walker

    見栄えの分離について

    ここまで書いておきながら言うのも何なのですが、CSS自体の操作はあまり行わない方がいいかなと思っています。

    基本的にプログラムと見栄えの分離をするべきだと考えているので、手軽に書く時に使うのはいいですが、 保守性が悪くなるので、多用するべきではないと思っています。

    ちょこっとだけ書く時(例えばdisplayのオン/オフとか)に利用する分には便利だと思いますが、 それこそスタイルシートオブジェクトを必要とするような、しっかり書く必要がある時は、 JavaScriptからスタイルを操作するのではなく、予め外部CSS等でスタイルを定義しておき、 classの追加等でスタイルを切り替える方が保守しやすく、HTML、CSS、JavaScriptの分離が行いやすいと思います。

    イベント周り

    最初に結論。

    同じ要素に複数のイベントハンドラを割り当てる必要がある時は、素直にライブラリを使う。

    主にIEでイベント処理の実装が他のブラウザとかけ離れすぎている為なのですが、 Operaも細かい挙動で違いがあるという話も出ていました。

    イベント周りは、今までの経験上でもブラウザ毎の差異が大きい部分と感じます。

    イベントタイプ

    onclickなどのイベントタイプですが、ブラウザ毎に使える種類とその挙動に違いがあります。

    今回読んだ範囲では、ブラウザ間の違いはほとんど触れられていなかったので、参考リンクを張っておきます。

    Javascript - Event compatibility tables

    英文ですが、イベントタイプとサポートされるブラウザが表になってまとまっており、とても参考になります。

    DOM Level0とDOM Level2のイベント

    JavaSctiptのイベントには二つの種類があり、これは似て異なるものです。

    element.onclick = foo <div onclick="foo()"></div> のような、イベントの定義をDOM Level0のイベント、 element.addEventListener( 'click', foo, false ); のような、addEventListenerを使ったイベント処理をDOM Level2のイベントと呼ぶそうです。

    この辺りはあまり分かっていなかったので、今回は勉強になりました。

    W3Cが定めているDOMの仕様が決まる前のイベントであるDOM Level0に対して、 DOM Level2で定められているイベントが優れているのは、主に以下の2点です。

    • 複数のイベントハンドラが定義出来る
    • 実行される優先順位をコントロール出来る

    つまりDOM Level2の方が色々出来るぜ!という事なのですが、あくまでW3Cが定めている仕様で、 実装状況はブラウザ毎に異なります。

    IE以外は大体仕様に沿っているのですが、IEはひたすらGoing my wayです。

    thisキーワード

    IEのattachEventで追加したイベントハンドラを除き、基本的にハンドラ内の「this」 はイベントが発生した要素のHTMLElementオブジェクトになります。

    ここで気を付けないといけないのが、オブジェクトのメソッドをハンドラとして渡した際のthisが変わる事です。 IEでは使えませんが、addEventListenerを例にします。

    var obj = {
        prop   : 'property',
        handle : function(){
            alert(this.prop);
        }
    };
    document.body.addEventListener('click', obj.handle , false);
    

    上記のコードを実行した際に、obj.propの「property」が呼ばれそうですが、実際にはundefinedです。

    これは、thisがイベントの発生したHTMLElementになる為です。

    上記のような時はどうするかというと、人によってやり方は違うかも知れませんが、僕はクロージャーを使う事が多いです。

    var obj = {
        prop   : 'property',
        handle : function(){
            alert(this.prop);
        }
    };
    document.body.addEventListener('click', function(event){
        obj.handle();
    }, false);
    

    他にはapply()でラップした関数オブジェクトを渡す方法があります。 Prototype.jsのbind()とかbindAsEventListener()はaplly()でラップしたものを返しているだけです。

    イベントの伝播(バブリング)

    イベントは伝播します。子から親へ伝わります。子要素で起きたイベントは、必然的に親要素にも伝わります。
    これはDOM Level0もLevel2も同じです。

    今回の範囲を読むまであまり意識していなかったのですが、イベントにはバブリングという、 親要素にイベントが伝播していく仕組みがあります。

    <span style="background-color:#CCC;" onclick="alert('foo')" >
        上記のコードを<a href="javascript:void(0)" onclick="alert('bar')">実行してみる</a>
    </span>
    
    上記のコードを実行してみる

    例の場合、リンクをクリックすると、その親要素のonclickも実行されます。HTML上の親要素を辿りながら同じイベントが実行されていく事をバブリングというそうです。

    このバブリングを含めて、DOMで定められているイベントの伝播には3つのフェイズがあります。

    1. キャプチャー(優先して処理されるイベントの捕捉)
    2. ターゲットノードでのイベントハンドラ実行
    3. バブリング(ターゲットからルートノードまでのイベントを実行)

    1はイベントが発生したノードのルートノードから、イベントが発生したノードまで、親から子に向けてイベントハンドラを捕捉して実行します。

    2はイベントが発生したノードのイベントハンドラを実行します。

    3はイベントが発生したノードから順番に子から親に向けて、ルートノードまでの各ノードのイベントハンドラを実行。

    以上のような流れでイベントが実行されます。英文ですがW3Cの図が分かりやすいです。
    Document Object Model Events(英文)

    DOM Level0は2と3のみで、DOM Level2だと、1〜3になります。

    この仕組み自体は一長一短で、

    • 子要素で発生したイベントも捕捉出来る
    • しかし、強制的にイベントが呼ばれるので、望まない動作になる時がある

    使い方によっては便利でもあり、不便でもあります。

    これはEventオブジェクトでコントロール可能で、途中でバブリングを停止する事が出来ます。

    参考

    • Document Object Model Events(英文)
    • 第6回 イベントハンドラから脱却しよう:ITpro
    • JavaScript addEventListener() - とみぞーノート
    • addEventListener の第三引数について - hogehoge
    • [javascript]イベントの伝わり方
    • キャプチャリングとバブリング Firefox編 - 文殊堂

    Eventオブジェクト

    イベントハンドラはEventオブジェクトを扱う事が出来ます。

    そのイベントが発生したノード等、イベントに関する情報が入っているオブジェクトです。

    IEはwindow.eventにイベントオブジェクトが定義され、それ以外のブラウザはイベントハンドラの第一引数に渡されます。

    DOM Level0の場合は、以下のようなコードでEventオブジェクトが取得出来ます。

    <button type="button" id="clickhandle">JSから定義</button>
    <button type="button" onclick="var e = event || window.event; alert(e)">onclick属性で定義</button>
    <script type="text/javascript">
    function clickhandle(event){
        //window.eventはIE
        var e    = event    || window.event;
        //window.event.srcElementはIE
        var elem = e.target || e.srcElement;
        alert(elem.id);
    }
    document.getElementById('clickhandle').onclick = clickhandle;
    </script>
    

    onclick属性の中で直接コードを書く場合は、暗黙的にeventという変数に入っているみたいです。

    イベントハンドラはこのオブジェクトを使って、ターゲットノードを特定したり、バブリング中のカレントノードを知る事が出来ます。

    また、バブリングを途中で停止させるメソッドも、このイベントオブジェクトが持っています。

    詳細は以下を参考にどうぞ。

    イベントオブジェクトまとめ - Archiva

    addEventListenerを使った処理

    IEの話は一先ず置いておき、通常のブラウザの話からです。

    DOM Level2である、addEventListenerを使った処理を見ていきます。

    addEventListenerはIE以外の主なブラウザで使えます。

    ハンドラの登録

    以下、サンプルコード

    var handle = function(){
        alert('handle');
    }
    document.body.addEventListener('click', handle , false);
    

    DOM Level0では一つのイベントハンドラしか設定できませんが、DOM Level2では複数登録出来ます。

    但し、複数のイベントハンドラを定義した時は、登録された順で実行されるとは限らない事に注意する必要があります。

    また、addEventListenerに渡すハンドラーはfunctionオブジェクトでなくても、handleEventをメソッドとして持つオブジェクトも渡せるようです。
    handleEvent、addEventListener - 素人がプログラミングを勉強するブログ

    addEventListenerの第三引数をtrueにすると、バブリングフェイズではなく、キャプチャーフェイズで実行されるようになります。 つまり子要素でイベントが発生したとしても先に処理が出来ます。

    IEのイベント処理

    最大の鬼門です。

    読んでいる時は皆一言も喋らなかった。読み終わってからも。

    笑えない実装内容でした。

    実装している内容としては、DOM Level2に満たない内容で、独自実装の色が強いです。

    ここで言うIEは6と7を指していて、試してないですが恐らく8も同じだと思われます。

    attachEvent

    多くのブラウザがaddEventListenerでイベントを登録するのに対して、IEはattachEventというメソッドを使います。

    但し、DOM Level2を満たしていないので、addEventListenerのように第三引数がなく、キャプチャーフェイズでの実行は不可です。

    また、ここで登録されたイベントハンドラはグローバル関数となり、thisにはwindowオブジェクトが入ります。これがどういう問題を起こすかは後述します。

    イベントオブジェクト

    IEのイベントオブジェクトはwindow.eventで参照出来ます。

    addEventListenerの場合はハンドラにEventオブジェクトが渡されますが、IEはwindow.eventを参照する必要があります。

    イベントは平行して起こらない為、その都度上書きすればいいという考えのようです。

    以下はよくあるクロスブラウザを考慮したイベントハンドラのコードです。

    function handle(event){
        var event = ( event || window.event);
    }
    

    attachEventとthisキーワード

    IEのattachEventを使った場合は、イベントが発生した要素が分からないという問題があります。

    1. IEのattachEventはグローバル関数として登録される(thisはwindowオブジェクトになる)
    2. IEのEventオブジェクトにはcurrentTargetがないので、バブリングで処理中のノードが分からない
    3. DOMレベル0ならバブリング中のノードもthisで取得可能だが、eventオブジェクトから取れない以上、処理中のノードを取得出来ない
    4. 複数のハンドラを使用する場合など、attachEvent(DOMレベル2相当)を使う必要がある時は、クロージャーを使う方法がある。 イベントハンドラから、クロージャーを使って、イベントが発生した要素を参照するという方法
    5. しかし、クロージャーを使うとメモリリークを引き起こす

    上記のような問題があります。

    よくあるメモリリーク対策としては、 ページが閉じられる時に、イベントを解除して、メモリリークを途中で止める という形が多いようです。

    読書会の後に色々調べた所、finalyを使って循環参照を削除する方法もあるようです。
    IE6のメモリリークを華麗に回避 - zorioの日記

    この記事を書いている時に気付いたのですが、IEのメモリリークはマシにはなっているようです。 IEのメモリリークが直ってるっぽい。 - zorioの日記
    やっぱりIEのメモリリークは直ってなかった - zorioの日記

    参考

    • [IE] Javascript で動的にイベントを登録するとメモリリークが発生
    • Internet Explorer リーク パターンを理解して解決する
    • DOM オブジェクトとメモリリーク: Days on the Moon
    • Kanasan.JS Prototype.js CodeReading #6: Days on the Moon

    IE8について

    CSSの標準対応は大分進んだようですが、イベント周りは変更する気があるのかないのか、そのままのようです。

    今回の読書会と直接関係はないですが、IE8については以下もリンク張っておきます。

    • IE8での変化点一覧 + 備忘録 - latest log
    • IE8 の DOM のプロトタイプと Getter/Setter API はどうなるか - IT戦記

    いつも思うのですが、サイ本がIEを解説する時の文章には、悪意が感じられます。

    イベントのまとめ

    表をクリックで拡大出来ます。

    項目 DOM Level0 DOM Level2
    普通のブラウザ IEなブラウザ 普通のブラウザ IEなブラウザ
    thisキーワード 処理されているイベントのHTMLElement windowオブジェクト
    複数のハンドラ 不可 可
    Eventオブジェクト handle(event){ alert(event) } <div onclick="alert(event)"></div> handle(){ alert(window.event) } <div onclick="alert(window.event)"></div> handle(event){ alert(event) } window.event
    ハンドラの割り当て document.body.onclick = hoge; <div onclick="hoge()">click</div> document.body.addEventListener('click', function(){}, false) document.body.attachEvent('onclick', function(){})
    ハンドラの解除 document.body.onclick = null DOM Level0のハンドラを解除した事が無かったのだけど、Firefoxはnullにすると実行されなくなった。 他のブラウザは分からない。 document.body.removeEventListener('click', function(){}, false) document.body.detachEvent('onclick', function(){})
    カレントノードの取得 event.currentTarget(又はthisでも取得出来る) thisで現在処理中のノードを参照出来る event.currentTarget(又はthisでも取得出来る) クロージャーを使う(しかしメモリリークの問題がある)
    ターゲットノードの取得 event.target event.srcElement event.target event.srcElement
    キャプチャーフェイズでの実行 不可 addEventListenerの第三引数をtrueにする事で可能 不可
    バブリングの停止 event.stopPropagation(); event.cancelBubble = true; event.stopPropagation(); event.cancelBubble = true;
    formのサブミットやリンクの遷移をキャンセル <a href="javascript:void(0)">link</a> <form onsubmit="return false;"></form> 又はEventオブジェクトを使う方法もある event.preventDefault(); event.returnValue = true;

    ここまでで、イベント処理の概要が掴めました。個人的にあやふやなまま覚えていたイベント周りの処理が理解出来て良かったです。

    この状態で、2008年5月のid:amachangのエントリを見ると、さらに理解が深まります。

    onclick 属性問題について - IT戦記

    そもそもライブラリのイベント割り当てを使わずに、DOM Level0のonclick属性を書くのは古いよね?という話から始まっていて、

    • DOM Level0のイベントを使う
    • ライブラリでラッピングされた、DOM Level2を使う
    • ライブラリを使わずに、神経質にDOM Level2を使う

    という三択で保守性がどうのという議論みたいになっているのですが、JavaSctiptのイベントを分かっているかどうかで、見る角度が全く変わる記事だと思います。

    一年前に読んだ時と比べて、別のエントリのような感覚がしました。

    当時は先のエントリのコードを見ても何も思わなかったですが、今は少し進歩したようで、

    本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記

    なぜonclickをあまり推奨しないのか

    onclick 属性問題について - IT戦記

    onclick 属性を使わないことによって本質的ではないことをたくさん書かないといけない

    上記に書かれている事が理解できました。

    また、先のid:amachangのエントリのコメント欄から、IEのメモリリークの問題は2007年に修正されたという情報もあります。
    IEのメモリリークが直ってるっぽい。 - zorioの日記
    やっぱりIEのメモリリークは直ってなかった - zorioの日記
    環境がなくて未確認なのですが、nanto_viさんが解説してくれる事に期待。

    イベント周りの結論としては、今回の読書会であったような、色々と面倒な事が多いので、素直にライブラリを使った方がよいですが、 ちょっと書くだけならDOM Level0のonclick="hoge()"みたいに使うのもありだと思います。

    少しのイベント処理を入れる為だけに、重たいライブラリを導入するのはためらいますし、DOM Level0の出番は多いと思います。 DOM Level2が必要になった段階では、ライブラリを導入すればいいかなというのが、個人的な一応の結論です。

    おまけ

    このエントリのテーブルを見やすい大きさで表示しようとすると大きすぎるので、拡大縮小出来るスクリプトをやっつけで作りました。

    もうちょっと綺麗に書けそうですが、現状で公開しておきます。

    以下みたいな感じで使います。

    <script type="text/javascript">
    function zoomTable( min, max ){
        var tables = document.getElementsByTagName('table');
        var target = tables[tables.length-1];
        target.onclick = function(){
            if( this.style.fontSize == min ){
                this.style.fontSize = max;
                if( this.className.search(/\bzoomout\b/) != -1 ){
                    this.className = this.className.replace( /(\b)zoomout(\b)/g, '$1zoomin$2' );
                }else{
                    this.className = this.className + ' zoomin';
                }
            }else{
                this.style.fontSize = min;
                if( this.className.search(/\bzoomin\b/) != -1 ){
                    this.className = this.className.replace( /(\b)zoomin(\b)/g, '$1zoomout$2' );
                }else{
                    this.className = this.className + ' zoomout';
                }
            }
        }
        target.onclick();
    }
    </script>
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
    <script type="text/javascript">
    zoomTable('40%','100%');
    </script>
    

    tableの後にzoomTableという関数を、縮小時のフォントサイズと拡大時のフォントサイズを指定して呼び出します。

    縮小時にはzoominというclassが、拡大時にはzoomoutというclassが定義されるので、適当なスタイルを当てて下さい。

    一部のブラウザしか対応していませんが、私はマウスカーソルが虫眼鏡になるようにしています。 cursor:url()を使って、PNG画像のURLを指定しるのですが、 Firefox、Safari、Google Chromeは対応して、Operaは未対応のようです。IEは.curに変換すればいけそうですが、今回はパス。

    感想

    最後に少し感想を。

    運営側としての反省点は、告知が直前になってしまった事が、特に申し訳なかったと思っています。

    あと毎回気になるのがネットワークです。やはり会場次第かなー、という気がします

    今回はオンラインでも何人か参加頂き、コミュニケーションを取れたがよかったと思います。

    これまではオンラインでの参加者が少なかったので、ustreamとlingrをやっていて良かったと思いました。

    懇親会ではシリコンバレーバレーかぶれの人達から、色々話しを聞いたりと楽しかったです。

    懇親会の会場になった白木屋には、安い居酒屋というイメージしかを持ってなかったのですが、 意外と普通の居酒屋でした。リーズナブルなので、蛍池ではいいかもです。

    そろそろ大阪以外での開催も考えているので、今後ともKanasan.JSを宜しくお願い致します。

    • Kanasan.JS JavaScript第5版読書会#7& 懇親会の告知
    • ページ上部へ戻る
    • Kanasan.JS JSDeferred Code Reading

    Posted at 37to : commetns(1) : trackbacks(0)

  • 同一カテゴリのエントリ

    • サイトをリニューアルした時のメモ
    • Kanasan.JS JSDeferred Code Readingが終了しました
    • JavaScriptでCSSとイベントを扱う from Kanasan.JS
    • Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS)
    • 2008年度のEmacsをまとめたメモ
  • 関連エントリ

    • JavaScriptでイベントをエミュレートする(From Kanasan.JS 読書会#8)
    • Kanasan.JS JSDeferred Code Readingが終了しました
    • Kanasan.JS JSDeferred Code Reading
    • Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS)
    • prototype.jsの内側から覗くJavaScriptの世界(from Kanasan.JS)
  • 関連商品

  • コメント

    Canape cuir 100% Buffle ORCHIDEA d_angle droit
    2014年7月14日 08:14

    Heya are using Wordpress for your site platform?

    I'm new to the blog world but I'm trying to get started and create my own. Do you require any html coding
    expertise to make your own blog? Any help would be greatly appreciated!

  • トラックバック

    本エントリへのトラックバックURL http://blog.37to.net/mt/mt-tb.cgi/115

    トラックバックはありません
  • About

    about

    Name
    37to (minato)
    Job
    Web Developper
    Community

    Kanasan.JS

    関西を中心に活動するJavaScriptの勉強会

    ...more about

    Twitter Updates

      follow me on Twitter
    • Categories

      • Web・コンピュータ(24)
      • お知らせ(1)
      • コンピュータ・ガジェット(3)
      • プログラミング・開発(39)
      • 雑記(12)
    • Tags

      • (X)HTML
      • CSS
      • del.icio.us
      • Firefox
      • JavaScript
      • Kanasan.JS
      • MovableType
      • PHP
      • Python
      • RSS
      • SBM
      • Web
      • はてな
      • イベント
      • オブジェクト指向
      • テンプレート
      • デザイン
      • フォーム
      • 雑記
      • 勉強会
    • Archives

      • 2012年1月(1)
      • 2009年12月(1)
      • 2009年10月(1)
      • 2009年6月(3)
      • 2009年4月(2)
      • 2009年3月(1)
      • 2009年2月(1)
      • 2009年1月(1)
      • 2008年12月(1)
      • 2008年11月(2)

      ...more archives

    • Feeds

      • blog feedBlog.37to.netBlog.37to.netのフィード
      • 37to's reading new feedlivedoor Readerの新着フィード - k_37to
      • 37to's New Bookmark Feeddel.icio.us - 37to's Bookmark Feeds
    • Sorcial Bookmarks

      • livedoor クリップ - k_37tolivedoor クリップ - k_37to
      • はてなブックマーク - k_37toはてなブックマーク - k_37to
    • Copyright © Since 2006-2014 37to
    • Home | blog | labs | about | contact | feed