STUDY_html_001_A.html
<html> <script> すくりぷと </script> <style> スタイル </style> <p>HTMLにはCSSとJSが含んでいる <span id="ぽじしょん"></span></p> <div class="カーソル"><span id="グレーゾーン"></span></div> </html>
<style>
.カーソル{position:absolute;
top:0;
width:60%;
height:60%;
display:flex;
align-items:center;}
.カーソル #グレーゾーン{background-color:gainsboro;
height:200px;
width:200px;
border-radius:50%;}
</style>
<script>
HTMLElement.prototype.writeOffset=function(x,y)
{this.innerText="["+x+","+y+"]";
return this;};
document.addEventListener('DOMContentLoaded',function()
{let まうす=document.getElementById("ぽじしょん")
.writeOffset(0,0);
let はんい=document.getElementById("グレーゾーン");
document.addEventListener('mousemove',function(event)
{まうす.writeOffset(event.offsetX,event.offsetY);});
はんい.addEventListener('mousemove',function(event)
{event.stopPropagation();
まうす.innerText="[ストップ]";});});
</script>
sample_STUDY_html_001_A.pdf 
サンプル・ダウンロード 
