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

parts_slide_css1

画像を直接htmlに配置したタイプのcssスライドショーです。

htmlをコピー

/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1-parts {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2-parts {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3-parts {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*スライドショーの設定
---------------------------------------------------------------------------*/
/*スライドショー画像を囲むブロック*/
.mainimg-css-parts {
	position: relative;
}

/*画像１枚あたりの共通設定*/
.slide1-parts,
.slide2-parts,
.slide3-parts {
	width: 100%;height: auto;
	animation-duration: 12s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;
	animation-fill-mode: both;
	animation-delay: 1s;	/*1秒してからアニメーションを開始。初動にガタつきが出やすいので、少しでもふせぐ為。*/
}

/*slide1-partsへの追加設定。*/
.slide1-parts {
	position: relative;
	animation-name: slide1-parts;	/*上で設定しているキーフレーム（keyframes）の名前*/
}

/*slide2-partsへの追加設定*/
.slide2-parts {
	animation-name: slide2-parts;	/*上で設定しているキーフレーム（keyframes）の名前*/
}

/*slide3-partsへの追加設定*/
.slide3-parts {
	animation-name: slide3-parts;	/*上で設定しているキーフレーム（keyframes）の名前*/
}

cssをコピー

parts_slide_css_bg1

cssのbackground(背景画像)を使ったスライドショーです。

htmlをコピー

/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1-parts {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2-parts {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3-parts {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*スライドショー（cssでのbackground使用）
ここでは、16:9の画像比率（9÷16=0.5625）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.mainimgのpadding-topの数字を変更します。2:1にするなら50%です。
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.mainimg-css-bg-parts {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-css-bg-parts .slide1-parts, .mainimg-css-bg-parts .slide2-parts, .mainimg-css-bg-parts .slide3-parts {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	text-indent: -9999px;
}

/*１枚目画像*/
.mainimg-css-bg-parts .slide1-parts {
	animation: slide1-parts 15s linear infinite, opa1 1s linear;
	background: url(../images/1.jpg) no-repeat center center/cover;
}

/*２枚目画像*/
.mainimg-css-bg-parts .slide2-parts {
	animation: slide2-parts 15s linear infinite;
	background: url(../images/2.jpg) no-repeat center center/cover;
}

/*３枚目画像*/
.mainimg-css-bg-parts .slide3-parts {
	animation: slide3-parts 15s linear infinite;
	background: url(../images/3.jpg) no-repeat center center/cover;
}

cssをコピー

parts_slide_slick1

slick(解説)を使ったスライドショーです。
>> 配布中のテンプレに配置したい場合

htmlをコピー

#contents * {min-width : 0;}

/*メイン画像スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg-slick-parts ul {margin: 0 !important;}

/*slickの簡易チラつき対策（slick共通）*/
.slick-slide {
  will-change: transform;
}

/*画像を囲むブロック*/
.mainimg-slick-parts {
	margin-bottom: 80px;	/*画像の下に空けるスペース*/
}

/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;	/*下からの配置場所指定。ボタンを画像の下に移動します。*/
}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #ccc;		/*背景色。白。*/	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
	background: #ff0000;	/*背景色*/
}

cssをコピー

parts_slide_vegas1

vegas(解説)を使ったスライドショーです。
>> 配布中のテンプレに配置したい場合

htmlをコピー

cssをコピー

parts_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>
</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>

<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><a href="#">ここにタイトルを入れます</a></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

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

</div>

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

</div>

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

</div>

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

</div>

</div>

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-grid1-parts
---------------------------------------------------------------------------*/

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

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

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

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

/*listブロック全体を囲むブロック*/
	.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;		/*背景色*/
    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: #eee;		/*背景色*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}

cssをコピー

parts_list_grid2

画像とテキストの2カラムのレイアウトが2列になっています。画面幅が600px未満で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>

</div>

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

</div>

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

</div>

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

</div>

</div>

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をコピー

parts_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をコピー

parts_list_normal1

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

<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>

htmlをコピー

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

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

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

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

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

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

/*list内のtableっぽく見える所
---------------------------------------------------------------------------*/
/*ボックス全体*/
.list-normal-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をコピー

parts_lightbox1

画面が暗転し、ポップアップが開くlightbox(解説)です。
>> 配布中のテンプレに配置したい場合

<p>ここのサムネイル画像は、長方形であっても正方形にトリミングされるようになっています。<br>
リンク（aタグ）を指定しないと画像が表示されないので注意して下さい。<br>
もし、ポップアップ（aタグ）を一切使わずサムネイルだけ出しておきたいなら、aタグをdivタグに置き換えて、style.cssの<br>
.list-square-parts .list-parts aを、.list-square-parts .list-parts divにすればOKです。</p>

</div>

htmlをコピー

cssをコピー

parts_table1

テーブルレイアウト。

htmlをコピー

cssをコピー

parts_table2

テーブルレイアウト。

htmlをコピー

cssをコピー

parts_table3

テーブルレイアウト。

htmlをコピー

cssをコピー

parts_news1

「お知らせ」向けレイアウトです。

htmlをコピー

/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new-parts1 dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new-parts1 dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 1rem;		/*上下、左右へのブロック内の余白*/
	width: 6rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: #eee;		/*背景色*/
	color:#777;				/*文字色*/
}

/*icon-bg1-parts。サンプルテンプレートでは「●●●重要」と書いてあるマーク*/
.new-parts1 .icon-bg1-parts {
	background: #cd0000;	/*背景色*/
	color: #fff;				/*文字色*/
}

/*icon-bg2-parts。サンプルテンプレートでは「●●●サービス」と書いてあるマーク*/
.new-parts1 .icon-bg2-parts {
	background: #006acd;	/*背景色*/
	color: #fff;				/*文字色*/
}

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

/*ブロック全体*/
	.new-parts1 {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
		padding-left: 1rem;		/*左に空ける余白*/
		padding-right: 1rem;	/*右に空ける余白*/
	}

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

cssをコピー

parts_news2

アイコンなしの「お知らせ」向けレイアウトです。

htmlをコピー

cssをコピー

無料CMS(※外部サイト)

コピペパーツではないのですが、お知らせ・一覧・詳細を出力できるクイックCMSさんの無料CMSです。
使い方マニュアル公開しました。

parts_footermenu1

フッターメニュー。
htmlはcontentsとfooterの間に入れて下さい。

htmlをコピー

cssをコピー

parts_footermenu2

フッターメニュー。フッターメニューが多いサイト向け。
htmlはcontentsとfooterの間に入れて下さい。

htmlをコピー

cssをコピー

parts_sub1

サブコンテンツ用のメニューです。htmlコードは「sub-contents-parts」内に入れて下さい。

htmlをコピー

/*sub-contents-parts設定
---------------------------------------------------------------------------*/
/*ブロック内のh4タグ*/
#contents .sub-contents-parts h4 {
	margin: 0;border: none;
	font-weight: normal;
	background: #666;	/*背景色*/
	color: #fff;		/*文字色*/
	text-align: center;	/*内容をセンタリング*/
	padding: 0.5em;		/*タグ内の余白*/
}
#contents .sub-contents-parts h4 a {color: inherit;}

/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu-parts {
	padding: 0;
	margin: 0 0 1rem !important;	/*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu-parts li {
	border-bottom: 1px solid rgba(0,0,0,0.1);	/*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
}
.submenu-parts a {
	display: block;text-decoration: none;
	background: #fff;		/*背景色*/
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
}

/*アイコン（Font Awesome）*/
.submenu-parts a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ABABAB;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
}

/*マウスオン時のアイコン設定*/
.submenu-parts a:hover::before {
	color: #666;			/*アイコンの色*/
}

/*box1-parts
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1-parts {
	background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
	padding: 10px;					/*ボックス内の余白*/
	border-radius: 5px;				/*角を丸くする指定*/
	margin-bottom: 1rem;			/*ボックスの下に空けるスペース*/
}

/*box1-parts内でsubmenu-partsを使った場合、下のマージンをなくす*/
.sub-contents-parts .box1-parts .submenu-parts {
	margin-bottom: 0 !important;
}

cssをコピー

parts_inview1

inviewを使い、スクロール中に要素が画面内に出てきたらアニメーション（フェードインなど）を実行します。
>> 配布中のテンプレに配置したい場合

<h2>inviewサンプル</h2>
<p>jsフォルダのjquery.inview_set.jsや、cssで内容の変更や追加ができます。<br>
以下のデモは画像に対して設定していますが、sectionブロックなど画像以外にももちろん適用できます。</p>

<h3>▼ upスタイル</h3>
<p class="mb30">使いたい要素に<span class="color-check">class="up"</span>を指定すれば以下のような動作になります。<br>
<img src="images/1.jpg" alt="" width="500" class="up"></p>

<h3>▼ downスタイル</h3>
<p class="mb30">使いたい要素に<span class="color-check">class="down"</span>を指定すれば以下のような動作になります。<br>
<img src="images/1.jpg" alt="" width="500" class="down"></p>

<h3>▼ transform1スタイル</h3>
<p class="mb30">使いたい要素に<span class="color-check">class="transform1"</span>を指定すれば以下のような動作になります。<br>
<img src="images/1.jpg" alt="" width="500" class="transform1"></p>

<h3>▼ transform2スタイル</h3>
<p class="mb30">使いたい要素に<span class="color-check">class="transform2"</span>を指定すれば以下のような動作になります。<br>
<img src="images/1.jpg" alt="" width="500" class="transform2"></p>

<h3>▼ transform3スタイル</h3>
<p class="mb30">使いたい要素に<span class="color-check">class="transform3"</span>を指定すれば以下のような動作になります。<br>
<img src="images/1.jpg" alt="" width="500" class="transform3"></p>

<h3>▼ blurスタイル</h3>
<p class="mb30">使いたい要素に<span class="color-check">class="blur"</span>を指定すれば以下のような動作になります。<br>
<img src="images/1.jpg" alt="" width="500" class="blur"></p>

</section>

htmlをコピー

/*up,down,transform1,transform2の共通設定
（待機中の設定）
---------------------------------------------------------------------------*/
.up, .down, .transform1, .transform2 {
	position: relative;
	opacity: 0;		/*透明度（透明の状態）*/
}

/*up,down,transform1,transform2の共通設定
（要素が見えたら実行するアクションの設定）
---------------------------------------------------------------------------*/
.upstyle, .downstyle, .transform1style, .transform2style {
	opacity: 1;				/*透明度（色が100%出た状態）*/
	transition: 1s 0.5s;	/*1sはアニメーションの実行時間1.5秒。0.5sは0.5秒遅れてスタートする指定。*/
}

/*upスタイル。下から上にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.up {
	bottom: -20px;	/*基準値の下20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.upstyle {
	bottom: 0px;	/*基準値まで戻す*/
}

