Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Diavolo

HTMLとCSSとJavaScriptをひたすら書いて動かして理解する【1回目】

Last updated at Posted at 2022-01-15

#はじめに
最近は仕事でhtmlとcssとJavaScriptを使う機会が多くなりました。期待通りに動くものは作れるものの基本的な理解が追い付いていないような気がする今日この頃です。なので、基本的なことから、積み上げて、この記事に書いていこうと計画を立てております。

###まずは最も単純なページを作成する

index.html
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
ボディ
</body>
</html>

#ビデオを再生する機能を追加する
####動画ファイルを準備します。
今回はWindowsのカメラ機能を使って動画を作成しました。
1.Windowsスタート⇒カメラでカメラ機能を起動します。
2.ビデオのボタンを押して、ビデオの撮影を開始します。
3.録画停止ボタンを押して、録画を停止します。
4.ピクチャフォルダのカメラロールフォルダにmp4ファイルが生成されます。
5.mp4ファイルのファイル名をtest01.mp4に変更します。
image.png
index.htmlにvideoタグのプログラムを1行追加します。controlsを付けると再生ボタンが表示されますので付けましょう。

index.html
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<video src="./test01.mp4" width="640" height="480" controls />
</body>
</html>

そして、index.htmlとtest01.mp4を同じフォルダに配置して、index.htmlをダブルクリックします。さっきのmp4がブラウザで再生することができました。
image.png

#ビデオ再生画面を複数並べます。
##まずは横並びにします。
<video>タグを</video>で閉じています。

index.html
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<video src="./test01.mp4" width="640" height="480" controls ></video>
<video src="./test01.mp4" width="640" height="480" controls ></video>
<video src="./test01.mp4" width="640" height="480" controls ></video>
<video src="./test01.mp4" width="640" height="480" controls ></video>
<video src="./test01.mp4" width="640" height="480" controls ></video>
<video src="./test01.mp4" width="640" height="480" controls ></video>
<video src="./test01.mp4" width="640" height="480" controls ></video>
</body>
</html>

image.png
横に並びました。

##つぎは縦並びにします。
</video>に<br>で改行を追加しました。

index.html
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<video src="./test01.mp4" width="640" height="480" controls ></video><br>
<video src="./test01.mp4" width="640" height="480" controls ></video><br>
<video src="./test01.mp4" width="640" height="480" controls ></video><br>
<video src="./test01.mp4" width="640" height="480" controls ></video><br>
<video src="./test01.mp4" width="640" height="480" controls ></video><br>
<video src="./test01.mp4" width="640" height="480" controls ></video><br>
<video src="./test01.mp4" width="640" height="480" controls ></video>
</body>
</html>

縦に並びました。次はcssを使用して縦並びにします。

##つぎはcssを使用して縦並びにします。
index.cssファイルを作成して、index.html,test04.mp4と同じフォルダに配置します。<br>は削除します。

index.html
<html>
<head>
    <link rel="stylesheet" href="index.css">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
    <video src="./test01.mp4" width="640" height="480" controls ></video>
</body>
</html>

ビデオ属性をブロック要素にするだけで縦に並びます。

index.css
video {
    display:block;
}

image.png

##cssを編集して、斜めに並べます。

index.css
video {
    display:block;
}
video:first-child{
    margin-left:0em;
}
video:nth-child(2){
    margin-left:40em;
}
video:nth-child(3){
    margin-left:80em;
}
video:nth-child(4){
    margin-left:120em;
}
video:nth-child(5){
    margin-left:160em;
}
video:nth-child(6){
    margin-left:200em;
}
video:nth-child(7){
    margin-left:240em;
}

image.png

##マウスオーバーしたビデオを拡大するようにしてみます。
index.htmlを編集します。<video>を<div>要素で囲みます。classはclass01を付与。

index.html
<html>
<head>
    <link rel="stylesheet" href="index.css">
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
    <div class="class01">
        <video src="./test01.mp4" width="640" height="480" controls ></video>
        <video src="./test01.mp4" width="640" height="480" controls ></video>
        <video src="./test01.mp4" width="640" height="480" controls ></video>
        <video src="./test01.mp4" width="640" height="480" controls ></video>
        <video src="./test01.mp4" width="640" height="480" controls ></video>
        <video src="./test01.mp4" width="640" height="480" controls ></video>
        <video src="./test01.mp4" width="640" height="480" controls ></video>
    </div>
</body>
</html>
index.css
.class01 video {
    transition: 1.0s;
}
.class01 video:hover {
    transform: scale(1.5, 1.5);
}

video {
    display:block;
}
video:first-child{
    margin-left:0em;
}
video:nth-child(2){
    margin-left:40em;
}
video:nth-child(3){
    margin-left:80em;
}
video:nth-child(4){
    margin-left:120em;
}
video:nth-child(5){
    margin-left:160em;
}
video:nth-child(6){
    margin-left:200em;
}
video:nth-child(7){
    margin-left:240em;
}

image.png
マウスオーバーしたビデオが拡大されました。今回は1.5倍。transformのscaleを1.5にしているので。ちなみに、transitionの1.0sは拡大するまでの秒数です。10sとかにしてみると、拡大するまでに時間が掛かって気持ち悪い動きになります。

#おわりに
今回は、ブラウザで動画を再生する簡単なプログラムを作成しました。引き続き、簡単なプログラムをひたすら書いて記事にしていこうと思います。

それでは、また。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?