ABC HTML Parts

COPY & PASTE PARTS FOR CLINIC

診療案内

診療時間表・お知らせ・アクセスなど、医院サイトの必須情報パーツ

診療時間表

スマホでも崩れない診療時間テーブル。休診マスは自動でグレー表示になります。

コード・使い方を見る 
<div class="ht-wrap">
  <table class="ht-table">
    <caption>診療時間</caption>
    <thead>
      <tr><th>診療時間</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th><th>日祝</th></tr>
    </thead>
    <tbody>
      <tr>
        <th>9:00〜12:30</th>
        <td>●</td><td>●</td><td>●</td><td>●</td><td>●</td><td>●</td><td class="ht-off">－</td>
      </tr>
      <tr>
        <th>14:30〜18:30</th>
        <td>●</td><td>●</td><td class="ht-off">－</td><td>●</td><td>●</td><td>▲</td><td class="ht-off">－</td>
      </tr>
    </tbody>
  </table>
  <p class="ht-note">▲ 土曜午後は 14:00〜17:00 ／ 休診日：水曜午後・日曜・祝日</p>
</div>
.ht-wrap {
  --ht-accent: #2f8f9d;   /* メインカラー（医院のテーマ色に変更してください） */
  --ht-off-bg: #f3f4f6;   /* 休診マスの背景色 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 640px;
  margin: 0 auto;
}
.ht-table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); border-radius: 10px; overflow: hidden; }
.ht-table caption { font-weight: 700; font-size: 1.05rem; color: var(--ht-accent); padding: .6em; letter-spacing: .1em; }
.ht-table th, .ht-table td { border: 1px solid #e5e7eb; padding: .65em .4em; text-align: center; font-size: .92rem; }
.ht-table thead th { background: var(--ht-accent); color: #fff; font-weight: 600; }
.ht-table tbody th { background: #fafafa; font-weight: 600; white-space: nowrap; }
.ht-table td { color: var(--ht-accent); font-weight: 700; }
.ht-table td.ht-off { background: var(--ht-off-bg); color: #b0b6bd; font-weight: 400; }
.ht-note { font-size: .8rem; color: #6b7280; margin-top: .6em; text-align: center; }
@media (max-width: 480px) {
  .ht-table th, .ht-table td { padding: .5em .25em; font-size: .8rem; }
}

休診お知らせバー

ページ上部に固定表示できる、休診日などのお知らせバーです。×ボタンで閉じられます。

コード・使い方を見る 
<div class="nb-bar">
  <p class="nb-text"><span class="nb-badge">お知らせ</span>8月13日〜15日は休診いたします。ご不便をおかけしますが、よろしくお願いいたします。</p>
  <button type="button" class="nb-close" aria-label="お知らせを閉じる">×</button>
</div>
.nb-bar {
  --nb-bg: #c0392b;   /* バーの背景色（医院のテーマ色や注意喚起色に変更してください） */
  --nb-color: #ffffff; /* 文字色 */
  display: flex;
  align-items: center;
  gap: .75em;
  width: 100%;
  box-sizing: border-box;
  background: var(--nb-bg);
  color: var(--nb-color);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  padding: .7em 1em;
  position: relative;
}
.nb-bar.nb-hidden { display: none; }
.nb-text {
  flex: 1;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
}
.nb-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .18);
  border-radius: 4px;
  padding: .1em .6em;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .05em;
  margin-right: .6em;
}
.nb-close {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--nb-color);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: .2em .4em;
  border-radius: 4px;
  opacity: .85;
  transition: opacity .15s, background-color .15s;
}
.nb-close:hover,
.nb-close:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, .18);
  outline: none;
}
@media (max-width: 480px) {
  .nb-bar { padding: .6em .8em; gap: .5em; }
  .nb-text { font-size: .82rem; line-height: 1.5; }
  .nb-badge { display: block; width: fit-content; margin: 0 0 .3em; }
  .nb-close { font-size: 1.15rem; }
}

/* ▼ ページ上部に固定（追従）させたい場合:
   この下の「.nb-bar { ... }」の1行を、このコメントの終わり（すぐ下の行）より
   さらに下に、まるごとコピーして貼り付けてください。
.nb-bar { position: sticky; top: 0; z-index: 9999; }
*/
(function () {
  document.querySelectorAll('.nb-close').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var bar = btn.closest('.nb-bar');
      if (bar) bar.classList.add('nb-hidden');
    });
  });
})();

アクセス（地図＋住所カード）

地図と住所・電話・最寄駅・駐車場情報を並べて表示するアクセス案内です。スマホでは自動的に縦に並びます。

コード・使い方を見る 
<div class="am-wrap">
  <div class="am-map">
    <iframe
      src="https://www.google.com/maps?q=%E6%9D%B1%E4%BA%AC%E9%A7%85&output=embed"
      loading="lazy"
      title="みなと総合クリニックの地図（東京駅周辺・プレースホルダ）"
      referrerpolicy="no-referrer-when-downgrade"
    ></iframe>
  </div>
  <div class="am-card">
    <h3 class="am-title">アクセス</h3>
    <dl class="am-list">
      <div class="am-row">
        <dt>住所</dt>
        <dd>〒000-0000<br>東京都港区0-0-0</dd>
      </div>
      <div class="am-row">
        <dt>電話</dt>
        <dd><a href="tel:0300000000">03-0000-0000</a></dd>
      </div>
      <div class="am-row">
        <dt>最寄駅</dt>
        <dd>◯◯駅 ◯◯口から徒歩3分</dd>
      </div>
      <div class="am-row">
        <dt>駐車場</dt>
        <dd>提携駐車場あり（3台分・診療中は無料）</dd>
      </div>
    </dl>
  </div>
</div>
.am-wrap {
  --am-accent: #2f8f9d; /* アクセントカラー（見出し・アイコン等に使用、医院のテーマ色に変更してください） */
  display: flex;
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}
.am-map {
  flex: 1 1 55%;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  background: #f3f4f6;
}
.am-map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  display: block;
}
.am-card {
  flex: 1 1 45%;
  min-width: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.am-title {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--am-accent);
  letter-spacing: .05em;
  border-left: 4px solid var(--am-accent);
  padding-left: .6em;
}
.am-list { margin: 0; }
.am-row {
  display: flex;
  gap: 1em;
  padding: .65em 0;
  border-bottom: 1px dashed #e5e7eb;
}
.am-row:last-child { border-bottom: none; }
.am-row dt {
  flex: 0 0 4.5em;
  font-size: .85rem;
  font-weight: 700;
  color: var(--am-accent);
}
.am-row dd {
  margin: 0;
  flex: 1;
  font-size: .92rem;
  color: #333;
  line-height: 1.6;
}
.am-row dd a {
  color: #333;
  text-decoration: none;
  font-weight: 700;
}
.am-row dd a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .am-wrap { flex-direction: column; }
  .am-map iframe { min-height: 220px; }
  .am-card { padding: 1.1rem 1.2rem; }
}

院内設備リスト

設備名と一言説明をカードで並べる、院内設備の紹介グリッドです。

