WEB 사이트에 무음의 동영상을 배경으로 해 보는 1일째【WEB 사이트를 만드는 30일 챌린지】
왜 할까?
・프런트를 좋아
· 무엇인가 도전하고 새로운 경험을하고 싶다
· 새로운 경험에서 새로운 꿈과 희망을 발견하고 싶습니다.
· 경험치나 기술력을 높인다
워드프레스 테마의 레퍼토리를 늘리다
(수시 편집)
모처럼이므로 조금씩 규칙 만들기
· 모르는 영역에 도전한다
· 세련된 사이트를 의식
· 가능한 한 반응형 웹 디자인을 의식
・다소 모순됩니다만, 상기 룰에 대해서 무리하지 않는다(완벽을 목표로 하지 않는 것)
(수시 편집)
웹 사이트 작성 1일째, 세련된 WEB 사이트에 자주 있는 배경이 동영상인 톱 사이트를 작성
· Bootstrap을 사용합니다.
반응형 웹 디자인을 의식
・배경에 동영상을 삽입해, 동영상을 자동 재생시켜, 소리는 무음, 동영상은 루프시킵니다
・동영상에 대해서는 이하 프리 사이트로부터 다운로드했습니다
htps : // 우선. 코 m / ゔ ㅃ에서 / 어머니 g-s와 rm / 455092
・CSS는 기술량이 적기 때문에 html에 직접 걸립니다
코딩한 WEB 사이트가 아래와 같이
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Videoタグで無音の動画を背景にしてみる</title>
<style>
.bgv{
position: absolute;
}
.video-text{
position: relative;
margin-right: 10%;
margin-top: 50%;
color: white;
}
.video-second-text{
position: relative;
margin-right: 15%;
margin-top: 50%;
color: white;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row no-gutters mt-3">
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">ホーム</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">背景動画</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">チャレンジ</a>
</div>
<h2 class="text-center">ここから下に動画背景↓↓↓</h1>
</div>
<video src="goomalling-storm.mp4" loop="" autoplay="" muted="" width="100%" class="bgv"></video>
<div class="container">
<div class="row video-text-box">
<div class="video-text btn btn-dark col-1.5 offset-1 text-nowrap">ボタン</div>
<div class="video-second-text btn btn-info col-1.5 offset-1 text-nowrap">第2ボタン</div>
</div>
</div>
</body>
</html>
완성된 웹사이트
동영상ver
힘든 점
・당초 동영상이 흐르지 않았지만, video 태그에 muted=""를 기술하는 것으로 해결했습니다
・응답 사이트로 할 때의 버튼의 장소의 고안
・옆 가득 동영상을 표시하고 싶었기 때문에 width는 100%를 기술했지만, height를 기술하면 옆 가득이 되지 않았기 때문에, 기술을 하지 않고, width만을 기술.
감상
상당한 것 같다. 계속 괴롭히는 (웃음)
세련된 사이트가 되면 더 이렇게 할 수 없을까? 계속 반복하고 싶은 생각이 선행
그만 고집하고 만들어 가고 싶어져 버린다.
완벽주의는 도가니에 빠지면 위험하기 때문에 여기까지 했습니다.
여기까지 봐 주셔서 감사합니다.
Reference
이 문제에 관하여(WEB 사이트에 무음의 동영상을 배경으로 해 보는 1일째【WEB 사이트를 만드는 30일 챌린지】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pontarou194/items/4a8ae8d7a1ab7c408e1e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
· Bootstrap을 사용합니다.
반응형 웹 디자인을 의식
・배경에 동영상을 삽입해, 동영상을 자동 재생시켜, 소리는 무음, 동영상은 루프시킵니다
・동영상에 대해서는 이하 프리 사이트로부터 다운로드했습니다
htps : // 우선. 코 m / ゔ ㅃ에서 / 어머니 g-s와 rm / 455092
・CSS는 기술량이 적기 때문에 html에 직접 걸립니다
코딩한 WEB 사이트가 아래와 같이
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Videoタグで無音の動画を背景にしてみる</title>
<style>
.bgv{
position: absolute;
}
.video-text{
position: relative;
margin-right: 10%;
margin-top: 50%;
color: white;
}
.video-second-text{
position: relative;
margin-right: 15%;
margin-top: 50%;
color: white;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row no-gutters mt-3">
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">ホーム</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">背景動画</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">チャレンジ</a>
</div>
<h2 class="text-center">ここから下に動画背景↓↓↓</h1>
</div>
<video src="goomalling-storm.mp4" loop="" autoplay="" muted="" width="100%" class="bgv"></video>
<div class="container">
<div class="row video-text-box">
<div class="video-text btn btn-dark col-1.5 offset-1 text-nowrap">ボタン</div>
<div class="video-second-text btn btn-info col-1.5 offset-1 text-nowrap">第2ボタン</div>
</div>
</div>
</body>
</html>
완성된 웹사이트
동영상ver
힘든 점
・당초 동영상이 흐르지 않았지만, video 태그에 muted=""를 기술하는 것으로 해결했습니다
・응답 사이트로 할 때의 버튼의 장소의 고안
・옆 가득 동영상을 표시하고 싶었기 때문에 width는 100%를 기술했지만, height를 기술하면 옆 가득이 되지 않았기 때문에, 기술을 하지 않고, width만을 기술.
감상
상당한 것 같다. 계속 괴롭히는 (웃음)
세련된 사이트가 되면 더 이렇게 할 수 없을까? 계속 반복하고 싶은 생각이 선행
그만 고집하고 만들어 가고 싶어져 버린다.
완벽주의는 도가니에 빠지면 위험하기 때문에 여기까지 했습니다.
여기까지 봐 주셔서 감사합니다.
Reference
이 문제에 관하여(WEB 사이트에 무음의 동영상을 배경으로 해 보는 1일째【WEB 사이트를 만드는 30일 챌린지】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pontarou194/items/4a8ae8d7a1ab7c408e1e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Videoタグで無音の動画を背景にしてみる</title>
<style>
.bgv{
position: absolute;
}
.video-text{
position: relative;
margin-right: 10%;
margin-top: 50%;
color: white;
}
.video-second-text{
position: relative;
margin-right: 15%;
margin-top: 50%;
color: white;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row no-gutters mt-3">
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">ホーム</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">背景動画</a>
<a href="#" class="col-sm btn btn-primary stretched-link ml-2 mr-1">チャレンジ</a>
</div>
<h2 class="text-center">ここから下に動画背景↓↓↓</h1>
</div>
<video src="goomalling-storm.mp4" loop="" autoplay="" muted="" width="100%" class="bgv"></video>
<div class="container">
<div class="row video-text-box">
<div class="video-text btn btn-dark col-1.5 offset-1 text-nowrap">ボタン</div>
<div class="video-second-text btn btn-info col-1.5 offset-1 text-nowrap">第2ボタン</div>
</div>
</div>
</body>
</html>
동영상ver
힘든 점
・당초 동영상이 흐르지 않았지만, video 태그에 muted=""를 기술하는 것으로 해결했습니다
・응답 사이트로 할 때의 버튼의 장소의 고안
・옆 가득 동영상을 표시하고 싶었기 때문에 width는 100%를 기술했지만, height를 기술하면 옆 가득이 되지 않았기 때문에, 기술을 하지 않고, width만을 기술.
감상
상당한 것 같다. 계속 괴롭히는 (웃음)
세련된 사이트가 되면 더 이렇게 할 수 없을까? 계속 반복하고 싶은 생각이 선행
그만 고집하고 만들어 가고 싶어져 버린다.
완벽주의는 도가니에 빠지면 위험하기 때문에 여기까지 했습니다.
여기까지 봐 주셔서 감사합니다.
Reference
이 문제에 관하여(WEB 사이트에 무음의 동영상을 배경으로 해 보는 1일째【WEB 사이트를 만드는 30일 챌린지】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pontarou194/items/4a8ae8d7a1ab7c408e1e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(WEB 사이트에 무음의 동영상을 배경으로 해 보는 1일째【WEB 사이트를 만드는 30일 챌린지】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pontarou194/items/4a8ae8d7a1ab7c408e1e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
