https://b.hatena.ne.jp/michael26/javascript/ javascriptに関するmichael26のはてなブックマーク (10) https://codesandbox.io/ michael26 2018-07-16T08:43:01Z javascript React editor playground <blockquote cite="https://codesandbox.io/" title="CodeSandbox: Instant Cloud Development Environments"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcodesandbox.io%2F" alt="" /> <a href="https://codesandbox.io/">CodeSandbox: Instant Cloud Development Environments</a></cite><p><a href="https://codesandbox.io/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7f549ad86fbad8b8ec1f936f2ef2f9b4da2abcc2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcodesandbox.io%2Fnew%2Fimages%2Fog.jpg" alt="CodeSandbox: Instant Cloud Development Environments" title="CodeSandbox: Instant Cloud Development Environments" class="entry-image" /></a></p><p>New CodeSandbox is now part of Together AI! We have joined forces to launch CodeSandbox SDK and bring code interpretation to generative AI.</p><p><a href="https://b.hatena.ne.jp/entry/s/codesandbox.io/"><img src="https://b.hatena.ne.jp/entry/image/https://codesandbox.io/" alt="はてなブックマーク - CodeSandbox: Instant Cloud Development Environments" title="はてなブックマーク - CodeSandbox: Instant Cloud Development Environments" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/codesandbox.io/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 168 https://qiita.com/yasumodev/items/d339a875b4b9bf65d156 michael26 2016-04-02T08:55:46Z javascript クロスドメイン <blockquote cite="https://qiita.com/yasumodev/items/d339a875b4b9bf65d156" title="[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fyasumodev%2Fitems%2Fd339a875b4b9bf65d156" alt="" /> <a href="https://qiita.com/yasumodev/items/d339a875b4b9bf65d156">[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita</a></cite><p><a href="https://qiita.com/yasumodev/items/d339a875b4b9bf65d156"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/973415e774e1b531cb950d8365e95192a1945c35/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzY3NTElMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODcxODc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTQwYTAyZmUxMjdjZDdhMzVmZmZjOGNmOWVjNmE0ZWQy%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D8abd7a3cc773c860cf68b0379e881e07%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMHBvc3RNZXNzYWdlJUUzJTgxJUE3JUUzJTgyJUFGJUUzJTgzJUFEJUUzJTgyJUI5JUUzJTgzJTg5JUUzJTgzJUExJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgzJUExJUUzJTgzJTgzJUUzJTgyJUJCJUUzJTgzJUJDJUUzJTgyJUI4JUU5JTgwJTlBJUU0JUJGJUExJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YjM4OTVjM2I2NjVhYTRkZWExNzZkMTk4NmEyYTE3Zjk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YXN1bW9kZXYmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01MGJiMTA5NzhjNmVmMGUzMDhjZDk3M2Y2YWI4MGVjNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc1affb10afc5f4ff5b36f83f13722754" alt="[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita" title="[JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita" class="entry-image" /></a></p><p>原則、JavaScriptでは異なるドメイン間のAjax通信はできません。つまり、自サイトから他サイトのデータを取得することはできません。 HTML5では、異なるドメイン間でも安全にデータをやり取りできるよう、postMessage が用意されました。（両ドメインのサイトが postMessage を実装している必要があります） コード例 基...</p><p><a href="https://b.hatena.ne.jp/entry/s/qiita.com/yasumodev/items/d339a875b4b9bf65d156"><img src="https://b.hatena.ne.jp/entry/image/https://qiita.com/yasumodev/items/d339a875b4b9bf65d156" alt="はてなブックマーク - [JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita" title="はてなブックマーク - [JavaScript] postMessageでクロスドメインメッセージ通信 - Qiita" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/qiita.com/yasumodev/items/d339a875b4b9bf65d156"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 23 https://atskimura.hatenablog.com/entry/2014/02/18/215538 michael26 2014-02-19T10:26:19Z pjax javascript 高速化 <blockquote cite="https://atskimura.hatenablog.com/entry/2014/02/18/215538" title="2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fatskimura.hatenablog.com%2Fentry%2F2014%2F02%2F18%2F215538" alt="" /> <a href="https://atskimura.hatenablog.com/entry/2014/02/18/215538">2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo</a></cite><p><a href="https://atskimura.hatenablog.com/entry/2014/02/18/215538"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ad830e655184d441682795a27fac115a33aa0c2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F1fce5ba11a2adf8e9abe6673d7d92edcd37aaf88%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fa%252Fa_kimura%252F20140218%252F20140218211442.jpg" alt="2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo" title="2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo" class="entry-image" /></a></p><p>Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際...</p><p><a href="https://b.hatena.ne.jp/entry/s/atskimura.hatenablog.com/entry/2014/02/18/215538"><img src="https://b.hatena.ne.jp/entry/image/https://atskimura.hatenablog.com/entry/2014/02/18/215538" alt="はてなブックマーク - 2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo" title="はてなブックマーク - 2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/atskimura.hatenablog.com/entry/2014/02/18/215538"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 850 http://1000ch.net/2013/08/01/FrontendCodingEnvironment/ michael26 2013-08-02T03:48:12Z html javascript ツール コーディング <blockquote cite="http://1000ch.net/2013/08/01/FrontendCodingEnvironment/" title="一歩進んだHTML/CSS/JSを目指すために | 1000ch.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2F1000ch.net%2F2013%2F08%2F01%2FFrontendCodingEnvironment%2F" alt="" /> <a href="http://1000ch.net/2013/08/01/FrontendCodingEnvironment/">一歩進んだHTML/CSS/JSを目指すために | 1000ch.net</a></cite><p><a href="http://1000ch.net/2013/08/01/FrontendCodingEnvironment/"><img src="" alt="一歩進んだHTML/CSS/JSを目指すために | 1000ch.net" title="一歩進んだHTML/CSS/JSを目指すために | 1000ch.net" class="entry-image" /></a></p><p>2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘...</p><p><a href="https://b.hatena.ne.jp/entry/1000ch.net/2013/08/01/FrontendCodingEnvironment/"><img src="https://b.hatena.ne.jp/entry/image/http://1000ch.net/2013/08/01/FrontendCodingEnvironment/" alt="はてなブックマーク - 一歩進んだHTML/CSS/JSを目指すために | 1000ch.net" title="はてなブックマーク - 一歩進んだHTML/CSS/JSを目指すために | 1000ch.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/1000ch.net/2013/08/01/FrontendCodingEnvironment/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 292 https://www.100shiki.com/archives/2013/04/js_dares.html michael26 2013-04-22T01:44:05Z プログラム javascript 勉強 <blockquote cite="https://www.100shiki.com/archives/2013/04/js_dares.html" title="簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.100shiki.com%2Farchives%2F2013%2F04%2Fjs_dares.html" alt="" /> <a href="https://www.100shiki.com/archives/2013/04/js_dares.html">簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI</a></cite><p><a href="https://www.100shiki.com/archives/2013/04/js_dares.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a3dc8fe4851f97f1f4820f0b264d332df149c4e4/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fwww.100shiki.com%2Fdocs%2F201304%2F21_logo.gif" alt="簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI" title="簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI" class="entry-image" /></a></p><p>学習サイトとして良さそうだったのでご紹介。 JS Daresでは、簡単なゲーム作りを通してJavaScriptを学ぶことができる。 最初は戦車を動かすプログラムからはじめて、少しずつ、自分のペースでレベルアップしていくことができるようだ。 すべてブラウザ上で完結するので環境を用意する手間もいらない。そろそろプログラミ...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.100shiki.com/archives/2013/04/js_dares.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.100shiki.com/archives/2013/04/js_dares.html" alt="はてなブックマーク - 簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI" title="はてなブックマーク - 簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.100shiki.com/archives/2013/04/js_dares.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 398 https://forest.watch.impress.co.jp/docs/news/595970.html michael26 2013-04-15T15:26:22Z web アプリ javascript html css エディタ <blockquote cite="https://forest.watch.impress.co.jp/docs/news/595970.html" title="オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fforest.watch.impress.co.jp%2Fdocs%2Fnews%2F595970.html" alt="" /> <a href="https://forest.watch.impress.co.jp/docs/news/595970.html">オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開</a></cite><p><a href="https://forest.watch.impress.co.jp/docs/news/595970.html"><img src="" alt="オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開" title="オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/forest.watch.impress.co.jp/docs/news/595970.html"><img src="https://b.hatena.ne.jp/entry/image/https://forest.watch.impress.co.jp/docs/news/595970.html" alt="はてなブックマーク - オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開" title="はてなブックマーク - オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/forest.watch.impress.co.jp/docs/news/595970.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 222 https://blog.willnet.in/entry/2013/03/03/215955 michael26 2013-03-04T05:12:12Z dom javascript <blockquote cite="https://blog.willnet.in/entry/2013/03/03/215955" title="js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.willnet.in%2Fentry%2F2013%2F03%2F03%2F215955" alt="" /> <a href="https://blog.willnet.in/entry/2013/03/03/215955">js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記</a></cite><p><a href="https://blog.willnet.in/entry/2013/03/03/215955"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ae9f77e1ffcf3fe9b166a70f37680db3836d942c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F8454420450098689314%2F8454420450098699480%2F1435074222" alt="js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記" title="js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記" class="entry-image" /></a></p><p>js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば&lt;input type=&quot;button&quot; class=&quot;update&quot; value=&quot;更新&quot; /&gt;のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $(&#39;.update&#39;).on(&#39;cli...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.willnet.in/entry/2013/03/03/215955"><img src="https://b.hatena.ne.jp/entry/image/https://blog.willnet.in/entry/2013/03/03/215955" alt="はてなブックマーク - js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記" title="はてなブックマーク - js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.willnet.in/entry/2013/03/03/215955"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 229 https://coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html michael26 2012-12-05T07:37:52Z javascript html <blockquote cite="https://coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html" title="CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Frelationship-between-css-javascript-by-smashingmagazine.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html">CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html"><img src="" alt="CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説" title="CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説" class="entry-image" /></a></p><p>CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS &amp; JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざけ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html" alt="はてなブックマーク - CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説" title="はてなブックマーク - CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/relationship-between-css-javascript-by-smashingmagazine.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 349 https://blog.sushi.money/entry/2012/11/17/110000 michael26 2012-11-22T04:26:45Z デザイン アート ネタ javascript html <blockquote cite="https://blog.sushi.money/entry/2012/11/17/110000" title="画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.sushi.money%2Fentry%2F2012%2F11%2F17%2F110000" alt="" /> <a href="https://blog.sushi.money/entry/2012/11/17/110000">画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記</a></cite><p><a href="https://blog.sushi.money/entry/2012/11/17/110000"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8aec091bb81400dbe49daaa6189bb12591059aa1/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Ffb94dc5454248e8a9a8e4437b709426ff1989b8b%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fh%252Fhitode909%252F20121117%252F20121117114404.png" alt="画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記" title="画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記" class="entry-image" /></a></p><p>ぼくはライフワークとして画面をチカチカさせる活動をしてるのだけど，周りの人にあまり理解してもらえなくて，まぶしいとか，そんな低俗なことをやって，みたいな反応をされる． けど，画面をチカチカさせるだけでも，いろいろと工夫できることとかある．今日はこれまでの活動の振り返りと，それで得たノウハウを共有し...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.sushi.money/entry/2012/11/17/110000"><img src="https://b.hatena.ne.jp/entry/image/https://blog.sushi.money/entry/2012/11/17/110000" alt="はてなブックマーク - 画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記" title="はてなブックマーク - 画面をチカチカさせる活動の振り返りとノウハウの共有 - hitode909の日記" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.sushi.money/entry/2012/11/17/110000"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 269 https://stocker.jp/diary/japan-map-css/ michael26 2012-11-21T17:33:02Z html javascript <blockquote cite="https://stocker.jp/diary/japan-map-css/" title="JavaScriptなしで地域ごとに色が変わる日本地図を作る"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fstocker.jp%2Fdiary%2Fjapan-map-css%2F" alt="" /> <a href="https://stocker.jp/diary/japan-map-css/">JavaScriptなしで地域ごとに色が変わる日本地図を作る</a></cite><p><a href="https://stocker.jp/diary/japan-map-css/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f48338a314c37ece01b5942100bbe213cf893807/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg" alt="JavaScriptなしで地域ごとに色が変わる日本地図を作る" title="JavaScriptなしで地域ごとに色が変わる日本地図を作る" class="entry-image" /></a></p><p>HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デ...</p><p><a href="https://b.hatena.ne.jp/entry/s/stocker.jp/diary/japan-map-css/"><img src="https://b.hatena.ne.jp/entry/image/https://stocker.jp/diary/japan-map-css/" alt="はてなブックマーク - JavaScriptなしで地域ごとに色が変わる日本地図を作る" title="はてなブックマーク - JavaScriptなしで地域ごとに色が変わる日本地図を作る" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/stocker.jp/diary/japan-map-css/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 329