動画背景のHTML・CSSを作る

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hpscript</title>
	<meta name="description" content="Hpscript provides comprehensive software services of full commitment to help you achieve your goals at any stage.">
	<link rel="stylesheet" type="text/css" href="css/video-styles.css">
	<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
	<header id="header">
		<h1>Hpscript</h1>
		<div id="video-area">
			<video id="video" src="audio/video.mp4" webkit-playsinline playsinline muted autoplay loop></video>
		</div>
	</header>
</body>
</html>
@charset "utf-8";

#header {
	position: relative;
	height: 100vh;
}

#video-area {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
}

#video {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.77777778vh;
	height: 56.25vw;
	min-height: 100%;
	min-width: 100%;
}
h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color: #fff;
	text-shadow: 0 0 15px #666;
}
a {
	color: #fff;
}

よっしゃあ、次はreactやな

marguee.jsを使わずCSSで文字を動かす

HTML

<div class="video">
      <div class="narrate">
        <p class="ticker" data-duplicated='false'>The Boston Celtics have signed center Robert Williams III to a contract extension, the team announced today. </p>
      </div>
    </div>

CSS

html {
	height: 100%;
}
body {
	height: 100%;	
}
.video {
	height: 100%;
	background: url(../img/nba.jpg) no-repeat;
	background-size: 80% auto;
	background-position: center;

}
.narrate {
	position: absolute;
	bottom: 10px;	
	overflow:hidden;
}
p {
	display: inline-block;
  	color: #ffffff;
  	font-size: 36pt;
  	letter-spacing: 4px;
  	text-shadow: 
       2px  2px 0px #003366,
      -2px  2px 0px #003366,
       2px -2px 0px #003366,
      -2px -2px 0px #003366,
       2px  0px 0px #003366,
       0px  2px 0px #003366,
      -2px  0px 0px #003366,
       0px -2px 0px #003366; 
	font-size: 15px;
	animation: flowing 15s linear 1;  
	transform:translateX(100%);  
}

@keyframes flowing {
100% {
transform:translateX(-100%); 
}

jQueryのmarquee.jsを使う場合

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="js/marquee.js"></script>
    <script>
       $(function(){
         var $mq = $('p.ticker').marquee();

       });
    </script>

これでもmarqueeの動きはするが、margueeの文字がループ処理されるので、結局CSSを採用することに。
.bind(‘finished’, function(){} と $*.marquee(‘destroy’);で色々書いてみたんだが、どうやってもループになってしまう。

うーん 難しいね

[CSS] 画像を重ねて表示

	<style>
		.good {
			width: 50px;
			height: 50px;
			color: #ffffff;
			background-color: #2779bd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			border-radius: 50%;
			cursor: pointer;
		}
	</style>
	<h1>画像を重ねて表示</h1>
	<img src="img/bridge1.jpg">
	<div class="good">
    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
	</div>

		.sample-box {
			position: relative;
			width: 300px;
		}
		.good {
			width: 50px;
			height: 50px;
			color: #ffffff;
			background-color: #2779bd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			border-radius: 50%;
			cursor: pointer;

			position: absolute;
			top: 85%;
			left: 140%;
		}

position absoluteで、top, leftは%で表示する。

なるほど、これをTシャツでやりたい。

なるほど

[position:fixed;] ヘッダー固定

<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>
	<div class="main">
	<img src="butterfly.jpg">
	<h1>Butterfly</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
</body>
* {
	margin:0; padding:0;
}
.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
	margin-top: 0px;
	position: fixed;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
.main {
	width: 80vw;
	padding-top: 170px;
	margin: 0px auto;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}
ul.footer-menu li {
	display: inline;
}

レポジトリに登録しておこう。

[CSS] cssでのvwとは?

cssの中でvwってよく見ますが、vwって何でしょう?
vw: viewport width -> 幅に対する割合、100がマックス
vh: viewport height -> 高さに対する割合

	<style>
		img {
			display: inline-block;
			margin:auto;
			width: 50vw;
		}
	</style>
	<div class="container">
		<img src="/img/test.jpg">
	</div>

フォルクスワーゲンの事じゃないのね。。
VW、cssまで進出して凄いと思ってたが、違った様だ。

[CSS] transitionとは

CSSトランジションとは、CSSプロパティが変化する際のアニメーション速度を操作する

	<style>
		.sample {
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 150px;
			height: 60px;
			line-height: 60px;
			font-weight: bold;
			text-align: center;
			color: green;
			box-shadow: 20px 10px 2px #8D9EB8;
			transition: 0.5s;
		}
		.sample:hover {
			color: orange;
			box-shadow: -20px 10px 5px #8D9EB8;
		}
	</style>
	<div class="container">		
		<div class="sample">Sample</div>		
	</div>

transitionの値を2sとか0.5sとか変えると、動きも変わる。

なるほど、アニメーションの動きは、ここで制御しとるんか。

[CSS] 画像の上に文字を乗せる方法

ボタン画像の上に文字を乗せて表示したい。
-> 画像の上に文字を乗せる方法を理解する。

<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div>

position: relativeとする。

<style>
    	.sample {
    		position: relative;
    	}
    	.sample p {
    		position: absolute;
    		color: red;
    		top: 5px;
    		left: 5px;
    	}
    </style>

<div class="container">
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div><br>
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET2</p>
		</div>
	</div>

画像の上に文字が乗りました。

なるほど、理解した。背景画像とは別に、こういうことができるんやな。

[CSS] CSSファイルが複数ある時のネーミング

CSSファイルの分割方法

default.css リセットのCSS・基本スタイルとなるCSSを記述しています。
common.css レイアウト・ページ独自のCSSまで全て記載
index.css トップページのCSS
about.css aboutディレクトリのCSS
product.css productディレクトリのCSS
news.css newsディレクトリのCSS

なるほど、ページ名でcssファイルを作るのね。
てっきりstyle1.css, style2.cssで行こうかと思ってた。。。
これは滅茶苦茶恥ずかしい。。

[CSS] position:stickyで固定表示したい時

    <style>
    	table {
            width: 100%;
        }
        th, td {
            height: 300px;
            vertical-align: middle;
            padding: 0 15px;
            border: 1px solid #ccc;
        }
        .fixed01 {
            position: sticky;
            top: 0;
            color: #FFF;
            background: #333;
            &:before{
                content: "";
                position: absolute;
                top: -1px;
                left: -1px;
                width: 100%;
                height: 100%;
                border: 1px solid #ccc;
            }
        }
    </style>
</head>
<body>
	<div class="container">
		<table>
            <tr>
                <th class="fixed01">見出し</th>
                <th class="fixed01">見出し</th>
                <th class="fixed01">見出し</th>
            </tr>
            <tr>
                <td>テキスト</td>
                <td>テキスト</td>
                <td>テキスト</td>
            </tr>
            <tr>
                <td>テキスト</td>
                <td>テキスト</td>
                <td>テキスト</td>
            </tr>
        </table>
	</div>

「position: sticky;」は「指定された場所までいくと固定」される仕様

なるほど。。

[font-family]OSのシステムフォントとfont-familyの設定

-Windows 8.1以降
Yu Gothic
Yu Gothic UI
Segoe UI

-Mac OS EI caption以降/ iOS
Hiragino Sans
Sanfrancisco

-Android
Noto Sans CJK JP
Roboto

<style>
    	body {
            font-family: "Arial", "メイリオ";
        }
    </style>

<style>
    	body {
            font-family: sans-serif, "Helvetica Neue";
        }
    </style>

Helvetica Neue
-> mac のみ

ゴシック系

font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

なんで、font-familyで書体を複数設定しているか全然わからなかったけど、それぞれのOSで書式がないときに厳密に指定するためなのね。

何年Webやってんだ、って感じだが、やっと理解できた。