整数部（）
剰余（）
割ったときの余りはよくテストに出るらしい
プログラマがやってはいけない計算というのがあるらしい。
100/25 → 4
0/5 → 0
5/0 → 無限大
この無限大になるのはやっちゃいけない。
計算がいつまでも終わらない。
consoleでやってみよう。
100/25
4
0/5
0
5/0
Infinity
Infinityが出た（無限大ですよと）
プログラムを組んでるときにこのInfinityが出るような計算をさせてはいけないらしい。
ディビジョンバイゼロ(division by zero)というらしい。
>「Divide by Zero（ゼロ除算）」とは
プログラムを利用して数値を０で割ろうとすると発生することがあるエラー。エラーにならずに、NaN（Not a Number）を返す言語もある。
割り算を行う箇所では０除算は必ず考慮しておくのが常識とされているので、システム障害が発生してエラーの原因を探りこれが見つかったりすると、周囲の視線が痛いことになったりするので、ちゃんと制御を入れておくことがオススメされるもの。
４つのボーダーにそれぞれ別々の色を設定してみましょう
--->test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<link rel="stylesheet" href="test1.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="hoge">
</div>
<script src="test1.js"></script>
</body>
</html>
--->test1.css
body{
background:#ffc;
}
#hoge{
width:100px;
height:30px;
background-color: #333;
/*border:solid 10px #f00;*/
border-left: solid 10px #f00;
border-right: solid 10px #0f0;
border-top: solid 10px #00f;
border-bottom: solid 10px #000;
}
じゃあdivの幅高さを0にしたら？
なるほど
じゃあこの左側の部分だけが欲しいかな？ 三角っぽいアイコンになるのでは？
→border-left以外をコメントアウト
→画面に何も出ませんよ
こういうときはtransparent（トランスペアレント）（透明）を使うよ。
#hoge{
width:0;
height:0;
/*background-color: #333;*/
border:solid 10px #f00;
border-left: solid 10px #f00;
border-right: solid 10px transparent;/*透明*/
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
これで思うようなものができた。
これをtransformさせてみる。
rotate
ローテート
回転。時計回りに行われる
角度はdegというのを使う
transform: rotate(90deg);/*回転*/
skew
スキュウ
歪み。
transform: skew(15deg);/*歪み*/
こういう技術をつかうとボーダーで装飾ができる。またそれを回転させたりゆがませたりして使うことが出来る。
今日はこれでデジタル時計の表示板を作るよ。
--->test1.css
body{
background:#ffc;
}
#hoge{
width:0;
height:0;
/*background-color: #333;*/
border:solid 10px #f00;
border-left: solid 10px #f00;
border-right: solid 10px transparent;/*透明*/
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
/*transform: rotate(90deg);/*回転*/
transform: skew(15deg);/*歪み*/
}
