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

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

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

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

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

background1

background2

background3

background4

background5

background6

background7

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

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

background1

background2

background3

background4

background5

background6

background7

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート