CSS

カテゴリーページ

画面全体に背景動画を流す

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-3-1.css">

video ファイルと代替え画像を用意します。video ファイルは各ブラウザに対応するため .mp4、.ogv、.webmの3 種類を用意します。

※動画は、ユーザーのページの読み込み時間や再生時の挙動を削減するため4MB 以下を目安に制作しましょう。
※無料の高画質video 素材は　Pixabay （https://pixabay.com/）などのサービスを活用しましょう。

body内の背景動画を表示させたい場所にHTMLを記載します。

<header id="header">
	<h1>Title</h1>
	<div id="video-area">
		<video id="video" poster="img/movie.jpg" webkit-playsinline playsinline muted autoplay loop>
			<!--
				poster：動画ファイルが利用できない環境で代替表示される画像
				webkit-playsinline：iOS 9までのSafari用インライン再生指定
				playsinline：iOS 10以降のSafari用インライン再生指定
				muted：音声をミュートさせる
				autoplay：動画を自動再生させる
				loop：動画をループさせる
				controls：コントロールバーを表示する
			-->
			<source src="video/movie.mp4" type="video/mp4">
			<source src="video/movie.ogv" type="video/ogv">
			<source src="video/movie.webm" type="video/webm">
			<p>動画を再生できる環境ではありません。</p>
		</video>
	<!--/video-area--></div>
</header>

CSSの書き方

/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
	position: relative;/*h1の中央寄せ配置の起点とするための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; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	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;
}

投稿日：2022年07月28日

左右から線が伸びて枠線になる

カテゴリー：テキストナビゲーション

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-11.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#"><span>Home</span></a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Service</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/
.gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	padding:10px 30px;
	text-decoration: none;
	color: #333;
}


/*==================================================
　5-3-11 左右から線が伸びて枠線になる
===================================*/

.gnavi li{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	margin:0 10px;
}

/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;

	/*線の形状*/
	width: 0;
	height:2px;
	background:#0481A2;

	/*アニメーションの指定*/
	transition: all 0.2s linear;
	transition-delay: 0.2s;
}

.gnavi li::before{
	right: 0;
	top: 0;
}

.gnavi li::after{
	left: 0;
	bottom: 0;
}

/*線の基点位置2 spanタグ*/
.gnavi li span{
	display: block;
}

.gnavi li span::before,
.gnavi li span::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;

	/*線の形状*/
	width:2px;
	height:0;
	background: #0481A2;

	/*アニメーションの指定*/
	transition: all 0.2s linear;
}

.gnavi li span::before{
	left: 0;
	top: 0;
}

.gnavi li span::after{
	right: 0;
	bottom: 0;
}

/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,
.gnavi li.current::after,
.gnavi li:hover::before,
.gnavi li:hover::after{
	width: 100%;/*横幅を100%に*/
}

.gnavi li.current span::before,
.gnavi li.current span::after,
.gnavi li:hover span::before,
.gnavi li:hover span::after{
	height: 100%;/*縦幅を100%に*/
}

投稿日：2022年07月21日

線が伸びて枠線になる

カテゴリー：テキストナビゲーション

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-10.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#"><span>Home</span></a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Service</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/

gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	padding:10px 30px;
	text-decoration: none;
	color: #333;
}


/*==================================================
　5-3-10 線が伸びて枠線になる
===================================*/

.gnavi li{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	margin:0 10px;
}

/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;
	background:#0481A2;

	/*線の形状*/
	width: 0;
	height:2px;

	/*アニメーションの指定*/
	transition: all 0.2s linear;
}

.gnavi li::before{
	right: 0;
	bottom: 0;
}

.gnavi li::after{
	left: 0;
	top: 0;
}

/*線の基点位置2 spanタグ*/
.gnavi li span{
	display: block;
}

.gnavi li span::before,
.gnavi li span::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;
	background: #0481A2;

	/*線の形状*/
	width:2px;
	height:0;

	/*アニメーションの指定*/
	transition: all 0.1s linear;
}

.gnavi li span::before{
	left: 0;
	bottom: 0;
}

.gnavi li span::after{
	right: 0;
	top: 0;
}

/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,
.gnavi li.current::after,
.gnavi li:hover::before,
.gnavi li:hover::after{
	width: 100%;
}

.gnavi li:hover::after{
	transition-delay: 0s;/*すぐ線を出現させる*/
}

.gnavi li:hover::before{
	transition-delay: 0.3s;/*線の出現を0.3秒遅らせる*/
}

.gnavi li.current span::before,
.gnavi li.current span::after,
.gnavi li:hover span::before,
.gnavi li:hover span::after{
	height: 100%;
}

.gnavi li:hover span::before{
	transition-delay: 0.5s;/*線の出現を0.5秒遅らせる*/
}

.gnavi li:hover span::after{
	transition-delay: 0.2s;/*線の出現を0.2秒遅らせる*/
}

投稿日：2022年07月21日

テキストが入れ替わる

カテゴリー：テキストナビゲーション

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-9.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#"><span>Home</span><span>ホーム</span></a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#"><span>About</span><span>私たちについて</span></a></li>
	<li><a href="#"><span>Service</span><span>サービス</span></a></li>
	<li><a href="#"><span>Contact</span><span>お問い合わせ</span></a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	text-decoration: none;
	color: #333;
}

.gnavi li{
	margin-bottom:20px;
}

/*==================================================
　5-3-9 テキストが入れ替わる
===================================*/

.gnavi li a{
	/*テキストの基点とするためrelativeを指定*/
	position: relative;

	/*はみ出る要素を隠す*/
	overflow: hidden;
	padding:10px 60px;
}

.gnavi li span{
	/*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:0;

	/*アニメーションの指定*/
	transition: all .5s;
	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/

	/*ブロック要素にして透過なし、テキスト折り返しなし*/  
	display: block;
	opacity:1;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
	opacity:0;/*透過0に*/
	transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
	opacity:0;/*透過0に*/
	transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2){
	opacity:1;/*不透明に*/
	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}

投稿日：2022年07月21日

円が線に変化

カテゴリー：テキストナビゲーション

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-8.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#">Home</a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#">About</a></li>
	<li><a href="#">Service</a></li>
	<li><a href="#">Contact</a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	padding:10px 30px;
	text-decoration: none;
	color: #333;
}

.gnavi li{
	margin-bottom:20px;
}

/*==================================================
　5-3-8 円が線に変化
===================================*/

.gnavi li a{
	/*円の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#0481A2;
}

.gnavi li a::after {
	content: '';

	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: 0;
	left: 0;

	/*線になる丸の形状*/
	width: 100%;
	height: 5px;
	border-radius: 50%;
	background:#0481A2;

	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0.04, 1);/*X方向0.04、Y方向1*/
	transform-origin:center bottom;/*中央下部基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
	height: 2px;/*縦幅を変化*/
	border-radius: 0;/*丸みをなくす*/    
	transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
}

投稿日：2022年07月21日

カテゴリーページ

画面全体に背景動画を流す

左右から線が伸びて枠線になる

線が伸びて枠線になる

テキストが入れ替わる

円が線に変化

アーカイブ