私はこの分野に入る予定なので、練習用にとてもシンプルなウェブサイトを作っています。私は 27 インチのデスクトップ モニターを持っていますが、ウェブサイトは見栄えがよく、弟の 19 インチのラップトップで確認したところ、幅が画面に収まらず、ひどく見えました。そこで、コードを変更して width="100%" を入れました。ページは各コンピューター モニターできれいに見えましたが、リンクをクリックすることはできませんでした。これは、コードに追加したイメージ マッピングが原因であると考えました。
私は HTML コーディングにかなり慣れていないので、このサイトで何をしているかを知っている人から助けを得たいと思っていました。
MY QUESTION: リンクをクリック可能にするためにイメージ マッピングを変更せずに、すべての画面サイズに合わせてコードを変更するにはどうすればよいですか。これが私のコードです：
<center>
<font face="verdana" size="1" color="black">
<img src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/googlefrive.jpg" width="100%" usemap="#ImageMap1">
<div id="inlineframe" style="width:1274px; height:944px; position:absolute; left:289px; top:203px; z-index:1; overflow:auto;" usemap="#ImageMap1">
<iframe src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/index.html" name="inlineframe" width=100% height=100% border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
<map id="ImageMap1" name="ImageMap1">
<area shape="rect" coords="54,216,261,338" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/info.html" target="inlineframe" />
<area shape="rect" coords="44,553,264,678" href="" target="inlineframe" />
<area shape="rect" coords="41,961,261,1084" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/specialmessage.html" target="inlineframe" />
</map>
</font>
</center>