コード・使い方を見る 
<div class="fl-wrap">
  <h3 class="fl-title">院内設備のご案内</h3>
  <p class="fl-lead">みなと総合クリニックでは、安心して通っていただけるよう設備を整えています。</p>
  <ul class="fl-grid">
    <li class="fl-card">
      <span class="fl-icon" aria-hidden="true">🚪</span>
      <h4 class="fl-name">個室診療室</h4>
      <p class="fl-desc">プライバシーに配慮した完全個室で、周りを気にせずご相談いただけます。</p>
    </li>
    <li class="fl-card">
      <span class="fl-icon" aria-hidden="true">🖥️</span>
      <h4 class="fl-name">最新CT</h4>
      <p class="fl-desc">高精細な最新CT装置を導入し、迅速で正確な検査を行います。</p>
    </li>
    <li class="fl-card">
      <span class="fl-icon" aria-hidden="true">🧸</span>
      <h4 class="fl-name">キッズスペース</h4>
      <p class="fl-desc">絵本やおもちゃを備えたキッズスペースで、お子様連れでも安心です。</p>
    </li>
    <li class="fl-card">
      <span class="fl-icon" aria-hidden="true">♿</span>
      <h4 class="fl-name">バリアフリー</h4>
      <p class="fl-desc">段差のない院内とスロープ完備で、車椅子やベビーカーでもスムーズに移動できます。</p>
    </li>
  </ul>
</div>
.fl-wrap {
  --fl-accent: #2f8f9d; /* アクセントカラー（見出し・アイコン背景に使用、医院のテーマ色に変更してください） */
  --fl-columns: 4;      /* グリッドの列数（PC表示時。2〜4程度を推奨） */
  max-width: 960px;
  margin: 0 auto;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  text-align: center;
}
.fl-title {
  margin: 0 0 .5rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fl-accent);
  letter-spacing: .06em;
}
.fl-lead {
  margin: 0 0 1.6rem;
  font-size: .92rem;
  color: #6b7280;
}
.fl-grid {
  display: grid;
  grid-template-columns: repeat(var(--fl-columns), 1fr);
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fl-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.6rem 1.2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
}
.fl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #eef6f7; /* アイコン背景色（薄め。--fl-accent の系統色に合わせて変更してください） */
  font-size: 1.4rem;
  margin-bottom: .8rem;
}
.fl-name {
  margin: 0 0 .5rem;
  font-size: .98rem;
  font-weight: 700;
  color: #1f2937;
}
.fl-desc {
  margin: 0;
  font-size: .85rem;
  line-height: 1.7;
  color: #6b7280;
  text-align: left;
}
@media (max-width: 640px) {
  .fl-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .fl-card { padding: 1.2rem .9rem; }
}
@media (max-width: 400px) {
  .fl-grid { grid-template-columns: 1fr; }
}

受診の流れ

初診の流れを4ステップで示す、番号バッジ付きのステップフローです。PCでは横並び、スマホでは縦並びに切り替わります。

コード・使い方を見る 
<div class="fs-wrap">
  <h3 class="fs-title">初診の流れ</h3>
  <ol class="fs-list">
    <li class="fs-step">
      <span class="fs-num" aria-hidden="true">1</span>
      <div class="fs-body">
        <h4 class="fs-heading">ご予約</h4>
        <p class="fs-desc">お電話またはWEB予約フォームより、ご希望の日時をご連絡ください。</p>
      </div>
    </li>
    <li class="fs-step">
      <span class="fs-num" aria-hidden="true">2</span>
      <div class="fs-body">
        <h4 class="fs-heading">ご来院・受付</h4>
        <p class="fs-desc">保険証をご持参のうえ、受付にて問診票のご記入をお願いいたします。</p>
      </div>
    </li>
    <li class="fs-step">
      <span class="fs-num" aria-hidden="true">3</span>
      <div class="fs-body">
        <h4 class="fs-heading">診察・検査</h4>
        <p class="fs-desc">医師が丁寧に診察いたします。必要に応じて各種検査を行います。</p>
      </div>
    </li>
    <li class="fs-step">
      <span class="fs-num" aria-hidden="true">4</span>
      <div class="fs-body">
        <h4 class="fs-heading">お会計・次回予約</h4>
        <p class="fs-desc">お会計後、必要な場合は次回のご予約をお取りいただけます。</p>
      </div>
    </li>
  </ol>
