自分で作るテンプレート（3.レイアウト選択）

layout_c1

1カラムレイアウト。

<main> <section> <h2>mainコンテンツ</h2> <p>メインコンテンツです。</p> </section> </main>

html

layout_c2

2カラムレイアウト。900px未満で1カラムになります。

<main class="column-parts"> <div class="main-contents-parts"> <section> <h2>mainコンテンツ</h2> <p>メインコンテンツです。</p> </section> </div> <!--/.main-contents-parts--> <div class="sub-contents-parts"> <h3>subコンテンツ</h3> <p>サブコンテンツです。</p> </div> <!--/.sub-contents-parts--> </main>

html

/*sectionの上書き（左右だけ0に） ---------------------------------------------------------------------------*/ section { padding-left: 0; padding-right: 0; } /*コンテンツ ---------------------------------------------------------------------------*/ /*コンテンツブロック*/ #contents { padding: var(--content-space); /*css冒頭のcontent-spaceを読み込みます*/ } /*メイン・サブブロック設定 ---------------------------------------------------------------------------*/ /*main-contents-partsの設定*/ .main-contents-parts { margin-bottom: 30px; /*ボックスの下に空けるスペース。sub-contents-partsとの間の余白です。*/ } /*メインコンテンツの中の最初の要素の上余白をなくす*/ .main-contents-parts > *:first-child, .main-contents-parts > section:first-child > *:first-child { padding-top: 0; margin-top: 0; } /*画面幅900px以上の追加指定*/ @media screen and (min-width:900px) { /*カラムで使う為の指定*/ main.column-parts { display: flex; /*flexボックスを使う指定*/ justify-content: space-between; /*並びかたの種類の指定*/ gap: 2rem; /*main-contents-partsとsub-contents-partsの間のマージン的な隙間*/ } /*main-contents-partsの設定*/ .main-contents-parts { margin-bottom: 0; order: 2; /*並び順。数字の小さい順番に表示されます。*/ flex: 1; } /*.sub-contents-parts*/ .sub-contents-parts { width: 230px; /*幅*/ flex-shrink: 0; } /*1つ目のsub-contents*/ .sub-contents-parts:nth-child(2) { order: 1; /*並び順。数字の小さい順番に表示されます。*/ } /*2つ目のsub-contents*/ .sub-contents-parts:nth-child(3) { order: 3; /*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/ } }/*追加指定ここまで*/

css

layout_c3

3カラムレイアウト。900px未満で1カラムになります。

<main class="column-parts"> <div class="main-contents-parts"> <section> <h2>mainコンテンツ</h2> <p>メインコンテンツです。</p> </section> </div> <!--/.main-contents-parts--> <div class="sub-contents-parts"> <h3>subコンテンツ</h3> <p>サブコンテンツです。</p> </div> <!--/.sub-contents-parts--> <div class="sub-contents-parts"> <h3>subコンテンツ</h3> <p>サブコンテンツです。</p> </div> <!--/.sub-contents-parts--> </main>

html

/*sectionの上書き（左右だけ0に） ---------------------------------------------------------------------------*/ section { padding-left: 0; padding-right: 0; } /*コンテンツ ---------------------------------------------------------------------------*/ /*コンテンツブロック*/ #contents { padding: var(--content-space); /*css冒頭のcontent-spaceを読み込みます*/ } /*mainブロック設定 ---------------------------------------------------------------------------*/ /*main-contents-partsの設定*/ .main-contents-parts { margin-bottom: 30px; /*ボックスの下に空けるスペース。sub-contents-partsとの間の余白です。*/ } /*メインコンテンツの中の最初の要素の上余白をなくす*/ .main-contents-parts > *:first-child, .main-contents-parts > section:first-child > *:first-child { padding-top: 0; margin-top: 0; } /*画面幅900px以上の追加指定*/ @media screen and (min-width:900px) { /*カラムで使う為の指定*/ main.column-parts { display: flex; /*flexボックスを使う指定*/ justify-content: space-between; /*並びかたの種類の指定*/ gap: 2rem; /*main-contents-partsとsub-contents-partsの間のマージン的な隙間*/ } /*main-contents-partsの設定*/ .main-contents-parts { margin-bottom: 0; order: 2; /*並び順。数字の小さい順番に表示されます。*/ flex: 1; } /*.sub-contents-parts*/ .sub-contents-parts { width: 230px; /*幅*/ flex-shrink: 0; } /*1つ目のsub-contents*/ .sub-contents-parts:nth-child(2) { order: 1; /*並び順。数字の小さい順番に表示されます。*/ } /*2つ目のsub-contents*/ .sub-contents-parts:nth-child(3) { order: 3; /*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/ } }/*追加指定ここまで*/

css

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