ＧＷスキル強化週間３日目（5月3日）

こんばんはSORAです。

1日2日と働いてやっときました５連休！

いつもはバイトで生計を立てているので、なかなかまとまった時間が取れず、やっと自分の仕事に関して集中できそうです。

この５連休は、なかなか時間をさけていなかったので、もう一回総復習する期間に決めました

今日学んだことを書きたいと、、がつがつアニメーションはできなくてもいいから、HTML,CSSに関してはフルスクラッチでできる知識はないとだよな、と。

確かに、今はchatGPTとかあるから、「こういう表現したい」って言ったらある程度正解のコードを書いてくれるわけです。

でも、ブレークポイントってなに？とかメディアクエリってなに？
とか言ってるようじゃダメなわけです

とか言ってるとデザイナーなの？
マーケターなの？エンジニアなの？という声が出てきそうですが、、、

どの知識も掛け合わせてやっとお客さんが納得いくものができると思うんです！

私が今から書くことは、WEB制作者からしたら、当たり前中の当たり前かもしれませんが、ご了承を。

・マウスをhoverしたときに、少しだけ色を薄くする（透明度を上げるなど）ことで、ユーザーは、「これはクリックできるんだ」と判断できる

・画面の右端と左端が均等に空いているとき→containerをCSSでつけている
（innerと似ている･･･）

・実装するときに、テキストで同じようなものが並んでいる！→<ul>タグ！

・コーディングするときは、htmlを順番に書いていくというよりは、
まずは、全体のブロックを書くべし！

・イベント（AをしたらBという動作が起きる）は、
CSSでもJSでもできるが、CSSの方が簡単で軽くなる

私、これどっちがいいんだろう？って思ってたんですが、CSSでできるんならそれがいいよな。。。

hoverしたときに、その文字が360度回転する処理をJSとCSSの両方

CSSの場合

.rotate-text:hover {
  transform: rotate(360deg);
}

上記のCSSコードは、クラス名が「rotate-text」の要素をhoverしたときに、その要素を360度回転させるものです。transformプロパティを使用して、rotate(360deg)という値を設定することで、要素を360度回転させることができます。

JSの場合

<p onmouseover="startAnimation()" onmouseout="stopAnimation()">Hello World</p>
var intervalId;
function startAnimation() {
  intervalId = setInterval(rotateText, 10);
}

function stopAnimation() {
  clearInterval(intervalId);
}

var angle = 0;
function rotateText() {
  angle += 1;
  document.querySelector('p').style.transform = 'rotate(' + angle + 'deg)';
}

マウスが要素上に乗ったときにstartAnimation関数が呼ばれ、要素を回転させるアニメーションが開始されます。また、マウスが要素から離れたときにstopAnimation関数が呼ばれ、アニメーションが停止します。

今日は、ひたすら基礎の基礎を学んでいました！
明日もがんばるぞ。

#プログラミング #コーディング#JavaScript#css