</div>
.fs-wrap {
  --fs-accent: #2f8f9d; /* 番号バッジ・線の色（医院のテーマ色に変更してください） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}
.fs-wrap * { box-sizing: border-box; }
.fs-title {
  margin: 0 0 1.4em;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d3339;
  letter-spacing: .06em;
}
.fs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.fs-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1em;
}
.fs-step + .fs-step::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--fs-accent);
  opacity: .35;
}
.fs-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fs-accent);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .8em;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.fs-body {
  min-width: 0;
}
.fs-heading {
  margin: 0 0 .4em;
  font-size: 1rem;
  font-weight: 700;
  color: #2d3339;
}
.fs-desc {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: #6b7280;
}

@media (max-width: 720px) {
  .fs-list {
    flex-direction: column;
    gap: 1.4em;
  }
  .fs-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }
  .fs-step + .fs-step::before {
    top: -0.7em;
    left: 21px;
    width: 2px;
    height: 1.4em;
  }
  .fs-num {
    margin: 0 1em 0 0;
  }
  .fs-body { flex: 1; }
  .fs-heading { margin-top: .3em; }
}

@media (max-width: 375px) {
  .fs-num { width: 38px; height: 38px; font-size: 1rem; }
  .fs-desc { font-size: .82rem; }
}

診療科目一覧

診療科目をアイコン付きで一覧表示するグリッドです。PCは3列、スマホは1〜2列に切り替わります。

コード・使い方を見る 
<div class="dl-wrap">
  <h3 class="dl-title">診療科目</h3>
  <ul class="dl-grid">
    <li class="dl-item">
      <span class="dl-icon" aria-hidden="true">🩺</span>
      <h4 class="dl-name">内科</h4>
      <p class="dl-desc">風邪や生活習慣病など幅広く対応します。</p>
    </li>
    <li class="dl-item">
      <span class="dl-icon" aria-hidden="true">🧸</span>
      <h4 class="dl-name">小児科</h4>
      <p class="dl-desc">お子さまの発熱・体調不良を診察します。</p>
    </li>
    <li class="dl-item">
      <span class="dl-icon" aria-hidden="true">🧴</span>
      <h4 class="dl-name">皮膚科</h4>
      <p class="dl-desc">湿疹・かぶれなどのお肌のお悩みに。</p>
    </li>
    <li class="dl-item">
      <span class="dl-icon" aria-hidden="true">🌼</span>
      <h4 class="dl-name">アレルギー科</h4>
      <p class="dl-desc">花粉症や食物アレルギーの検査・治療。</p>
    </li>
    <li class="dl-item">
      <span class="dl-icon" aria-hidden="true">📋</span>
      <h4 class="dl-name">健康診断</h4>
      <p class="dl-desc">各種健診・人間ドックを実施しています。</p>
    </li>
    <li class="dl-item">
      <span class="dl-icon" aria-hidden="true">💉</span>
      <h4 class="dl-name">予防接種</h4>
      <p class="dl-desc">インフルエンザなど各種予防接種に対応。</p>
    </li>
  </ul>
</div>
.dl-wrap {
  --dl-accent: #2f8f9d; /* アイコンの色（医院のテーマ色に変更してください） */
  --dl-columns: 3;      /* PC表示時の列数 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dl-wrap * { box-sizing: border-box; }
.dl-title {
  margin: 0 0 1.2em;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d3339;
  letter-spacing: .06em;
}
.dl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--dl-columns), 1fr);
  gap: 1em;
}
.dl-item {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 1.6em 1.2em;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.dl-icon {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: .5em;
  color: var(--dl-accent);
}
.dl-name {
  margin: 0 0 .4em;
  font-size: 1rem;
  font-weight: 700;
  color: #2d3339;
}
.dl-desc {
  margin: 0;
  font-size: .84rem;
  line-height: 1.7;
  color: #6b7280;
}

@media (max-width: 720px) {
  .dl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .dl-grid { grid-template-columns: 1fr; gap: .8em; }
  .dl-item { padding: 1.2em 1em; }
}