ゼロから始めるエンジニアへの道 #15 ~html or css~
##学習範囲
1. htmlのdivtag (前回htmlでdivtag説明してなかった気がするので）
2.音声再生プルの作成（正式名称はわからん）
↳自身が使っている[wallper]の、ディレクトリに格納されている [index.html] or [css]を実行した結果。
<br> ↳
###DivTagについて
・レイアウトを変更する際に使うtag
・後述に記載したタグの識別子が同じ場合は、やはり優先的になる。
・イメージとしてはパーツを保管するための箱
###[Wallpe]内のindexファイルとcss、そしてjsの挙動について
・Wallperに関してはSteamのとあるプロダクトを利用して、ディレクトリを見ています。
<br> ・上記の製品はここで書くものとは、関連性がないので紹介は省きます。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<!--VideoBoxに活用している<div>に関しては比較的広域で選択が加納氏-->
<div id="videoBox">
<video loop autoplay>
your browser does not support the video tag
</video>
</div>
<div id="audioBox">
<audio id="Music" controls >
</audio>
<div class="infoBox">
<p class="">
HP作成：T-K
<br />壁紙提供：NINA
</p>Album is original
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#audioBox").fadeTo("fast", 0.0);
$("#audioBox").hover(
function() {
$("#audioBox").fadeTo("250", 1);
},
function() {
$("#audioBox").fadeTo("250", 0);
}
);
});
var maxIndex = 4;
var num = 0;
var musicPlayer = document.getElementById("Music");
musicPlayer.onended = function(){
if(++num >= maxIndex)
{
num = 0;
}
musicPlayer.play();
}
</script>
</html>
（今更だけど、「見たままモード」超らくなんですけどw
ただ、癖で<br>とか見出し系のMarkdwanを使ってしまうｗ）
上記のコードでは
・ロードカルディレクトリのcssと、javascriptを使って、wallpaper(デスクップ)を動かす
・指定のディレクトリでmp4再生
・音楽プルメニューの配置
が主なファクタになっています。
前回勉強範囲で出きたdivtagが使われて、
oudio、moveなど分かりやすい識別子を使っています。
##sroleamについて
sorolearmは移動時間中、僕の場合pc操作ができない通勤時間などに重宝するAppです。
・携帯でこコード書ける
・WEB実装の確認ができる
・簡単なメソッドがある
