プロジェクト

全般

プロフィール

ダウンロード (15 KB)

サポート #2563 » wireframe_kosodate.html

廣瀬 僚一, 2026/04/27 10:32

 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>子育て支援｜ワイヤーフレームラフ</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
background: #e8e8e8;
color: #333;
line-height: 1.7;
padding: 24px 0;
}
.frame {
max-width: 960px;
margin: 0 auto;
background: #f5f5f5;
border: 1px solid #bbb;
}
/* ヘッダー領域 */
.header {
background: #d0d0d0;
height: 80px;
display: flex;
align-items: center;
padding: 0 32px;
border-bottom: 1px solid #aaa;
}
.logo {
width: 140px;
height: 40px;
background: #b8b8b8;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: 12px;
}
/* パンくず */
.breadcrumb {
padding: 12px 32px;
background: #ececec;
font-size: 11px;
color: #777;
border-bottom: 1px solid #ddd;
}
/* ページタイトル */
.page-title {
background: #c8c8c8;
padding: 56px 32px;
text-align: center;
border-bottom: 1px solid #aaa;
}
.page-title h1 {
font-size: 28px;
font-weight: bold;
color: #444;
letter-spacing: 0.1em;
}
.page-title .sub {
margin-top: 8px;
font-size: 12px;
color: #777;
}
/* メインコンテンツ */
.main {
padding: 48px 32px;
}
/* 目次（横並びボタン） */
.toc {
margin-bottom: 56px;
}
.toc-label {
font-size: 11px;
color: #888;
margin-bottom: 12px;
text-align: center;
}
.toc-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.toc-buttons a {
flex: 1;
min-width: 180px;
padding: 18px 12px;
background: #d8d8d8;
border: 1px solid #b0b0b0;
text-align: center;
color: #444;
font-size: 14px;
text-decoration: none;
transition: background 0.2s;
}
.toc-buttons a:hover {
background: #c8c8c8;
}
.toc-buttons a::after {
content: " ▼";
font-size: 10px;
color: #888;
margin-left: 4px;
}
/* セクション */
.section {
margin-bottom: 64px;
scroll-margin-top: 24px;
}
.section-heading {
font-size: 22px;
font-weight: bold;
color: #333;
margin-bottom: 24px;
}
.lead {
background: #ededed;
border: 1px solid #ccc;
padding: 20px 24px;
margin-bottom: 24px;
font-size: 13px;
color: #555;
}
.lead .lead-title {
font-size: 15px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed #bbb;
}
/* サブセクション */
.sub-section {
margin-bottom: 28px;
}
.sub-heading {
font-size: 16px;
font-weight: bold;
color: #444;
margin-bottom: 12px;
}
.sub-body {
padding: 4px 16px;
font-size: 13px;
color: #555;
}
.sub-body p { margin-bottom: 8px; }
.sub-body ol, .sub-body ul {
padding-left: 22px;
margin: 6px 0;
}
.sub-body li { margin-bottom: 4px; }
.note {
font-size: 11px;
color: #888;
margin-top: 6px;
}
/* テーブル */
.table-wrap {
margin-bottom: 16px;
}
.table-caption {
font-size: 12px;
color: #555;
margin: 12px 0 6px;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid #bbb;
font-size: 11px;
}
th, td {
border: 1px solid #ccc;
padding: 6px 8px;
text-align: center;
color: #555;
}
th {
background: #d8d8d8;
color: #333;
font-weight: bold;
}
td:first-child {
background: #ececec;
font-weight: bold;
}
/* PDF埋め込み枠 */
.pdf-embed {
border: 2px dashed #aaa;
background: #e0e0e0;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
color: #777;
font-size: 12px;
margin-top: 8px;
}
/* リンク */
.link-box {
display: inline-block;
padding: 10px 18px;
background: #d4d4d4;
border: 1px solid #aaa;
color: #444;
text-decoration: none;
font-size: 12px;
margin-top: 6px;
}
.link-box::before {
content: "🔗 ";
opacity: 0.5;
}
/* 写真エリア */
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 12px 0;
}
.photo {
aspect-ratio: 4/3;
background: #c8c8c8;
border: 1px solid #aaa;
display: flex;
align-items: center;
justify-content: center;
color: #777;
font-size: 11px;
}
/* 情報リスト */
.info-list {
background: #ededed;
border: 1px solid #ccc;
padding: 16px 20px;
margin-top: 12px;
font-size: 13px;
}
.info-list dl {
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px 16px;
}
.info-list dt {
color: #333;
font-weight: bold;
}
.info-list dd {
color: #555;
}
/* お問い合わせCTA */
.cta {
background: #d8d8d8;
border: 1px solid #aaa;
padding: 28px;
text-align: center;
margin-top: 40px;
}
.cta-text {
font-size: 13px;
color: #444;
margin-bottom: 14px;
}
.cta-btn {
display: inline-block;
padding: 14px 36px;
background: #a8a8a8;
color: #fff;
border: 1px solid #888;
font-size: 14px;
font-weight: bold;
}
/* フッター */
.footer {
background: #b0b0b0;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: 12px;
border-top: 1px solid #999;
}
</style>
</head>
<body>
<div class="frame">