/*downスタイル。上から下にフェードインしてくるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.down {
	top: -20px;	/*基準値の上20pxの場所からスタート*/
}

/*要素が見えたら実行するアクション*/
.downstyle {
	top: 0px;	/*基準値まで戻す*/
}

/*transform1スタイル。その場で回転するスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform1 {
	transform: scaleX(0);	/*幅を0%でスタート*/
}

/*要素が見えたら実行するアクション*/
.transform1style {
	transform: scaleX(1);	/*幅を100%に戻す*/
}

/*transform2スタイル。倒れた状態から起き上がるスタイル
---------------------------------------------------------------------------*/
/*待機中の設定*/
.transform2 {
	transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}

/*要素が見えたら実行するアクション*/
.transform2style {
	transform: perspective(400px) translateZ(0px) rotateX(0deg);
}

/*blurスタイル。ぼかしで出現するスタイル。
---------------------------------------------------------------------------*/
/*待機中の設定*/
.blur {
	opacity: 0;	/*透明度（透明の状態）*/
	filter: blur(30px);
	transform: scale(1.1);
}

/*要素が見えたら実行するアクション*/
.blurstyle {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
	transition: 1s 0.5s;
}

/*transform3スタイル。小さなサイズから原寸大になるスタイル
---------------------------------------------------------------------------*/
/*キーフレーム（アニメーション）設定*/
@keyframes transform3 {
0% {
	transform: scale(0);
}
50% {
	transform: scale(1.05);
}
70% {
	transform: scale(0.99);
}
100% {
	transform: scale(1);
}
}

/*待機中の設定*/
.transform3 {
	transform: scale(0);
}

/*要素が見えたら実行するアクション*/
.transform3style {
	animation: transform3 0.8s ease-out 0.5s both;
}

cssをコピー

parts_slide_slick_thumbnail1

slick(解説)を使った、サムネイルが横スライドするタイプのスライドショーです。サイトの装飾向き。
>> 配布中のテンプレに配置したい場合

htmlをコピー

cssをコピー

parts_openclose1

FAQ用などに使える汎用的な開閉ブロック。
>> 配布中のテンプレに配置したい場合

htmlをコピー

cssをコピー

parts_thumbnail_changer1

複数のサムネイルが並んでいて、クリックすると、上の大きな画像に入れ替わるパーツ。詳細ページなどに。
>> 配布中のテンプレに配置したい場合

htmlをコピー

cssをコピー