# コード書き初め、そろそろネタが尽きてきたよ「始め」！？
コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。
[](https://www.youtube.com/watch?v=D-_cGLonkCQ)
動作はこちらから確認くださいませ。
<https://zip358.com/tool/demo51/>
尚、このコードは２０２１年の１２月２８日に書いたものになります。
```
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Happy New Year 2022</title>
<style>
body{
background-color: black;
}
#HNY{
font-weight: bold;
font-size: 222px;
}
</style>
</head>
<body>
<h1 id='HNY'>Happy New Year 2022</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
let color1 =["40","E0","D0"];
let color2 =["FF","8C","00"];
let color3 =["FF","00","80"];
let postion =[2,0,1];
setInterval(() => {
if((parseInt(color1[postion[0]],16) + 1)<255){
color1[postion[0]] = (parseInt(color1[postion[0]],16) + 1).toString(16);
}else{
color1[postion[0]] = (100).toString(16);
postion[0]--;
}
if((parseInt(color2[postion[1]],16) + 1)<255){
color2[postion[1]] = (parseInt(color2[postion[1]],16) + 1).toString(16);
}else{
color2[postion[1]] = (50).toString(16);
postion[1]--;
}
if((parseInt(color3[postion[2]],16) + 1)<255){
color3[postion[2]] = (parseInt(color3[postion[2]],16) + 1).toString(16);
}else{
color3[postion[2]] = (80).toString(16);
postion[2]--;
}
for(key in postion){
if(postion[key]<=-1){
postion[key] = 2;
}
}
//console.log(`#${color1.join("")}, #${color2.join("")}, #${color3.join("")}`);
document.getElementById('HNY').style = `
color: #FF8C00;
background: -webkit-linear-gradient(0deg, #${color1.join("")}, #${color2.join("")}, #${color3.join("")});
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
`;
}, 70);
</script>
</body>
</html>
```
[  紹介料はポイントで貰ってきたけど.
](https://zip358.com/2026/02/09/%e7%b4%b9%e4%bb%8b%e6%96%99%e3%81%af%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%81%a7%e8%b2%b0%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f%e3%81%91%e3%81%a9.html)
[  AIは能力の鏡だとさ.そうかも知れない.
](https://zip358.com/2026/02/08/ai%e3%81%af%e8%83%bd%e5%8a%9b%e3%81%ae%e9%8f%a1%e3%81%a0%e3%81%a8%e3%81%95-%e3%81%9d%e3%81%86%e3%81%8b%e3%82%82%e7%9f%a5%e3%82%8c%e3%81%aa%e3%81%84.html)
[  考え過ぎずに行動力.逆算出来れば凄いけどね.
](https://zip358.com/2026/02/07/%e8%80%83%e3%81%88%e9%81%8e%e3%81%8e%e3%81%9a%e3%81%ab%e8%a1%8c%e5%8b%95%e5%8a%9b-%e9%80%86%e7%ae%97%e5%87%ba%e6%9d%a5%e3%82%8c%e3%81%b0%e5%87%84%e3%81%84%e3%81%91%e3%81%a9%e3%81%ad.html)
[  ネガティブ思考は駄目なのか本当にそう？
](https://zip358.com/2026/02/06/%e3%83%8d%e3%82%ac%e3%83%86%e3%82%a3%e3%83%96%e6%80%9d%e8%80%83%e3%81%af%e9%a7%84%e7%9b%ae%e3%81%aa%e3%81%ae%e3%81%8b%e6%9c%ac%e5%bd%93%e3%81%ab%e3%81%9d%e3%81%86%ef%bc%9f.html)
[  成功体験と成功の模倣.
](https://zip358.com/2026/02/05/%e6%88%90%e5%8a%9f%e4%bd%93%e9%a8%93%e3%81%a8%e6%88%90%e5%8a%9f%e3%81%ae%e6%a8%a1%e5%80%a3.html)