<!-- ヘッダー -->
<div class="header">
<div class="logo">LOGO</div>
</div>

<!-- パンくず -->
<div class="breadcrumb">HOME ＞ 子育て支援</div>

<!-- ページタイトル -->
<div class="page-title">
<h1>子育て支援</h1>
<div class="sub">― 一時保育・誰でも通園制度のご案内 ―</div>
</div>

<!-- メイン -->
<div class="main">

<!-- 目次（横並びボタン） -->
<div class="toc">
<div class="toc-label">（クリックで当該行へジャンプ）</div>
<div class="toc-buttons">
<a href="#sec1">子育て支援事業</a>
<a href="#sec2">一時保育</a>
<a href="#sec3">誰でも通園制度</a>
<a href="#sec4">子育て広場</a>
</div>
</div>

<!-- ① 子育て支援事業 -->
<section class="section" id="sec1">
<h2 class="section-heading">【子育て支援事業】</h2>
<div class="lead">
<div class="lead-title">一時保育・誰でも通園制度のご案内</div>
<p>当園では保護者の方のご事情や子育て支援の一環として、一時保育および誰でも通園制度を実施しています。ご家庭の状況に合わせてご利用いただけますので、お気軽にお問い合わせください。</p>
</div>
</section>

<!-- ② 一時保育 -->
<section class="section" id="sec2">
<h2 class="section-heading">【一時保育】</h2>

<div class="sub-section">
<div class="sub-heading">一時保育とは</div>
<div class="sub-body">
<p>保護者の方のご用事、お仕事、通院、リフレッシュなどの際にお子さんをお預かりしています。</p>
<p>お子さんが安心して過ごせるように、保育教諭が一人ひとりの様子に合わせて丁寧に保育いたします。</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用の流れ</div>
<div class="sub-body">
<ol>
<li>大谷むつみ認定こども園において「利用申請書」に記入のうえ登録を行います。</li>
<li>登録時にお子さんの様子を共有するために、園にて面談を行います。</li>
<li>利用申込は、利用する平日5日前までに電話にて申込をお願いいたします。</li>
</ol>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用期間</div>
<div class="sub-body">
<p>・月曜～金曜日（祝日を除く）</p>
<p class="note">※こども園の都合により利用できない日があります。ご了承ください。</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">対象年齢</div>
<div class="sub-body">
<p>・1才6カ月頃～就学前まで利用できます。</p>
<p class="note">※離乳食が完了し、幼児食へ移行済みのお子さんが対象</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用料</div>
<div class="sub-body">
<div class="table-wrap">
<div class="table-caption">3歳未満児</div>
<table>
<thead>
<tr><th>利用時間</th><th>利用料</th><th>給食費（おやつ代50円込）</th><th>合計</th></tr>
</thead>
<tbody>
<tr><td>3時間</td><td>950円</td><td>320円</td><td>1,270円</td></tr>
<tr><td>4時間</td><td>1,200円</td><td>320円</td><td>1,520円</td></tr>
<tr><td>5時間</td><td>1,450円</td><td>320円</td><td>1,770円</td></tr>
<tr><td>6時間</td><td>1,700円</td><td>320円</td><td>2,020円</td></tr>
<tr><td>7時間</td><td>2,150円</td><td>320円</td><td>2,470円</td></tr>
<tr><td>8時間</td><td>2,400円</td><td>320円</td><td>2,720円</td></tr>
<tr><td>9時間</td><td>2,650円</td><td>320円</td><td>2,970円</td></tr>
<tr><td>10時間</td><td>2,900円</td><td>320円</td><td>3,220円</td></tr>
</tbody>
</table>
</div>
<div class="table-wrap">
<div class="table-caption">3・4・5歳児</div>
<table>
<thead>
<tr><th>利用時間</th><th>利用料</th><th>給食費（おやつ代50円込）</th><th>合計</th></tr>
</thead>
<tbody>
<tr><td>3時間</td><td>800円</td><td>320円</td><td>1,120円</td></tr>
<tr><td>4時間</td><td>1,000円</td><td>320円</td><td>1,320円</td></tr>
<tr><td>5時間</td><td>1,200円</td><td>320円</td><td>1,520円</td></tr>
<tr><td>6時間</td><td>1,400円</td><td>320円</td><td>1,720円</td></tr>
<tr><td>7時間</td><td>1,800円</td><td>320円</td><td>2,120円</td></tr>
<tr><td>8時間</td><td>2,000円</td><td>320円</td><td>2,320円</td></tr>
<tr><td>9時間</td><td>2,200円</td><td>320円</td><td>2,520円</td></tr>
<tr><td>10時間</td><td>2,400円</td><td>320円</td><td>2,720円</td></tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">持ちもの</div>
<div class="sub-body">
<ul>
<li>着替え一式</li>
<li>おむつ＋おしり拭き</li>
<li>食事用エプロン</li>
<li>お昼寝用バスタオル 2枚</li>
</ul>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用申請書</div>
<div class="sub-body">
<ul>
<li>PDFリンク入る</li>
</ul>
</div>
</div>
</section>

<!-- ③ 誰でも通園制度 -->
<section class="section" id="sec3">
<h2 class="section-heading">【誰でも通園制度】</h2>

<div class="sub-section">
<div class="sub-heading">誰でも通園制度とは</div>
<div class="sub-body">
<p>保護者の就労の有無にかかわらず、お預かりする制度です。家庭で保育されているお子さんが園での遊びや集団生活を体験しながら安心して過ごせるよう保育を行います。</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用の流れ</div>
<div class="sub-body">
<p>北広島市のホームページをご確認ください。</p>
<a href="#" class="link-box">こども誰でも通園制度 | 北広島市子育てサイト</a>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用できる時間</div>
<div class="sub-body">
<p>子ども1人あたり 10時間／月 が上限となります。</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用料金</div>
<div class="sub-body">
<p>子ども1人　300円／1時間</p>
<p class="note">※別途 給食費 270円・おやつ代 50円 がかかります。</p>
<p class="note">※15時より前のお迎え予定の際には、おやつ代はかかりません。</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用定員</div>
<div class="sub-body">
<p>1日 3名まで（先着順）</p>
</div>
</div>

<div class="sub-section">
<div class="sub-heading">利用期間</div>
<div class="sub-body">
<p>・月曜～金曜日（祝日を除く）</p>
<p>・9時～16時まで</p>
<p class="note">※こども園の都合により利用できない日があります。ご了承ください。</p>
</div>
</div>

<div class="cta">
<div class="cta-text">利用方法や空き状況などにつきましては<br>園までお気軽にお問い合わせください。</div>
<div class="cta-btn">お問い合わせはこちら</div>
</div>
</section>

<!-- ④ 子育て広場 -->
<section class="section" id="sec4">
<h2 class="section-heading">【子育て広場】</h2>

<div class="sub-section">
<div class="sub-heading">子育て広場とは</div>
<div class="sub-body">
<p>園庭での水遊びや、室内でクッキングや制作活動など、保育教諭が担当し、園児が楽しんでいるプログラムを体験することができます。</p>
<div class="photo-grid">
<div class="photo">写真</div>
<div class="photo">写真</div>
<div class="photo">写真</div>
</div>
<p class="note">※写真はそのまま掲載</p>

<div class="info-list">
<dl>
<dt>対象</dt><dd>子育て中の未就学児の親子</dd>
<dt>開催日時</dt><dd>月1回程度（園のインスタグラム等で告知しています）</dd>
<dt>申込方法</dt><dd>園ホームページから申込申請をお願いいたします。</dd>
<dt>料金</dt><dd>無料～320円程度（イベントによって異なります）</dd>
</dl>
</div>
</div>
</div>
</section>

</div>

<!-- フッター -->
<div class="footer">FOOTER</div>

</div>
</body>
</html>
(1-1/8)