イセンチュートリアルサイト | イセン印刷株式会社の調べ物の為のサイト。

アーカイブした項目

背景が流れる（中央から横全体）

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="css/7-1-5.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btn bgcenterx"><span>7-1-5 背景が流れる（中央から横全体）</span></a>

CSSの書き方

/*== ボタン共通設定 */
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;

	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;
	
	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（中央から横全体） */
.bgcenterx:before {
	content: '';

	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	/*色や形状*/
	background: #333;
	width: 100%;
	height: 100%;
    
	/*アニメーション*/
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: top;
}

/*hoverした際の形状*/
.bgcenterx:hover:before{
	transform:scale(1, 1);
}

投稿日：2022年07月14日

背景が流れる（下から上）

カテゴリー：ボタン

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="css/7-1-4.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btn bgbottom"><span>7-1-4 背景が流れる（下から上）</span></a>

CSSの書き方

/*== ボタン共通設定 */
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;

	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;

	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（下から上） */
.bgbottom:before {
	content: '';

	/*絶対配置で位置を指定*/
	position: absolute;
	bottom:0;
	left: 0;
	z-index: 2;

	/*色や形状*/
	background:  #333;/*背景色*/
	width: 100%;
	height: 0;

	/*アニメーション*/
	transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

/*hoverした際の形状*/
.bgbottom:hover:before{
	height: 100%;	
	background-color: #333;
}

投稿日：2022年07月14日

背景が流れる（上から下）

カテゴリー：ボタン

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

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

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btn bgtop"><span>7-1-3 背景が流れる（上から下）</span></a>

CSSの書き方

/*== ボタン共通設定 */
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;

	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;

	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（上から下） */
.bgtop:before {
	content: '';

	/*絶対配置で位置を指定*/
	position: absolute;
	top:0;
	left: 0;
	z-index: 2;

	/*色や形状*/
	background:  #333;/*背景色*/
	width: 100%;
	height: 0;

	/*アニメーション*/
	transition:.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

/*hoverした際の形状*/
.bgtop:hover:before{
	height: 100%;	
	background-color: #333;
}

投稿日：2022年07月14日

背景が流れる（右から左）

カテゴリー：ボタン

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="css/7-1-2.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btn bgright"><span>7-1-2 背景が流れる（右から左）</span></a>

CSSの書き方

/*== ボタン共通設定 */
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;

	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #555;/* ボーダーの色と太さ */
	padding: 10px 30px;
	text-align: center;
	outline: none;

	/*アニメーションの指定*/   
	transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#333;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（右から左） */
.bgright:before {
	content: '';

	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	/*色や形状*/
	background:  #333;/*背景色*/
	width: 100%;
	height: 100%;

	/*アニメーション*/
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: left top;
}

/*hoverした際の形状*/
.bgright:hover:before{
	transform-origin:right top;
	transform:scale(1, 1);
}

投稿日：2022年07月14日

2つの画像の動きを対比させて見せる

カテゴリー：スライド

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="httpss://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="css/6-1-9.css">
</head>

body内のスライドを表示させたい場所にHTMLを記載します。

<div class="slider">
	<ul class="slider-top">
		<li class="slider-item slider-item01"></li>
		<li class="slider-item slider-item02"></li>
		<li class="slider-item slider-item03"></li>
	</ul>
	<ul class="slider-bottom" dir="rtl"><!--/スライダの表示方向を左⇒右に変更するためにdir="rtl"を追加-->
		<li class="slider-item slider-item04"></li>
		<li class="slider-item slider-item05"></li>
		<li class="slider-item slider-item06"></li>
	</ul>
<!--/slider--></div>

body 終了タグ直前に jQuery、slick、動きを制御する自作のJS の3 つを読み込みます。

<script src="httpss://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="httpss://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--自作のJS-->
<script src="js/6-1-9.js"></script>
</body>

CSSの書き方

/*==================================================
スライダーのためのcss
===================================*/
.slider {
	position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

.slider-top,
.slider-bottom {
	height: 50vh;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}

/*　背景画像設定　*/
.slider-item01 {
	background:url(../img/img_01.jpg);
}

.slider-item02 {
	background:url(../img/img_02.jpg);
}

.slider-item03 {
	background:url(../img/img_03.jpg);
}

.slider-item04 {
	background:url(../img/img_04.jpg);
}

.slider-item05 {
	background:url(../img/img_05.jpg);
}

.slider-item06 {
	background:url(../img/img_06.jpg);
}

.slider-item {
	width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
	height:50vh;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
	background-repeat: no-repeat;/*背景画像をリピートしない*/
	background-position: center;/*背景画像の位置を中央に*/
	background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

JSの書き方

//スライド上の設定
$('.slider-top').slick({
	accessibility: false,// 左右矢印ボタンでの切り替えなし
	arrows: false,//左右矢印ボタン表示なし
	autoplay: true,//自動的に動き出すか。初期値はfalse。
	pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
	pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
	slidesToShow: 1,//スライドを画面に1枚見せる
	slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
	swipe: false,//タッチスワイプに対応しない
});

//スライド下の設定
$('.slider-bottom').slick({
	accessibility: false,// 左右矢印ボタンでの切り替えなし
	arrows: false,//左右矢印ボタン表示なし
	autoplay: true,//自動的に動き出すか。初期値はfalse。
	pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
	pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
	slidesToShow: 1,//スライドを画面に1枚見せる
	slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
	swipe: false,//タッチスワイプに対応しない
	rtl: true,//スライダの表示方向を左⇒右に変更する
});

投稿日：2022年07月14日

ホーム

アーカイブした項目

背景が流れる（中央から横全体）

背景が流れる（下から上）

背景が流れる（上から下）

背景が流れる（右から左）

2つの画像の動きを対比させて見せる

アーカイブ