自分で組み立てるテンプレート｜フッター向けパーツ

4月お申し込み分よりライセンス料金変更のお知らせ

フッター向けパーツ

footermenu1とfootermenu2は、htmlコードはcontentsとfooterの間に入れて下さい。
footer1とfooter2は、htmlもcssも既存のfooterと置き換えて下さい。

footer2

Google Mapと週間tableとSNSアイコン入り。病院、ショップ、飲食店などに。

<p>〒000-0000 東京足立区XXXXXX1丁目1号<br>
代表電話：000-0000-0000<br>
受付時間：月曜日から金曜日の8時から18時まで</p>

<table class="week2-parts">
<tr>
<th>受付時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr>
<td>9:00 - 12:00</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>×</td>
</tr>
<tr>
<td>14:00 - 18:00</td>
<td>○</td>
<td>○</td>
<td>○</td>
<td>△</td>
<td>○</td>
<td>×</td>
<td>×</td>
</tr>
</table>
<p class="r">△は予約専門です。×は休診日です。</p>

</div>

<h3>アクセス</h3>
<p><a href="https://template-party.com/file/pickup_googlemap.html">GoogleMapの地図を変更する方法はマニュアルをご覧下さい。</a></p>
<div class="iframe-box1-parts">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.0448418561778!2d139.74267721573196!3d35.675897837870934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b89b2e1c8b1%3A0x59a123e3d5ac5ab6!2z44CSMTAwLTAwMTQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65rC455Sw55S677yR5LiB55uu77yX4oiS77yR!5e0!3m2!1sja!2sjp!4v1545036128899" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

</div>

</footer>

html

/*フッター
---------------------------------------------------------------------------*/
#footer2-parts * {margin: 0;padding: 0;}
#footer2-parts ul {list-style: none;}

/*ブロック全体*/
#footer2-parts {
	background: #eee;	/*背景色*/
	color: #555;		/*文字色*/
	padding: var(--content-space);	/*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer2-parts div.footer2-1-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer2-parts div.footer2-2-parts {
    flex: 1;
}

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

#footer2-parts {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

/*ロゴやSNSアイコンが入ったブロック*/
	#footer2-parts div.footer2-1-parts {
		text-align: left;
		width: 40%;	/*幅。40%。*/
	}

/*メニューブロック*/
	#footer2-parts div.footer2-2-parts {
		/*margin-bottom: 0;	下の余白をなくす*/
	}

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

/*Copyright部分*/
#footer2-parts small {
	display: block;
	text-align: right;
	margin-top: 2rem;
}

/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

/*Google Map用
---------------------------------------------------------------------------*/
.iframe-box1-parts {
	width: 100%;
	height: 0;
	padding-top: 56.25% !important;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box1-parts iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

/*テーブル
---------------------------------------------------------------------------*/
.week2-parts {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 10px;	/*角を丸くする指定*/
	border: 1px solid #ccc;	/*テーブル外側の線の幅、線種、色*/
	table-layout: fixed;	/*幅を均等に*/
	background: #fff;		/*テーブル全体の背景色*/
	color: #555;			/*テーブル全体の文字色*/
}

/*受付時間の幅*/
.week2-parts th:first-child,
.week2-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.week2-parts th:not(:first-child),
.week2-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.week2-parts th,
.week2-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	border-right: 1px solid #ccc;	/*右の線の幅、線種、色*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.week2-parts th:last-child,
.week2-parts td:last-child {
	border-right: none;
}

/*最後の行の下線を消す*/
.week2-parts tr:last-child td {
	border-bottom: none;
}

/*th(曜日)の追加指定*/
.week2-parts th {
	background: #fafafa;	/*背景色*/
}
.week2-parts td {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
}

css

footer1

フッターメニューの他、ロゴやSNSアイコン入り。

html

/*フッター
---------------------------------------------------------------------------*/
#footer1-parts * {margin: 0;padding: 0;}
#footer1-parts ul {list-style: none;}

/*ブロック全体*/
#footer1-parts {
	background: #eee;	/*背景色*/
	color: #555;		/*文字色*/
	padding: var(--content-space);	/*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
	display: flex;
	flex-direction: column-reverse;	/*フッターメニューがロゴより先に表示されるように。逆（htmlの順番通りの表示）がいいならこの１行を削除。*/
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer1-parts div.footer1-1-parts {
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer1-parts div.footer1-2-parts {
    flex: 1;
	font-size: 0.85rem;	/*文字サイズを85%に*/
    display: flex;
    gap: 2rem;	/*メニューブロック同士の間の余白。2文字分。*/
	margin-bottom: 1rem;	/*メニューブロックの下に１文字分の余白を空ける。*/
}

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

#footer1-parts {
		flex-direction: row;	/*表示順をデフォルトにする*/
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

/*ロゴやSNSアイコンが入ったブロック*/
	#footer1-parts div.footer1-1-parts {
		text-align: left;
		width: 40%;	/*幅。40%。*/
	}

/*メニューブロック*/
	#footer1-parts div.footer1-2-parts {
		justify-content: flex-end;	/*ブロックを右に寄せる。この行を削除すれば、左によります。*/
		margin-bottom: 0;	/*下の余白をなくす*/
	}

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

/*Copyright部分*/
#footer1-parts small {
	display: block;
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}

css

footermenu2

フッターメニュー。メニュー数が多いサイト向け。

html

css

footermenu1

シンプルなフッターメニュー。メニュー数が少ないサイト向け。

html

css

フッター向けパーツ

footer2

footer1

footermenu2

footermenu1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

フッター向けパーツ

footer2

footer1

footermenu2

footermenu1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート