自分で組み立てるテンプレート｜サブコンテンツ専用パーツ

バックグラウンド専用パーツ

パーツの「外側」に使う背景用パーツです。階層を間違えると余白がおかしくなるので注意して下さい。

background-wave1

波(ウェーブ)が動く背景用アニメーション。

html

/*波のアニメーション
---------------------------------------------------------------------------*/
/*波を囲む全体のブロック*/
.wave1-section-parts {
	position: relative;
	padding: calc(80px - 1px) 0px;
}

/*波の色（２つとも揃えておけばOK）*/
.wave1-section-parts .text-parts {
	background: #a3c8f6;
}
.wave1-section-parts .wave-wrap-parts use {
	fill: #a3c8f6;
}

/*上下の波（共通）*/
.wave1-section-parts .wave-parts {
	position: absolute;
	left: 0;
	width: 100%;
	height: 80px;	/*波の高さ。ここを変更する場合は上の.wave1-section-partsのpaddingの行にある80の数字も合わせて変更して下さい。*/
}
.wave1-section-parts .wave-parts svg {
	display: block;
	width: 100%;
	height: 100%;
}
.wave1-section-parts .wave-parts .wave-wrap-parts {
	transform-box: fill-box;
	transform-origin: 0 0;
	animation: move-wave 10s linear infinite;	/*ここの10の数字で速度調整できます*/
}

@keyframes move-wave {
0% { transform: translateX(0); }
100%   { transform: translateX(-50%); }
}

/*上の波*/
.wave1-section-parts .wave-top-parts {
	top: 0;
}
/*下の波*/
.wave1-section-parts .wave-bottom-parts {
	bottom: 0;
	transform: rotate(180deg);
}

css

background1

シンプルな単色。cssで色変更できます。

html

css

background2

２色グラデーション。cssで色変更できます。

html

css

background3

３色グラデーション。cssで色変更できます。

html

css

background4

複雑なグラデーション。MESHERを使用して簡単にcssを書き出しています。

html

css

background5

背景パターンを使ったタイプです。

html

css

background6

ななめになった背景です。

html

/*背景
---------------------------------------------------------------------------*/
.background6-parts {
	position: relative;
	background: #eee;	/*背景色*/
	color: #555;		/*文字色*/
	padding-top: 5vw;		/*ボックス内の上に空ける余白。お好みで調整して下さい。*/
	padding-bottom: 5vw;	/*ボックス内の下に空ける余白。お好みで調整して下さい。*/
	margin-top: 10vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
	margin-bottom: 10vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
}
.background6-parts a {
	color: inherit;
}

/*以下のheightの行が傾斜の角度です。vwという単位は画面幅に対してで、画面幅100%＝100vwになります。
つまり、画面幅に対して常に同じ傾斜具合になります。1pxの数字は時々隙間が発生するのでそれを防ぐ為の措置です。
傾斜（height）を変更したい場合は、下にある「.background6-parts::before」のtopと「.background6-parts::after」のbottomの数字も変更。*/
.background6-parts::before, .background6-parts::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: #eee;	/*背景色。上の.background6-partsのbackgroundと揃える。*/
}

.background6-parts::before {
	top: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 100%, 100% 0, 100% 100%);	/*三角形の形を作っています*/
}

.background6-parts::after {
	bottom: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
}

css

background7

背景画像を読み込むタイプ。

html

css

バックグラウンド専用パーツ

background-wave1

background1

background2

background3

background4

background5

background6

background7

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

バックグラウンド専用パーツ

background-wave1

background1

background2

background3

background4

background5

background6

background7

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート