<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MOVABLE PRESS&#187; MOVABLE PRESSのカテゴリー「JavaScript」内のエントリー</title>
	<atom:link href="http://www.weblaads.info/movablepress/topics/markup-stylesheet/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.weblaads.info/movablepress</link>
	<description>MovableTypeか？WordPressなのか？CMS二元論をSEO、ユーザビィリティなど踏まえつつリサーチしながら、サイト運営に有用な情報を配信。</description>
	<lastBuildDate>Mon, 22 Feb 2010 07:32:37 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Ajaxによるタブメニュー : jQuery idTabs　</title>
		<link>http://www.weblaads.info/movablepress/posts/ajax-jquery-id-tabs/</link>
		<comments>http://www.weblaads.info/movablepress/posts/ajax-jquery-id-tabs/#comments</comments>
		<pubDate>Tue, 21 Oct 2008 04:40:21 +0000</pubDate>
		<dc:creator>Akihiro</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[マークアップとスタイルおよびユーティリティー]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[LEVEL3]]></category>
		<category><![CDATA[PROCESS3]]></category>
		<category><![CDATA[ナビゲーション]]></category>
		<category><![CDATA[横並びナビ]]></category>

		<guid isPermaLink="false">http://www.weblaads.info/movablepress/?p=1354</guid>
		<description><![CDATA[IEはスクリプトに対する融通性が悪いようなので、他のJavaScriptとの絡みからjQuery系の一本化を図り、タブメニューもjQuery idTabsで紹介されているものに変更しました。このページではフェードするタイプのものをサンプルとして取り上げています。]]></description>
			<content:encoded><![CDATA[<p class="pd_10_f">このサイトの上部の黒板風ボードのタブの切り替えに<cite><a href="http://archiva.jp/web/javascript/tab-menu.html">ArchivaさんのJavaScript</a></cite>をずっと使わせていただいていたのですが、このところIEにおいて挙動不審が見うけられた（タブを切り替えるたびにページ内リンク位置に自動スクロールしてしまう）ので<cite><a href="http://www.sunsean.com/idTabs/#t3">jQuery idTabs</a></cite>に変更しました。<span id="more-1354"></span></p>
<div class="main-left">
<h3 class="top-h3">悩ましきIE</h3>
<div class="pd_10">
<p><cite><a href="http://jquery.com/">jQuery</a></cite>系のJavaScriptを選んだのは、</p>
<div class="code-box">
<ul>
<li>jQuery系のJavaScriptを設置してからおかしくなった。</li>
<li>以前もjQuery系とPrototype系とでかみ合わなかった。</li>
</ul>
</div>
<p>などから、どうもIEではjQuery系のJavaScriptを使う場合はjQuery系一本でいかないと具合が悪いのではないかと思われたからです。実際、jQuery系一本にしてみたところ挙動不審が収まったので全くの的外れではないように思われます。</p>
<p>jQueryが悪いのか、それともIEが悪いのか？私は専門家ではないので分かりませんが、<cite><a href="http://mozilla.jp/firefox/">Firefox</a></cite>をはじめとした<cite><a href="http://www.apple.com/jp/safari/download/">Safari</a></cite>、<cite><a href="http://jp.opera.com/download/">Opera</a></cite>などのモダンブラウザや新鋭<cite><a href="http://www.google.co.jp/chrome">Google Chrome</a></cite>などでは問題なくページ表示されていたので、やはりIEのスクリプトに対する融通性が悪いのだと思われます。</div>
<h3>SAMPLE</h3>
<div class="pd_10">
<p><cite><a href="http://www.sunsean.com/idTabs/#t3">jQuery idTabs</a></cite>では色々なヴァリエーションのタブメニューが紹介されています。そのうちの一つ、タブがスクエアでページ部がフェードインするタイプのものをここで取り上げます。</p>
<p>jQuery idTabsのサンプル</p></div>
<h3>HTML</h3>
<div class="pd_10">
<h4 style="margin:0 0 5px 0;padding:3px 10px;border-left:4px solid #444;">HEADセクション内</h4>
<p><em>jquery.idTabs.js</em>のダウンロードページ：<br />
<cite><a href="http://www.sunsean.com/idTabs/#t3">http://www.sunsean.com/idTabs/#t3</a></cite><br />
<em>jquery.js</em>のダウンロードページ：<br />
<cite><a href="http://docs.jquery.com/Downloading_jQuery">http://docs.jquery.com/Downloading_jQuery</a></cite></p>
<div class="code-box">
<pre><code>&lt;script type="text/javascript" src="jquery-1.2.6.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.idTabs.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
<h4 style="margin:10px 0;padding:3px 10px;border-left:4px solid #444;">BODYセクション内</h4>
<div class="code-box" style="overflow: auto; height: 320px; line-height: 1.2;">
<pre><code>&lt;div id="<span class="bg_red">squaretab</span>" class="pack"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#b-1" <span class="bg_red">class="selected"</span>&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#b-2"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#b-3"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#b-4"&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div&gt;
    &lt;p id="b-1"&gt;コンテンツ1&lt;/p&gt;
    &lt;p id="b-2"&gt;コンテンツ2&lt;/p&gt;
    &lt;p id="b-3"&gt;コンテンツ3&lt;/p&gt;
    &lt;p id="b-4"&gt;コンテンツ4&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt; 

&lt;script type="text/javascript"&gt;
  $("#<span class="bg_red">squaretab</span>").idTabs(function(id,list,set){
    $("a",set).removeClass("selected")
    .filter("[@href='"+id+"']",set).addClass("selected");
    for(i in list)
      $(list[i]).hide();
    $(id).fadeIn();
    return false;
  });
&lt;/script&gt;</code></pre>
<address style="text-align:right;">(c)<a href="http://www.sunsean.com/idTabs/#t3">Animation/Advanced/jQuery idTabs</a></p>
</address>
</div>
<p>※起動部分のスクリプトの置き場所はメニューの直下がベターだと思います。</p></div>
<h3>CSS</h3>
<div class="pd_10">
<p>サンプルは以下の通りに設定しています。</p>
<div class="code-box" style="overflow: auto; height: 450px; line-height: 1.2;">
<pre><code>#squaretab {
        width: 460px;
}

#squaretab ul {
        float: left;
        display: block;
        width: 60px;
        height: 60px;
        overflow: hidden;
        list-style: none;
        background: #3399cc;
}

