自分で組み立てるテンプレート

※2024年5月最新バージョン版。

STEP2:レイアウトを選択します。

htmlは、contentsの中に貼り付けて下さい。
cssは、style.cssファイル内に貼り付けて下さい。

layout_c1

1カラムレイアウト。

<main> mainコンテンツ </main>

html

/*mainブロック設定 ---------------------------------------------------------------------------*/ /*mainブロックの設定*/ main { margin: 2rem 0; /*ブロックの外側（上下、左右）に空けるスペース*/ }

css

layout_c2

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

<main class="column-parts"> <div class="main-contents-parts"> メインコンテンツ </div> <!--/.main-contents-parts--> <div class="sub-contents-parts"> サブコンテンツ </div> <!--/.sub-contents-parts--> </main>

html

/*mainブロック設定 ---------------------------------------------------------------------------*/ /*mainブロックの設定*/ main { margin: 2rem 0; /*ブロックの外側（上下、左右）に空けるスペース*/ } /*main-contents-partsの設定*/ .main-contents-parts { margin-bottom: 30px; /*ボックスの下に空けるスペース。sub-contents-partsとの間の余白です。*/ } /*画面幅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; /*幅*/ } /*1つ目のsub-contents*/ .sub-contents-parts:nth-child(2) { order: 1; /*並び順。数字の小さい順番に表示されます。*/ } }/*追加指定ここまで*/

css

layout_c3

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

<main class="column-parts"> <div class="main-contents-parts"> メインコンテンツ </div> <!--/.main-contents-parts--> <div class="sub-contents-parts"> サブコンテンツ </div> <!--/.sub-contents-parts--> <div class="sub-contents-parts"> サブコンテンツ </div> <!--/.sub-contents-parts--> </main>

html

/*mainブロック設定 ---------------------------------------------------------------------------*/ /*mainブロックの設定*/ main { margin: 2rem 0; /*ブロックの外側（上下、左右）に空けるスペース*/ } /*main-contents-partsの設定*/ .main-contents-parts { margin-bottom: 30px; /*ボックスの下に空けるスペース。sub-contents-partsとの間の余白です。*/ } /*画面幅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; /*幅*/ } /*1つ目のsub-contents*/ .sub-contents-parts:nth-child(2) { order: 1; /*並び順。数字の小さい順番に表示されます。*/ } /*2つ目のsub-contents*/ .sub-contents-parts:nth-child(3) { order: 3; /*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/ } }/*追加指定ここまで*/

css

NEXT: パーツ選択