practice

　　　　

<html>
<meta charset="utf-8">

<button onclick="ぽじしょん_上中央()">上中央へ</button>
<button onclick="ぽじしょん_右下()">右下へ</button>
<button onclick="ぽじしょん_左上()">左上へ</button>
<button onclick="ぽじしょん_下中央()">下中央へ</button>
<hr>
<span id="目印_ぽじしょん_上中央">上中央</span> 
<span id="目印_ぽじしょん_右下">右下</span> 
<span id="目印_ぽじしょん_左上">左上</span> 
<span id="目印_ぽじしょん_下中央">下中央</span>

<script>
function ぽじしょん_上中央()
{let 移動_上中央=document.getElementById("目印_ぽじしょん_上中央");
移動_上中央.style.fontSize="40px";
移動_上中央.style.color="red";
移動_上中央.style.position="absolute";
移動_上中央.style.left="150px";
移動_上中央.style.top="60px";}
function ぽじしょん_右下()
{let 移動_右下=document.getElementById("目印_ぽじしょん_右下");
移動_右下.style.fontSize="40px";
移動_右下.style.color="green";
移動_右下.style.position="absolute";
移動_右下.style.left="300px";
移動_右下.style.top="300px";}
function ぽじしょん_左上()
{let 移動_左上=document.getElementById("目印_ぽじしょん_左上");
移動_左上.style.fontSize="40px";
移動_左上.style.color="blue";
移動_左上.style.position="absolute";
移動_左上.style.left="0";
移動_左上.style.top="60px";}
function ぽじしょん_下中央()
{let 移動_下中央=document.getElementById("目印_ぽじしょん_下中央");
移動_下中央.style.fontSize="40px";
移動_下中央.style.color="purple";
移動_下中央.style.position="absolute";
移動_下中央.style.left="150px";
移動_下中央.style.top="300px";}
</script>

</html>