自分で組み立てるテンプレート｜一覧ページ向けパーツ

一覧コーナー向けパーツ

list-c2

左右２カラムレイアウトです。LPの問い合わせなどに。

html

/*list-c2-parts（お問い合わせ、オンラインショップ）
---------------------------------------------------------------------------*/
.list-c2-parts > a {
    text-decoration: none;
    display: block;
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*２つのボックスを囲むボックス*/
	.list-c2-parts {
		display: flex;	/*横並びにする*/
	}

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

/*ボックス１個あたり*/
.list-c2-parts .list-parts {
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: #fff;		/*文字色*/
	padding: 5rem 2rem;	/*上下、左右へのボックス内の余白*/
	margin: 1rem 0;		/*上下、左右へのマージン*/
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.list-c2-parts > * {
		flex: 1;
	}
	.list-c2-parts .list-parts {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-c2-parts > a .list-parts {
		height: 100%;
	}

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

/*左側ボックスの背景*/
.list-c2-parts .list-parts.image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.list-c2-parts .list-parts.image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.list-c2-parts h4 {
	font-weight: 200;	/*細字にする*/
	line-height: 1.2;	/*行間を狭く*/
}

/*h4見出し内のメインテキスト（main-text-parts）*/
.list-c2-parts h4 .main-text-parts {
	display: block;
	font-size: 3rem;		/*文字サイズ。3倍。*/
	padding-top: 1.5rem;	/*上に空ける余白*/
	padding-bottom: 3rem;	/*下に空ける余白*/
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

.list-c2-parts h4 .main-text-parts {
		font-size: 4rem;	/*文字サイズ。4倍。*/
	}

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

/*h4見出し内のサブテキスト（sub-text-parts）*/
.list-c2-parts h4 .sub-text-parts {
	position: relative;
	padding: 0 5rem;	/*上下、左右への余白設定ですが、両サイドのラインの配置にも影響します。お好みで。*/
}
/*h4見出し内のサブテキストの左右のライン*/
.sub-text-parts::before {left: 0;}
.sub-text-parts::after {right: 0;}
.list-c2-parts h4 .sub-text-parts::before,.list-c2-parts h4 .sub-text-parts::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2rem;	/*線の長さ*/
	border-top: 1px solid #fff;	/*ラインの幅、線種、色*/
}

/*見出しの下の説明テキスト*/
.list-c2-parts .list-parts .text-parts {
	position: relative;z-index: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.list-c2-parts .list-parts::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.list-c2-parts .list-parts:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

css

list-normal2

縦にいくつでも並べて使えます。

<h2>list-normal2</h2>

<ul class="disc">
<li>背景画像はcssで設定します。</li>
<li>デフォルトだとテキストブロックは左側に配置されます。逆にしたい場合（下の「鳥シリーズ」）は<br>
text-parts<br>
を<br>
text-parts reverse-parts<br>
にすればOKです。「reverse-parts」がつくことで配置が逆になります。お好みで使い分けて下さい。</li>
<li>外側の余白をなくしたい場合は<a href="https://template-party.com/parts/manual.html">こちらのマニュアル</a>をご覧下さい。</li>
</ul>

<h3><span class="large-parts">花</span>シリーズ<span>Series Title</span></h3>
<p>ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。</p>
<p class="btn-parts"><a href="#">View More</a></p>

</div>

<h3><span class="large-parts">鳥</span>シリーズ<span>Series Title</span></h3>
<p>ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。</p>
<p class="btn-parts"><a href="#">View More</a></p>

</div>

<h3><span class="large-parts">風</span>シリーズ<span>Series Title</span></h3>
<p>ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。ここに説明文を入れます。サンプルテキスト。</p>
<p class="btn-parts"><a href="#">View More</a></p>

</div>

</section>

html

/*parts-list-normal2
---------------------------------------------------------------------------*/
/*１枚目の写真*/
.parts-list-normal2.image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*２枚目の写真*/
.parts-list-normal2.image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*３枚目の写真*/
.parts-list-normal2.image3-parts {
	background: url("../images/3.jpg") no-repeat center center / cover;
}

/*ボックス１個あたり*/
.parts-list-normal2 {
	padding: 5vw;	/*ボックス内の余白。画面幅100%＝100vwです。*/
	position: relative;
	overflow-x: hidden;
	margin-bottom: 1vw;	/*下に空けるスペース。ボックス同士の隙間です。*/
}

/*マウスオン用のアニメーション*/
.parts-list-normal2::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.parts-list-normal2:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*テキストブロック*/
.parts-list-normal2 .text-parts {
	position: relative;z-index: 1;
	width: 80%;		/*幅*/
	height: 100%;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

/*テキストブロック*/
	.parts-list-normal2 .text-parts {
		width: 40%;		/*幅*/
	}

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

/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.parts-list-normal2 .text-parts.reverse-parts {
	margin-left: auto;
}

/*parts-list-normal2内のh3見出し*/
.parts-list-normal2 h3 {
	margin: 0;padding: 0;
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 2rem;		/*文字サイズを200%*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 1.2;		/*行間を狭くする*/
}

/*parts-list-normal2内のh3見出し内の１文字目の大きな文字*/
.parts-list-normal2 h3 .large-parts {
	font-size: 7rem;	/*文字サイズを7倍*/
}

/*見出しの右上にある英語の小さな文字*/
.parts-list-normal2 h3 span:not(.large-parts) {
	font-size: 1rem;	/*文字サイズを標準に戻す*/
	opacity: 0.5;		/*透明度50%*/
	position: absolute;
	right: 0px;	/*右からの配置場所*/
	top: 0px;	/*上からの配置場所*/
}

/*ボタン
---------------------------------------------------------------------------*/
.parts-list-normal2 .btn-parts a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;		/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.parts-list-normal2 .btn-parts a:hover {
	letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}
.parts-list-normal2:hover .btn-parts a {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}

css

list-grid1

3カラムレイアウト。画面幅が800px未満で2カラムに、500px未満で1カラムになります。

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4><a href="#">ここにタイトルを入れます</a></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
<span class="icon-bg1-parts">NEW</span>
</div>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
<span class="icon-bg2-parts">UP</span>
</div>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<span class="icon-bg2-parts">UP</span>
</div>

<div class="list-parts">
<div class="text-parts">
<h4><a href="#">ここにタイトルを入れます</a></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<span class="icon-bg1-parts">NEW</span>
</div>

<div class="list-parts">
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
<span class="icon-bg2-parts">UP</span>
</div>

<div class="list-parts">
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list-grid1-parts
---------------------------------------------------------------------------*/
.list-grid1-parts .list-parts * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid1-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
    display: grid;
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

/*ブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

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

/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

/*ブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

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

/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}

/*ボタン
---------------------------------------------------------------------------*/
.list-grid1-parts .btn-parts a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: #555;		/*背景色*/
	color: #fff;			/*文字色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}

/*アイコン
---------------------------------------------------------------------------*/
/*共通*/
.list-grid1-parts .icon-bg1-parts,
.list-grid1-parts .icon-bg2-parts {
	overflow: hidden;
	position: absolute;
	left: -15px;	/*左からの配置場所*/
	top: -15px;		/*上からの配置場所*/
	font-size: 0.7rem;	/*文字サイズ。70%*/
	width: 4em;			/*幅*/
	line-height: 4em;	/*高さ*/
	text-align: center;	/*テキストをセンタリング*/
	border-radius: 50%;	/*円形にする*/
}

/*icon-bg1-parts（サンプルだと「NEW」）*/
.list-grid1-parts .icon-bg1-parts {
	background: #ff3535;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*icon-bg2-parts（サンプルだと「UP」）*/
.list-grid1-parts .icon-bg2-parts {
	background: #358bff;	/*背景色*/
	color: #fff;			/*文字色*/
}

css

list-grid2

画像とテキストの2カラムのレイアウトが2列になっています。画面幅が600px未満で1列になります。

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

</div>

</section>

html

/*list-grid1-parts, list-grid2-parts 共通
---------------------------------------------------------------------------*/
/*list-partsブロック全体を囲むブロック*/
.list-grid1-parts,.list-grid2-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts,.list-grid2-parts .list-parts {
    display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-parts .list-parts *,
.list-grid2-parts .list-parts * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1-parts .list-parts p,
.list-grid2-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*list-grid2-parts
---------------------------------------------------------------------------*/

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

/*listブロック全体を囲むブロック*/
	.list-grid2-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

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

/*ボックス１個あたり*/
.list-grid2-parts .list-parts {
	grid-template-columns: 100px 1fr;	/*１つ目（この場合はfigure要素）を100pxに、２つ目（この場合はtextブロック））を残った幅で使う*/
	gap: 1rem;				/*ブロックの間に空けるマージン的な指定*/
	align-items: center;	/*画像とテキストブロックについて、天地の中央で揃えるようにする。この１行を削除すると、上に揃う。*/
	margin-bottom: 1rem;
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

/*ボックス１個あたり*/
	.list-grid2-parts .list-parts {
		margin-bottom: 0;
	}

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

css

list-grid3

タイトルと価格をセット表示するレイアウト。画面幅が600px未満で1列になります。

html

/*list-grid3
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.list-grid3 {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;	/*２列のうち、左は内容に応じて自動、残りを右側に割り当て*/
}

/*メニュータイトルと価格の共通設定*/
dl.list-grid3 dt, dl.list-grid3 dd {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 1rem;					/*要素内の余白*/
}

/*1つ目のdt（メニュータイトル）と、1つ目のdd（価格）*/
dl.list-grid3 dt:nth-of-type(1), dl.list-grid3 dd:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*価格*/
dl.list-grid3 dd {
	text-align: right;		/*テキストを右寄せする*/
	white-space: nowrap;	/*改行させない*/
}

/*画面幅600px以上の設定*/
	@media screen and (min-width:600px){
	
	/*ボックス全体*/
	dl.list-grid3 {
		grid-template-columns: repeat(2, auto 1fr);	/*上の「auto 1fr」を２回続ける。つまり「auto 1fr auto 1fr」と同じ意味。*/
	}
	
	/*2つ目のdt（メニュータイトル）と、2つ目のdd（価格）への追加*/
	dl.list-grid3 dt:nth-of-type(2), dl.list-grid3 dd:nth-of-type(2) {
		border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
	}

/*奇数番目のdd（価格）*/
	dl.list-grid3 dd:nth-of-type(odd) {
		margin-right: 2rem;	/*右側にスペースを作る。左右にメニューが並んだ場合の間のマージンです。*/
	}

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

css

list-grid4

枠がうねうね動く3カラムレイアウト。画面幅が800px未満で2カラムに、500px未満で1カラムになります。

<h2 class="c">list-grid4<br>画像のアスペクト比そのまま</h2>
<p class="c">mask1、mask2、mask3、の３パターンのうねうね枠です。<br>
500px以上で2列に、800px以上で3列になります。設定はcssで。</p>

<div class="list-parts">
<figure><img src="images/1.jpg" alt="" class="mask1"></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt="" class="mask2"></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt="" class="mask3"></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

<h2 class="c">画像のアスペクト比を1:1に</h2>
<p class="c">長方形だと形が微妙なので、強制的に円形にするタイプも用意しています。<br>
使い分けは簡単で、外側のブロックの<br>
「list-grid4-parts」を「list-grid4-parts square」にするだけです。</p>

</div>

</section>

html

/*maskのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes mask1 {  
0%, 100% {border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;}
50% {border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;}
}

@keyframes mask2 {  
0%, 100% {border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;}
50% {border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;}
}

@keyframes mask3 {  
0%, 100% {border-radius: 56% 44% 47% 53% / 55% 37% 63% 45%;}
50% {border-radius: 45% 55% 40% 60% / 44% 63% 37% 56%;}
}

/*maskスタイル
---------------------------------------------------------------------------*/
/*mask1*/
.mask1 {
	animation: mask1 12s linear infinite;
}

/*mask2*/
.mask2 {
	animation: mask2 8s linear infinite;
}

/*mask3*/
.mask3 {
	animation: mask3 10s linear infinite;
}

/*list-grid4
---------------------------------------------------------------------------*/
.list-grid4-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid4-parts .list-parts {
	display: grid;
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を目一杯使う*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のp要素*/
.list-grid4-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid4-parts .list-parts figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース。1文字分。*/
}
.list-grid4-parts .list-parts figure img {
	box-shadow: 10px 10px 0px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかし幅、最後は色の指定で0,0,0は黒の事で、0.05は色が5%出た状態。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid4-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}

.list-grid4-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

/*ブロック全体を囲むブロック*/
	.list-grid4-parts {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3rem;	/*ブロックの間に空けるマージン的な指定。３文字分。*/
	}

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

/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

/*ブロック全体を囲むブロック*/
	.list-grid4-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

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

css

list-grid5

角丸の3カラムレイアウト。画面幅が800px未満で2カラムに、500px未満で1カラムになります。

<h2 class="c">list-grid5<br>画像のアスペクト比そのまま</h2>
<p class="c">500px以上で2列に、800px以上で3列になります。設定はcssで。</p>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<div class="text-parts">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

<h2 class="c">画像のアスペクト比を1:1に</h2>
<p class="c">強制的に正方形にするタイプも用意しています。<br>
画像自体の縦横比はそのままで、中央だけくり抜かれる感じです。<br>
使い分けは簡単で、外側のブロックの<br>
「list-grid5-parts」を「list-grid5-parts square」にするだけです。</p>

</div>

</section>

html

/*list-grid5
---------------------------------------------------------------------------*/
.list-grid5-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid5-parts .list-parts {
	display: grid;
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を目一杯使う*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のp要素*/
.list-grid5-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid5-parts .list-parts figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース。1文字分。*/
}
.list-grid5-parts .list-parts figure img {
	box-shadow: 10px 10px 0px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかし幅、最後は色の指定で0,0,0は黒の事で、0.05は色が5%出た状態。*/
	border-radius: 30px;	/*角を丸くするサイズ。丸くしたくなければこの１行を削除。*/
	overflow: hidden;
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid5-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid5-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

/*ブロック全体を囲むブロック*/
	.list-grid5-parts {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3rem;	/*ブロックの間に空けるマージン的な指定。３文字分。*/
	}

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

/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

/*ブロック全体を囲むブロック*/
	.list-grid5-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

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

css

list-grid6

円形の3カラムレイアウト。画面幅が800px未満で2カラムに、500px未満で1カラムになります。

<h2 class="c">list-grid6<br>画像のアスペクト比そのまま</h2>
<p class="c">500px以上で2列に、800px以上で3列になります。設定はcssで。</p>

</div>

<h2 class="c">画像のアスペクト比を1:1に</h2>
<p class="c">長方形だと形が微妙なので、強制的に正方形にするタイプも用意しています。<br>
画像自体の縦横比はそのままで、中央だけくり抜かれる感じです。<br>
使い分けは簡単で、外側のブロックの<br>
「list-grid6-parts」を「list-grid6-parts square」にするだけです。</p>

</div>

</section>

html

/*list-grid6
---------------------------------------------------------------------------*/
.list-grid6-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid6-parts .list-parts {
	display: grid;
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を目一杯使う*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のp要素*/
.list-grid6-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid6-parts .list-parts figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース。1文字分。*/
	border-radius: 50%;		/*角を丸くする指定。正方形が土台なら正円になります。*/
	overflow: hidden;
}
.list-grid6-parts .list-parts figure img {
	box-shadow: 10px 10px 0px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかし幅、最後は色の指定で0,0,0は黒の事で、0.05は色が5%出た状態。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid6-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid6-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

/*ブロック全体を囲むブロック*/
	.list-grid6-parts {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3rem;	/*ブロックの間に空けるマージン的な指定。３文字分。*/
	}

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

/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

/*ブロック全体を囲むブロック*/
	.list-grid6-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

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

css

list-grid7

アイコンをメインにした3カラムレイアウト。画面幅が500px未満で1カラムになります。

<p class="c"><a href="https://template-party.com/parts/_code/list/grid7/parts/images/icon.zip">アイコン画像をダウンロード</a>し、<br>
imagesフォルダ内に入れてからプレビューして下さい。</p>

<h2 class="c">list-grid7<br>画像のアスペクト比そのまま</h2>
<p class="c">800px以上で3列に、それ未満は1列になります。設定はcssで。</p>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list-parts">
<figure><img src="images/icon1.png" alt=""></figure>
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list-parts">
<figure><img src="images/icon2.png" alt=""></figure>
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

<div class="list-parts">
<figure><img src="images/icon3.png" alt=""></figure>
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
</div>

</div>

<h2 class="c">画像のアスペクト比を1:1に</h2>
<p class="c">長方形だと形が微妙なので、強制的に正方形にするタイプも用意しています。<br>
画像自体の縦横比はそのままで、中央だけくり抜かれる感じです。<br>
使い分けは簡単で、外側のブロックの<br>
「list-grid7-parts」を「list-grid7-parts square」にするだけです。</p>

</div>

</section>

html

/*list-grid7
---------------------------------------------------------------------------*/
.list-grid7-parts .list-parts * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid7-parts {
	padding-top: 20px;	/*画像が少し上にずれるので適当に余白を確保*/
}

/*ボックス１個あたり*/
.list-grid7-parts .list-parts {
    display: grid;
	position: relative;
	border-radius: 5px;		/*角を少しだけ丸く*/
	background: #fafafa;	/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のh4見出し*/
.list-grid7-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.5rem;	/*下に0.5文字分の余白を空ける*/
}

/*ボックス内のp要素*/
.list-grid7-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid7-parts .list-parts figure {
	margin: 0 auto;
	width: 100px;			/*画像サイズ*/
	margin-top: -40px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: #fed720;	/*背景色。画像に透過部分がある場合に見えます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid7-parts.square .list-parts figure {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid7-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

/*ブロック全体を囲むブロック*/
	.list-grid7-parts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 2rem	/*ブロックの間に空けるマージン的な指定。２文字分。*/
	}

/*ボックス内のfigure画像*/
	.list-grid7-parts .list-parts figure {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

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

css

list-half1

テキストと画像の2カラムのレイアウト。900px未満で1カラムになります。

html

/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
}

/*画像ブロック共通*/
.list-half-parts .image-l-parts img, .list-half-parts .image-r-parts img {
	border-radius: 50px;	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

/*２カラムを囲むブロック*/
		.list-half-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 50%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

/*テキストブロック*/
		.list-half-parts .text-parts {
			flex: 1;
		}

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

css

list-normal1

横長レイアウト。不動産や求人など、掲載情報が多いサイト向け。

<h2>list-normal1</h2>

<div class="list-parts">
	<figure><img src="images/1.jpg" alt=""></figure>
	<div>
	<h4>ここにタイトルを入れます。</h4>
		<dl class="line-parts">
		<dt>求人ナンバー</dt>
		<dd>No.XXX</dd>
		<dt>企業名</dt>
		<dd>サンプルカンパニー</dd>
		<dt>給与・時給</dt>
		<dd>時給1,100円〜　研修期間：時給800円</dd>
		<dt>勤務地</dt>
		<dd>千葉市中央区</dd>
		<dt>勤務時間</dt>
		<dd>19:00〜　1日3時間程度</dd>
		</dl>
	</div>
</div>

<div class="list-parts">
	<div>
	<h4>ここにタイトルを入れます。</h4>
		<dl class="line-parts">
		<dt>求人ナンバー</dt>
		<dd>No.XXX</dd>
		<dt>企業名</dt>
		<dd>サンプルカンパニー</dd>
		<dt>給与・時給</dt>
		<dd>時給1,100円〜　研修期間：時給800円</dd>
		<dt>勤務地</dt>
		<dd>千葉市中央区</dd>
		<dt>勤務時間</dt>
		<dd>19:00〜　1日3時間程度</dd>
		</dl>
	</div>
</div>

</div>

</section>

html

/*横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal1-parts .list-parts {
	display: flex;	/*flexボックスを使う指定*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 25px 0;	/*上下、左右へのボックス内の余白*/
	position: relative;
}

.list-normal1-parts .list-parts div {
	flex: 1;
}

/*１つ目のボックスにのみ上に線を入れる*/
.list-normal1-parts .list-parts:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*ボックス内のfigure画像*/
.list-normal1-parts .list-parts figure {
	width: 20%;			/*画像の幅*/
	margin-right: 20px;	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-normal1-parts .list-parts h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 10px;	/*下に少し余白を作る*/
	color: #333;			/*文字色*/		
}
.list-normal1-parts .list-parts h4 a  {
	color: inherit;
}

/*ボックス内のpタグ*/
.list-normal1-parts .list-parts p {
	margin: 0;
	font-size: 0.7em;		/*文字サイズを親要素の70%に。*/
}

/*list内のtableっぽく見える所
---------------------------------------------------------------------------*/
/*ボックス全体*/
.list-normal1-parts dl.line-parts {
	grid-template-columns: repeat(2, auto 1fr);	/*２列にする（各ボックスは、左は内容に応じて自動、残りを右側に割り当て）*/
}

/*ボックス一個あたり*/
dl.line-parts {
	margin: 0;
	display: grid;						/*gridボックスを使う指定*/
	grid-template-columns: auto 1fr;	/*左は内容に応じて自動、残りを右側に割り当て*/
	font-size: 0.7em;					/*文字サイズを親要素の70%に。*/
	border-top: 1px solid #ccc;			/*上の線の幅、線種、色*/
}

dl.line-parts dt, dl.line-parts dd {
	border-bottom: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 0 0.5rem;				/*上、左右への余白*/
}
dl.line-parts dt {
	background: #eee;	/*背景色*/
}

css

一覧コーナー向けパーツ

list-c2

list-normal2

list-grid1

list-grid2

list-grid3

list-grid4

list-grid5

list-grid6

list-grid7

list-half1

list-normal1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

一覧コーナー向けパーツ

list-c2

list-normal2

list-grid1

list-grid2

list-grid3

list-grid4

list-grid5

list-grid6

list-grid7

list-half1

list-normal1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート