practice

　　　　

<html>

<meta charset="utf-8">
クラシック JavaScript での記述
<br>

<script>
document.write("文字".fontsize("7")+"<br>");
document.write("文字".fontcolor("red")+"<br>");
document.write("文字".bold()+"<br>");
document.write("文字".fontcolor("red") .bold()+"<br>")
document.write("文字".big()+"<br>");
document.write("文字".small()+"<br>");
document.write("文字".italics()+"<br>");
document.write("文字".strike()+"<br>");
document.write("文字".fixed()+"<br>");
document.write("文字"+"0123456789".sub()+"<br>");
document.write("文字"+"0123456789".sup()+"<br>");
document.write("<html>"+"<h1>文字</h1>"+"<s>文字</s>"+"<p>文字</p>"+"<b>文字</b>"+"<br>"+"</html>");
</script>
<hr>
<script>document.write("文字".fontsize("7").fontcolor("red"))</script>
<br><hr><br>
クラシックとモダン の中間
<br>

<script>
document.write('<div style="height:30px;width:50px;border:1px solid red;border-radius:10px;padding:4px;">文字</div>');
</script>

<br><hr><br>
モダン JavaScript での記述
<br>
<div id="目印_1">文字</div>
<div id="目印_2">文字</div>
<div id="目印_3">Arial Black</div>
<div id="目印_4">文字</div>
<div id="目印_5">文字</div>
<div id="目印_6">文字</div>
<div id="目印_7">文字</div>
<div id="目印_8">文字</div>
<div id="目印_9">文字</div>

<script>
document.getElementById("目印_1").style.fontSize="48px";
document.getElementById("目印_2").style.color="red";
document.getElementById("目印_3").style.fontFamily="Arial Black";
document.getElementById("目印_4").style.fontWeight="bold";
document.getElementById("目印_5").style.fontStyle="italic"
document.getElementById("目印_6").style.border="solid 1px #ff0000";
document.getElementById("目印_6").style.height="30px";
document.getElementById("目印_6").style.width="50px";
document.getElementById("目印_6").style.borderRadius="10px";
document.getElementById("目印_6").style.padding="4px";
document.getElementById("目印_7").style.textDecoration="underline";
document.getElementById("目印_8").style.backgroundColor="#eeddff";
</script>
<hr>
<div id="目印">文字</div>
<script>
document.getElementById("目印").style.cssText=`font-size:48px;
text-align:center;
color:red;
text-shadow:1px 2px 3px #888888;
width:120px;
margin-top:40px;
padding:4px;
background: linear-gradient(90deg, rgb(221,238,255), rgb(180,242,242));
transform:rotate(-5deg);
border:1px solid black;
border-radius:8px;
box-shadow:4px 4px 4px silver`
</script>

</html>