質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

389閲覧

DOM要素を複雑な形にする

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/28 05:30

DOM要素って普通は長方形の形をしていますが、ピカチュウみたいな複雑な形を作ることはできますか?

その領域だけクリック可能にしたりマウスオーバーを検出したいです。

多分Unityとか使ってブラウザゲームとして作ればできると思うんですが、可能な限り基本技術のみでやりたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

SVGのpolygonやpathでやるとよいでしょう

sample

HTML

1<svg xmlns="http://www.w3.org/2000/svg" width="150" height="220"> 2<style> 3path:hover{ 4fill:blue; 5} 6</style> 7<g> 8<a href="sample.html" target="_parent"> 9<path fill="yellow" stroke="black" 10d="m 130.77976,81.55357 11c 3.8318,-9.752971 9.26586, 12-18.874334 16.01819, 13-26.887402 7.56868, 14-8.98185 16.79348, 15-16.563628 27.0711, 16-22.2495 -0.83529, 1714.267981 -5.26565, 1828.311423 -12.76912, 1940.475754 -3.2652, 205.293409 -7.10169, 2110.234159 -11.42136, 2214.708768 5.97097, 233.977577 10.78871, 249.665316 13.72989, 2516.20925 3.54606, 267.88976 4.31599, 2716.99495 2.14511, 2825.36813 -2.25773, 297.49577 -6.29734, 3014.44839 -11.69126, 3120.12197 -5.71161, 326.00775 -12.93448, 3310.56742 -20.81469, 3413.13994 9.44218, 359.77624 17.10458, 3621.26621 22.50084, 3733.74059 5.60778, 3812.96336 8.76282, 3926.98277 9.24916, 4041.09869 L 53.672619, 41234.25595 c 0.0748, 42-15.8535 3.993342, 43-31.67543 11.326075, 44-45.73139 5.224922, 45-10.01554 12.163745, 46-19.13418 20.423925, 47-26.84004 -6.079785, 48-6.51117 -11.330649, 49-13.79551 -15.585953, 50-21.62185 -1.864585, 51-3.42934 -3.554256, 52-7.00753 -4.325729, 53-10.834 -0.706575, 54-3.50458 -0.618084, 55-7.16707 0.25692, 56-10.63343 0.860252, 57-2.74068 1.720366, 58-5.4814 2.580341, 59-8.22216 1.293528, 60-4.12251 2.641919, 61-8.3508 5.345532, 62-11.721072 3.178383, 63-3.962117 8.162373, 64-6.414478 13.240794, 65-6.515103 C 80.875322, 6686.113569 75.537654, 6779.365052 71.071859, 6872.081428 64.597759, 6961.522299 59.967413, 7049.836144 57.452381, 7137.708333 c 12.12121, 724.348931 23.264907, 7311.398926 32.386557, 7420.489165 7.21677, 757.191919 13.169872, 7615.648389 17.506302, 7724.867978 z" 78transform="translate(-27.970238,-27.214286)" /> 79</a> 80</g> 81</svg>

※著作権に引っ駆らない程度の適当な絵にしてあります(一部更新あり)

投稿2021/07/28 05:55

編集2021/07/28 07:31
yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

可能です。
基本技術のみでやりたいのならドット絵を書きましょう。
長方形を作ることが出来るということは正方形も作ることが可能ということです。
まずは1px × 1pxの 正方形(1ドット)を作成しましょう。これを沢山ならべて絵にするのがドット絵と呼ばれるものです。
ポケットモンスターは基本的にドット絵で描かれています。
ドット絵で検索してみて下さい。とても複雑な絵が大量に世の中には出回っています。

投稿2021/07/28 09:59

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

投稿2021/07/28 05:43

編集2021/07/28 05:44
int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

投稿2021/07/28 05:34

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問