レイアウトの選択｜Template Party

レイアウトの選択

htmlコードは、既存のmainと丸ごと置き換えて下さい。
cssは、style.cssファイル末尾に貼り付けて下さい。

レイアウト一覧

layout-1c

1カラムレイアウト。こちらはデフォルトのフレームに組み込まれているのでコピペ作業は不要です。

layout-2c

2カラムレイアウト。ウィンドウ幅〜599pxまでは1カラム、600px以上は2カラム。

html

css

layout-3c

3カラムレイアウト。ウィンドウ幅〜899pxまでは1カラム、900px以上は3カラム。

html

/* contents
---------------------------------------------------------------------------*/
#contents {
	margin: 1rem;	/*1文字分のスペースを空ける。*/
}

/* 各エリア（念のため） */
#contents .main  { grid-area: main;  min-width: 0; }
#contents .side  { grid-area: side;  min-width: 0; }
#contents .side2 { grid-area: side2; min-width: 0; }

/* ベース：1カラム（〜899px） */
#contents .contents-layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"side"
		"side2";
	gap: 1rem;
	align-items: start;
}

/*画面幅900px以上の追加指定。3カラムに（side / main / side2）*/
	@media (min-width: 900px) {

#contents .contents-layout {
		grid-template-areas: "side main side2";

/* 左右：140〜200 の範囲でじわっと変動（画面幅基準） */
		grid-template-columns:
			clamp(140px, 18vw, 200px) minmax(0, 1fr) clamp(140px, 18vw, 200px);
	}

}/*追加指定ここまで*/

/*sideとside2
---------------------------------------------------------------------------*/

/*画面幅900px以上で文字サイズを少し小さく*/
	@media (min-width: 900px) {
	
	.side, .side2 {
		font-size: 0.9rem;
	}
	
	}/*追加指定ここまで*/

/*main
---------------------------------------------------------------------------*/
.main section {
	padding-left: 0;
	padding-right: 0;
}
.main > section:first-child {
	margin-top: 0;
}

css

下準備はこれで完了です。
あとは左メニューから使いたいパーツを選んで下さい。

レイアウトの選択