#squaretab ul li {
        float: left;
}

#squaretab ul li a {
        display: block;
        width: 30px;
        height: 30px;
        color: #ffffff;
        text-align: center;
        line-height: 2.2;
        text-decoration: none;
}

#squaretab ul li a:hover {
        color: #336699;
        background: #ffffff;
}

#squaretab ul li a.selected {
        color: #ffffff;
        background: #336699;
}

#squaretab div {
        float: right;
        width: 400px;
        height: 60px;
        color: #ffffff;
        background: #3399cc;
}

#squaretab p {
        padding: 10px 35px;
}

.pack:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

/* Hides from IE-mac \*/
* html .pack {
        height: 1%;
}
/* End hide from IE-mac */

*:first-child+html .pack {
        min-height: 1px;
}</code></pre>
</div>
</div>
</div>

	タグ: <a href="http://www.weblaads.info/movablepress/tags/ajax/" title="Ajax" rel="tag">Ajax</a>, <a href="http://www.weblaads.info/movablepress/tags/javascript/" title="JavaScript" rel="tag">JavaScript</a>, <a href="http://www.weblaads.info/movablepress/tags/level3/" title="LEVEL3" rel="tag">LEVEL3</a>, <a href="http://www.weblaads.info/movablepress/tags/process3/" title="PROCESS3" rel="tag">PROCESS3</a>, <a href="http://www.weblaads.info/movablepress/tags/navigation/" title="ナビゲーション" rel="tag">ナビゲーション</a>, <a href="http://www.weblaads.info/movablepress/tags/%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%83%8a%e3%83%93/" title="横並びナビ" rel="tag">横並びナビ</a><br />

	<h3>関連記事</h3>
	<ul class="st-related-posts">
	<li><a href="http://www.weblaads.info/movablepress/posts/paginate-causes-repetition-of-title-and-description/" title="ページ分割の落とし穴｜タイトルとメタデータ（description）の重複 (2008 年 9 月 25 日)">ページ分割の落とし穴｜タイトルとメタデータ（description）の重複</a> (2)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/horizontal-tab-menu-1-animated/" title="CSSによる横並びのナビゲーション &#8211; セレクトすると飛び上がるタブ (2008 年 9 月 29 日)">CSSによる横並びのナビゲーション &#8211; セレクトすると飛び上がるタブ</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/phong-javascript-game/" title="Phong（Pong） &#8211; JavaScriptのゲーム (2008 年 10 月 5 日)">Phong（Pong） &#8211; JavaScriptのゲーム</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/horizontal-tab-menu-2-no-image-marke/" title="CSSによる横並びのナビゲーション &#8211; 画像を使わずに現在位置をマークする (2008 年 10 月 6 日)">CSSによる横並びのナビゲーション &#8211; 画像を使わずに現在位置をマークする</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/gajax-rss-pausing-scroller/" title="AjaxによるスクロールするRSS更新情報のスクリプト (2008 年 10 月 10 日)">AjaxによるスクロールするRSS更新情報のスクリプト</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/test-standard-conforming-level-of-browsers-with-acid2-and-acid3/" title="Acid2とAcid3でブラウザ（特にIE）の標準準拠度をチェックする (2008 年 10 月 23 日)">Acid2とAcid3でブラウザ（特にIE）の標準準拠度をチェックする</a> (1)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.weblaads.info/movablepress/posts/ajax-jquery-id-tabs/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>AjaxによるスクロールするRSS更新情報のスクリプト</title>
		<link>http://www.weblaads.info/movablepress/posts/gajax-rss-pausing-scroller/</link>
		<comments>http://www.weblaads.info/movablepress/posts/gajax-rss-pausing-scroller/#comments</comments>
		<pubDate>Thu, 09 Oct 2008 19:06:14 +0000</pubDate>
		<dc:creator>Akihiro</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[マークアップとスタイルおよびユーティリティー]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[LEVEL3]]></category>
		<category><![CDATA[PROCESS3]]></category>
		<category><![CDATA[RSS]]></category>

		<guid isPermaLink="false">http://www.weblaads.info/movablepress/?p=1107</guid>
		<description><![CDATA[AjaxによってスクロールするRSS更新情報のスクリプトgAjax RSS Pausing Scrollerを設置してみました。GoogleのAPI keyを使ってGoogleのAJAX Feed APIを利用します。ヘッドセクションにJavaScriptのコードを設置したら、スクリプトコードをHTML上の任意の場所に記述し、スクリプトコード内で指定したidとclassを使ってCSSでスタイリングします。]]></description>
			<content:encoded><![CDATA[<p class="pd_10_f"><span class="label_ora">[PROCESS3][LEVEL3]</span><cite><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></cite>さんで公開されているAjaxによってRSS更新情報をスクロールさせるスクリプト<cite><a href="http://www.dynamicdrive.com/dynamicindex18/gajaxpausescroller.htm">gAjax RSS Pausing Scroller</a></cite>をホームページとカテゴリーページに設置してみました。<span id="more-1107"></span></p>
<div class="main-left">
<h3 class="top-h3">SAMPLE</h3>
<div class="pd_10">
<p>下のサンプルは<cite><a href="http://jp.reuters.com/">ロイター</a></cite>のジャンルごとのニュース更新情報を表示しています。ニュースに限らず、サイトをCMSとして利用する場合など、ユーザー情報の表示（おそらくできると思うのですが・・・）に便利なスクリプトだと思われます。</p>
</div>
<p><iframe src="http://www.weblaads.info/movablepress/sample/gajaxscroller-sample.html" title="gAJAX RSS PAUSING SCROLLERのサンプル" style="width:475px; height:800px;border:0;margin:0 0 0 10px;">gAJAX RSS PAUSING SCROLLERのロイターのニュース速報を用いたサンプル</iframe></p>
<h3>ヘッド情報 &#8211; Google のAPI keyが必要</h3>
<div class="pd_10">
<p>ページのヘッドセクションに挿入するコードは3つです。そのうちの一つはGoogleのAJAX Feed APIを利用します。GoogleのAJAX Feed APIを利用するためには<cite><a href="http://code.google.com/apis/ajaxfeeds/signup.html">GoogleのAPI key</a></cite>が必要です（API keyはドメイン毎に取得しなければいけません）。API keyを含んだURIにてAJAX Feed APIを呼び出すことになります。</p>
<p>残りの二つのJavaScriptであるgfeedfetcher.jsとgajaxscroller.jsは<cite><a href="http://www.dynamicdrive.com/dynamicindex18/gajaxpausescroller.htm">gAjax RSS Pausing Scroller</a></cite>のStep2にてindicator.gifとともにダウンロードできるようになっています。尚、著作権表示を要求されているので注意が必要です。</p>
</div>
<h3>HTMLとCSS</h3>
<div class="pd_10">
<p>下のスクリプトコードをHTML上の表示したい場所に記述します。コード内の1行目でidとclassを指定することによりCSSでのスタイリングが可能となります。</p>
<div class="code-box" style="line-height:1.4;">
<pre><code>&lt;script type="text/javascript"&gt;

var newsfeed=new gfeedpausescroller("<span class="bg_red">rss-roll-4</span>", "<span class="bg_red">rss-roll-4class</span>", <span class="bg_red">8000</span>, "<span class="bg_red">_new</span>")
newsfeed.addFeed("<span class="bg_red">テクノロジー</span>", "<span class="bg_red">http://feeds.reuters.com/reuters/JPTechnologyNews</span>")
newsfeed.addFeed("<span class="bg_red">マーケット</span>", "<span class="bg_red">http://feeds.reuters.com/reuters/JPMarketNews</span>")
newsfeed.addFeed("<span class="bg_red">ビジネス</span>", "<span class="bg_red">http://feeds.reuters.com/reuters/JPBusinessNews</span>")
newsfeed.displayoptions("<span class="bg_red">datetime snippet</span>")
newsfeed.setentrycontainer("<span class="bg_red">p</span>")
newsfeed.filterfeed( <span class="bg_red">15</span>, "<span class="bg_red">label</span>")
newsfeed.entries_per_page(<span class="bg_red">3</span>)
newsfeed.init() 

&lt;/script&gt;</code></pre>
<address style="text-align:right;">
<p> (c) Dynamic Drive (www.dynamicdrive.com)</p>
</address>
</div>
<p>上記のスクリプト中の赤字の部分が設定値になります。パラメーターの設定内容は以下の通りです。</p>
<div class="code-box">
<ul style="padding-left:0;">
<li>
<dl>
<dt><span class="bg_red">1行目</span></dt>
<dd>id名、class名、ポーズ（ミリ秒）、リンクターゲット。</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="bg_red">2行目～4行目</span></dt>
<dd>表示するラベル名、フィードURI</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="bg_red">5行目</span></dt>
<dd>使用できるパラメータ「date（日）」「time（時間）」「datetime（日時）」「label（ラベル名）」「snippet（記述の冒頭部分）」「description（概要）」の選択と表示順の指定</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="bg_red">6行目</span></dt>
<dd>タグ名&lt;p&gt;&lt;li&gt;の指定。エントリーをリスト表示するのか、段落表示するのか選択できます。初期値は&lt;div&gt;</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="bg_red">7行目</span></dt>
<dd>表示エントリー総数、表示配分の仕方。複数のフィードの場合、配分されます。配分のパラメーターは「date」「label」「title」です（初期値は「date」）</dd>
</dl>
</li>
<li>
<dl>
<dt><span class="bg_red">8行目</span></dt>
<dd>ワンポーズに表示するエントリー数。初期値は1。</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>

	タグ: <a href="http://www.weblaads.info/movablepress/tags/ajax/" title="Ajax" rel="tag">Ajax</a>, <a href="http://www.weblaads.info/movablepress/tags/google/" title="Google" rel="tag">Google</a>, <a href="http://www.weblaads.info/movablepress/tags/level3/" title="LEVEL3" rel="tag">LEVEL3</a>, <a href="http://www.weblaads.info/movablepress/tags/process3/" title="PROCESS3" rel="tag">PROCESS3</a>, <a href="http://www.weblaads.info/movablepress/tags/rss/" title="RSS" rel="tag">RSS</a><br />

	<h3>関連記事</h3>
	<ul class="st-related-posts">
	<li><a href="http://www.weblaads.info/movablepress/posts/submit-robot-type-search-engine-webmaster-tools/" title="ロボット型検索エンジンとウェブマスターツールにサイト登録 (2008 年 9 月 6 日)">ロボット型検索エンジンとウェブマスターツールにサイト登録</a> (4)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/paginate-causes-repetition-of-title-and-description/" title="ページ分割の落とし穴｜タイトルとメタデータ（description）の重複 (2008 年 9 月 25 日)">ページ分割の落とし穴｜タイトルとメタデータ（description）の重複</a> (2)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/first-google-android-g1/" title="Google Android搭載携帯端末 No.1｜アメリカT-Mobile社「G1」 (2008 年 9 月 27 日)">Google Android搭載携帯端末 No.1｜アメリカT-Mobile社「G1」</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/google-webmaster-tools-for-404notfound/" title="Googleウェブマスターツールの404 Not Foundページ用ガジェット (2008 年 10 月 1 日)">Googleウェブマスターツールの404 Not Foundページ用ガジェット</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/tic-tac-toe-javascript-game/" title="Tic Tac Toe &#8211; JavaScriptのゲーム (2008 年 10 月 3 日)">Tic Tac Toe &#8211; JavaScriptのゲーム</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/horizontal-tab-menu-2-no-image-marke/" title="CSSによる横並びのナビゲーション &#8211; 画像を使わずに現在位置をマークする (2008 年 10 月 6 日)">CSSによる横並びのナビゲーション &#8211; 画像を使わずに現在位置をマークする</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/text-ads-in-google-maps/" title="Google Mapsの下部にテキスト広告が表示されることとは (2008 年 10 月 15 日)">Google Mapsの下部にテキスト広告が表示されることとは</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/ajax-jquery-id-tabs/" title="Ajaxによるタブメニュー : jQuery idTabs　 (2008 年 10 月 21 日)">Ajaxによるタブメニュー : jQuery idTabs　</a> (1)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/test-standard-conforming-level-of-browsers-with-acid2-and-acid3/" title="Acid2とAcid3でブラウザ（特にIE）の標準準拠度をチェックする (2008 年 10 月 23 日)">Acid2とAcid3でブラウザ（特にIE）の標準準拠度をチェックする</a> (1)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.weblaads.info/movablepress/posts/gajax-rss-pausing-scroller/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Phong（Pong） &#8211; JavaScriptのゲーム</title>
		<link>http://www.weblaads.info/movablepress/posts/phong-javascript-game/</link>
		<comments>http://www.weblaads.info/movablepress/posts/phong-javascript-game/#comments</comments>
		<pubDate>Sun, 05 Oct 2008 14:45:27 +0000</pubDate>
		<dc:creator>Akihiro</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[マークアップとスタイルおよびユーティリティー]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[GAME]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://www.weblaads.info/movablepress/?p=944</guid>
		<description><![CDATA[JavaScriptと対戦できるゲームPhong（Pong）です。ゲームの要素であるコートやラケットやボールはHTMLとCSSで表現され、ボールとラケットおよびスコア表はJavaScriptにより制御されています。]]></description>
			<content:encoded><![CDATA[<p class="pd_10_f"><span class="label_ora">[GAME][JavaScript]</span>JavaScriptと対戦できるゲーム<strong>Phong</strong>です。<cite><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></cite>さんで公開されている<cite><a href="http://www.dynamicdrive.com/dynamicindex12/phong2.htm">Phong2</a></cite>を設置してみました。<br />
<span id="more-944"></span></p>
<div class="main-left">
<h3 class="top-h3">GAME</h3>
<div class="pd_10">
<p>Phongという名で紹介されていますが、1972年に発表された<cite><a href="http://www.pong-story.com/atpong1.htm">Atari社のpong（ポン）</a></cite>をもじったものだと思われます。非常にレトロなゲームなのですが、編集中にもかかわらずやりすぎてしまって随分と時間を浪費してしまいました（汗）コート上でクリックするとスタートします。かなりのレスポンスが必要なのでレトロなゲームであるからといってなかなか侮れません。ラケットはフレーム上でマウスを上下に動かすことによって操作します。</p>
<div class="cent">
<iframe src="http://www.weblaads.info/movablepress/phong.htm" title="phong game" style="width: 450px; height: 355px">phong game</iframe>
</div>
</div>
<h3>ゲームボードはHTMLとCSSで表現されている</h3>
<div class="pd_10">
<p>興味深いのは、ゲームの要素であるコートやラケットやボールがHTMLとCSSでできていることです（DHTMLだから当たり前なのですが）。&lt;div&gt;タグにIDを付けてposition:absolute;にしているところがなるほどと思わせます。これはマリオのHTMLゲーム版が実現する日も近いのかもしれません。以下は私がCSSのセレクタ上で色を変えてみたものです（プレーヤー側のラケットのサイズも5px伸ばしています）。</p>
<div class="cent">
<iframe src="http://www.weblaads.info/movablepress/phong2.htm" title="phong game2" style="width: 450px; height: 355px">phong game2</iframe>
</div>
</div>
<h3>関連サイト？</h3>
<div class="pd_10">
<p>以下はレトロゲームを人によって表現されたものです。この出演者さんたちは最後のクレジットでPIXELS（ピクセル）と紹介されています。<br />
<cite class="check"><a href="http://www.notsonoisy.com/">www.notsonoisy.com</a></cite></p>
<div class="video">
<p><strong>PONG / GAME OVER PROJECT</strong></p>
<div style="margin-bottom:15px;"><object data="http://www.youtube.com/v/sWY0Q_lMFfw&#038;hl=ja&#038;fs=1" type="application/x-shockwave-flash" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/sWY0Q_lMFfw&#038;hl=ja&#038;fs=1" /><param name="allowFullScreen" value="true" />PONG / GAME OVER PROJECT</object></div>
<p><strong>TETRIS / GAME OVER PROJECT</strong></p>
<div style="margin-bottom:15px;"><object data="http://www.youtube.com/v/G0LtUX_6IXY&#038;hl=ja&#038;fs=1" type="application/x-shockwave-flash" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/G0LtUX_6IXY&#038;hl=ja&#038;fs=1" /><param name="allowFullScreen" value="true" />TETRIS / GAME OVER PROJECT</object></div>
<p><strong>SPACE INVADERS / GAME OVER PROJECT</strong></p>
<div style="margin-bottom:15px;"><object data="http://www.youtube.com/v/VczbbiRmDik&#038;hl=ja&#038;fs=1" type="application/x-shockwave-flash" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/VczbbiRmDik&#038;hl=ja&#038;fs=1" /><param name="allowFullScreen" value="true" />SPACE INVADERS / GAME OVER PROJECT</object></div>
<p><strong>POLE POSITION / GAME OVER PROJECT</strong></p>
<div style="margin-bottom:15px;"><object data="http://www.youtube.com/v/ywqu_8RIDvU&#038;hl=ja&#038;fs=1" type="application/x-shockwave-flash" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ywqu_8RIDvU&#038;hl=ja&#038;fs=1" /><param name="allowFullScreen" value="true" />POLE POSITION / GAME OVER PROJECT</object></div>
</div>
</div>
</div>

	タグ: <a href="http://www.weblaads.info/movablepress/tags/css/" title="CSS" rel="tag">CSS</a>, <a href="http://www.weblaads.info/movablepress/tags/game/" title="GAME" rel="tag">GAME</a>, <a href="http://www.weblaads.info/movablepress/tags/html/" title="HTML" rel="tag">HTML</a>, <a href="http://www.weblaads.info/movablepress/tags/javascript/" title="JavaScript" rel="tag">JavaScript</a><br />

	<h3>関連記事</h3>
	<ul class="st-related-posts">
	<li><a href="http://www.weblaads.info/movablepress/posts/w3c-tools-validator-html/" title="W3Cの評価ツールでHTMLがValidであるかをチェックする (2008 年 9 月 10 日)">W3Cの評価ツールでHTMLがValidであるかをチェックする</a> (3)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/w3c-tools-validator-css/" title="W3Cの評価ツールでCSSがValidであるかをチェックする (2008 年 9 月 15 日)">W3Cの評価ツールでCSSがValidであるかをチェックする</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/fed-chairman-game-macro-economics/" title="FRB議長ゲーム &#8211; マクロ経済学入門として (2008 年 9 月 21 日)">FRB議長ゲーム &#8211; マクロ経済学入門として</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/tic-tac-toe-javascript-game/" title="Tic Tac Toe &#8211; JavaScriptのゲーム (2008 年 10 月 3 日)">Tic Tac Toe &#8211; JavaScriptのゲーム</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/ajax-jquery-id-tabs/" title="Ajaxによるタブメニュー : jQuery idTabs　 (2008 年 10 月 21 日)">Ajaxによるタブメニュー : jQuery idTabs　</a> (1)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/test-standard-conforming-level-of-browsers-with-acid2-and-acid3/" title="Acid2とAcid3でブラウザ（特にIE）の標準準拠度をチェックする (2008 年 10 月 23 日)">Acid2とAcid3でブラウザ（特にIE）の標準準拠度をチェックする</a> (1)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.weblaads.info/movablepress/posts/phong-javascript-game/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tic Tac Toe &#8211; JavaScriptのゲーム</title>
		<link>http://www.weblaads.info/movablepress/posts/tic-tac-toe-javascript-game/</link>
		<comments>http://www.weblaads.info/movablepress/posts/tic-tac-toe-javascript-game/#comments</comments>
		<pubDate>Fri, 03 Oct 2008 07:56:48 +0000</pubDate>
		<dc:creator>Akihiro</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[マークアップとスタイルおよびユーティリティー]]></category>
		<category><![CDATA[GAME]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Valid]]></category>

		<guid isPermaLink="false">http://www.weblaads.info/movablepress/?p=798</guid>
		<description><![CDATA[Dynamic Driveで公開されているJavaScriptで作動するゲームTic Tac Toeを日本語に直してみました。Tic Tac ToeがらみでGoogleデスクトップ用ガジェットやアメリカの教育サイトも取り上げています。]]></description>
			<content:encoded><![CDATA[<p class="pd_10_f"><span class="label_ora">[GAME][JavaScript]</span>JavaScriptと対戦できるゲーム<strong>Tic Tac Toe（チック・タック・トゥー）</strong>です。<cite><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></cite>さんで<cite><a href="http://www.dynamicdrive.com/dynamicindex12/tictactoe.htm">公開されているもの</a></cite>をおおよそ日本語に直してみました。<span id="more-798"></span></p>
<div class="main-left">
<h3 class="top-h3">GAME</h3>
<div class="pd_10">
<p>Tic Tac Toe（チックタックトゥー）とは、日本では「三目並べ」とか「OXゲーム」などと呼ばれているおなじみのゲームです。まずはプレーヤーが先行。マスのうちどれか一つをクリックするとゲームが始まります。スコア表の下のボックスでレベルを選択することができます。</p>
<div class="tictac">
<table class="tictactoe" summary="Game - Tic Tac Toe">
<caption>Game Board</caption>
<tr>
<td><a href="javascript:setbutton(11)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc11" name="rc11" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
<td><a href="javascript:setbutton(12)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc12" name="rc12" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
<td><a href="javascript:setbutton(13)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc13" name="rc13" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
</tr>
<tr>
<td><a href="javascript:setbutton(21)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc21" name="rc21" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
<td><a href="javascript:setbutton(22)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc22" name="rc22" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
<td><a href="javascript:setbutton(23)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc23" name="rc23" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
</tr>
<tr>
<td><a href="javascript:setbutton(31)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc31" name="rc31" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
<td><a href="javascript:setbutton(32)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc32" name="rc32" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
<td ><a href="javascript:setbutton(33)"><img alt="spacer" src="http://www.weblaads.info/movablepress/nothing.gif" id="rc33" name="rc33" width="55" height="55" title="Tic Tac Toe   JavaScriptのゲーム" /></a></td>
</tr>
</table>
</div>
<form id="scores" name="scores" action="tictactoe.js">
<textarea id="score2" name="scores2" cols="100" rows="6" ></textarea>
<div class="code-box" style="padding-left:20px;">
<p>※レベルを設定してください。</p>
<p>
<input type="radio" name="level" onclick="setlevel(0)" /><span class="label_ora"> level 0</span> &#8212; コンピュータは全く鈍くさいです。</p>
<p>
<input type="radio" name="level" onclick="setlevel(1)" checked="checked" /><span class="label_ora"> level 1</span> &#8212; コンピューターは賢いです。</p>
<p>
<input type="radio" name="level" onclick="setlevel(2)" /><span class="label_ora"> level 2</span> &#8212; 先攻の時だけあなたは勝てるかもしれません</p>
<p>
<input type="radio" name="level" onclick="setlevel(3)" /><span class="label_ora"> level 3</span> &#8212; コンピューターは決して負けません。</p>
</div>
</form>
<p><small>※ここでは&lt;table&gt;タグを使って3&#215;3のマスを表現しています。Dynamic Driveさんで公開されているものをそのまま使うとHTMLがValidにならないので、CSSも用いて若干コードを修正しています。またスクリプトは切り離して別ファイル化し、WordPressのプラグインHeadSpace2を使ってこのポストの時だけ呼び出すように設定しています。</small></p>
</div>
<h3>Tic Tac Toe（チック・タック・トゥー）の不敗法</h3>
<div class="pd_10">
<p>「コンピューターは決して負けません」とある通り、すでに不敗法が成立しているゲームです。プレイしているうちにその不敗法もお気づきになられると思います。ここでそれを明かしてはゲームがつまらなくなってしまいますので、どうしても知りたい方は下のリンクを踏んでみてください。</p>
<dl class="wrap">
<dt class="shot"><a href="http://2.csx.jp/~3ji-shiki/karegame/tic-tac-toe.html"><img alt="三目並べの不敗法" width="64" height="64" src="http://mozshot.nemui.org/shot?http://2.csx.jp/~3ji-shiki/karegame/tic-tac-toe.html" title="三目並べの不敗法/枯れたゲームの必勝法" /></a></dt>
<dd class="dd-right"><cite><a href="http://2.csx.jp/~3ji-shiki/karegame/tic-tac-toe.html">三目並べの不敗法/枯れたゲームの必勝法</a></cite></dd>
</dl>
</div>
<h3>Tic Tac Toeがらみのその他諸々</h3>
<div class="pd_10">
<p>先日、<a href="http://jp.youtube.com/results?search_query=Robert+De+Niro+Falling+in+Love&#038;search_type=&#038;aq=f">ロバート・デ・ニーロとメリル・ストリープ主演の映画『恋におちて（Falling in Love）』</a>を観たのですが、その中でロバート・デ・ニーロ扮する主人公がゲーム・センターでこのTic Tac Toeをやっているシーンがありました。1984年作なので映画の中のゲーム機も当然古いのですが、電光でOXが表示されるまではまだ理解できるとしても、その対戦相手がコンピューターではなくニワトリだったことにはかなり驚かせられたものです。</p>
<ul>
<li>
<dl class="wrap">
<dt class="shot"><a href="http://desktop.google.com/plugins/i/tictactoe.html?hl=ja"><img alt="Googleデスクトップ用ガジェット - Tic Tac Toe" width="64" height="64" src="http://mozshot.nemui.org/shot?http://desktop.google.com/plugins/i/tictactoe.html?hl=ja" title="Googleデスクトップ用ガジェット - Tic Tac Toe" /></a></dt>
<dd class="dd-right"><cite><a href="http://desktop.google.com/plugins/i/tictactoe.html?hl=ja">Googleガジェット &#8211; Tic Tac Toe</a></cite></dd>
</dl>
</li>
<li>
<dl class="wrap">
<dt class="shot"><a href="http://www.funbrain.com/tictactoe/index.html"><img alt=" Tic Tac Toe   JavaScriptのゲーム" width="64" height="64" src="http://mozshot.nemui.org/shot?http://www.funbrain.com/tictactoe/index.html" title="アメリカの児童教育用サイトfunbrain.comのTic Tac Toe Squares" /></a></dt>
<dd class="dd-right">アメリカの児童教育用サイトです。<br /><cite><a href="http://www.funbrain.com/tictactoe/index.html">FunBrain.com &#8211; Tic Tac Toe Squares</a></cite></dd>
</dl>
</li>
<li>
<a href="http://www.funbrain.com/"><img src="http://www.funbrain.com/fb.gif" width="468" height="60" alt="Funbrain.com" title="Funbrain.comのホームページ" /></a></li>
</ul>
</div>
</div>

	タグ: <a href="http://www.weblaads.info/movablepress/tags/game/" title="GAME" rel="tag">GAME</a>, <a href="http://www.weblaads.info/movablepress/tags/google/" title="Google" rel="tag">Google</a>, <a href="http://www.weblaads.info/movablepress/tags/valid/" title="Valid" rel="tag">Valid</a><br />

	<h3>関連記事</h3>
	<ul class="st-related-posts">
	<li><a href="http://www.weblaads.info/movablepress/posts/submit-robot-type-search-engine-webmaster-tools/" title="ロボット型検索エンジンとウェブマスターツールにサイト登録 (2008 年 9 月 6 日)">ロボット型検索エンジンとウェブマスターツールにサイト登録</a> (4)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/w3c-tools-validator-html/" title="W3Cの評価ツールでHTMLがValidであるかをチェックする (2008 年 9 月 10 日)">W3Cの評価ツールでHTMLがValidであるかをチェックする</a> (3)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/w3c-tools-validator-css/" title="W3Cの評価ツールでCSSがValidであるかをチェックする (2008 年 9 月 15 日)">W3Cの評価ツールでCSSがValidであるかをチェックする</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/fed-chairman-game-macro-economics/" title="FRB議長ゲーム &#8211; マクロ経済学入門として (2008 年 9 月 21 日)">FRB議長ゲーム &#8211; マクロ経済学入門として</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/paginate-causes-repetition-of-title-and-description/" title="ページ分割の落とし穴｜タイトルとメタデータ（description）の重複 (2008 年 9 月 25 日)">ページ分割の落とし穴｜タイトルとメタデータ（description）の重複</a> (2)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/first-google-android-g1/" title="Google Android搭載携帯端末 No.1｜アメリカT-Mobile社「G1」 (2008 年 9 月 27 日)">Google Android搭載携帯端末 No.1｜アメリカT-Mobile社「G1」</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/google-webmaster-tools-for-404notfound/" title="Googleウェブマスターツールの404 Not Foundページ用ガジェット (2008 年 10 月 1 日)">Googleウェブマスターツールの404 Not Foundページ用ガジェット</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/phong-javascript-game/" title="Phong（Pong） &#8211; JavaScriptのゲーム (2008 年 10 月 5 日)">Phong（Pong） &#8211; JavaScriptのゲーム</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/gajax-rss-pausing-scroller/" title="AjaxによるスクロールするRSS更新情報のスクリプト (2008 年 10 月 10 日)">AjaxによるスクロールするRSS更新情報のスクリプト</a> (0)</li>
	<li><a href="http://www.weblaads.info/movablepress/posts/text-ads-in-google-maps/" title="Google Mapsの下部にテキスト広告が表示されることとは (2008 年 10 月 15 日)">Google Mapsの下部にテキスト広告が表示されることとは</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.weblaads.info/movablepress/posts/tic-tac-toe-javascript-game/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
