本文の入稿は、このページの部品をコピーして行ってください（固定ページはTextエディタ・raw HTML入稿）。
ここに無いクラスの新規作成・インラインstyleの使用は禁止です（必要になったらベーステーマへの部品追加として対応）。
見出し（h2サンプル）
class="parts-heading02
parts-sectionを見出しで始める場合は必ずh2から始めるようにしてください。
普通のテキストの後にh2が来る場合は、一旦新しくparts-sectionを作るようにしてください。（余白調整のため）
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
h3サンプルh3サンプルh3サンプル
class="parts-heading03
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
h4サンプルh4サンプルh4サンプル
class="parts-heading04
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
h5サンプルh5サンプルh5サンプル
class="parts-heading05
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
h6サンプルh6サンプルh6サンプル
class="parts-heading06"
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
文字装飾・リンク
文字装飾
デフォルトテキスト
デフォルトテキスト
class="parts-txt"
マーカー、太字、アンダーライン
マーカーを引いたテキスト
class="parts-txt--marker"
太字のテキスト
class="parts-txt--bold"
アンダーラインのテキスト
class="parts-txt--underLine"
テキストカラー変更
サイトカラーのテキスト
class="parts-txt--siteColor"
サイトサブカラーのテキスト
class="parts-txt--siteSubColor"
赤のテキスト
class="parts-txt--red"
グレーのテキスト
class="parts-txt--gray"
大きさ変更
小さい文字
class="parts-txt--small"
大きい文字
class="parts-txt--large"
見出しにも適用可能です。指定したテキストの規定値の80%（小）、200%（大）になります。
位置変更
文字を中央揃え
class="parts-txt parts-txt--center"
文字を右揃え
class="parts-txt parts-txt--right"
リンク
テキストリンク
ノーマルリンク
class="parts-link"
矢印付きリンク
class="parts-link parts-link--arw"
ボタンリンク
リンクボタン（可変）class="parts-linkBtn" の中に span class="parts-linkBtn_btnArw"
リンクボタン（フルサイズ）class="parts-linkBtn parts-linkBtn--full" の中に span class="parts-linkBtn_btnArw"
リストリンク
矢印右バージョン
class="parts-linkList" のulの中に
class="parts-linkList_item" のli、
さらにparts-linkList_arwのspanで挟む
矢印下バージョン
class="parts-linkList" のulの中に
class="parts-linkList_item" のli、
さらにparts-linkList_arw parts-linkList_arw--bottomのspanで挟む
リスト
ドットリスト（デフォルト）
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-list"のulの中に、
class="parts-list_item"のli
矢印リスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-list parts-list--arw"のulの中に、
class="parts-list_item"のli
数字リスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-list parts-list--number"のolの中に、
class="parts-list_item"のli
アイコン無し
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-list parts-list--plain"のulの中に、
class="parts-list_item"のli
年表
- 00.00.00
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
- 00.00.00
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
- 00.00.00
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-list parts-list--timeline"のulの中に、
class="parts-list_item"のli
テーブル
基本的には見やすさを優先させ、なるべく横並びのセルは2つくらいまでに収めてください。
やむを得ずスマホでテーブルがはみ出しそうな場合は、parts-table_wrapで囲うようにしてください。（サンプルコードはparts-table_wrapつき）
通常テーブル
| サンプル | |
|---|---|
| 色つきのセル "parts-table_td--title" | プレーン |
| センター寄せ "parts-txt--center" | |
| 右寄せ "parts-txt--right" | |
| 色つきのセル "parts-table_td--title" | プレーン |
| センター寄せ "parts-txt--center" | |
| 右寄せ "parts-txt--right" | |
| 色つきのセル "parts-table_td--title" | プレーン |
| センター寄せ "parts-txt--center" | |
| 右寄せ "parts-txt--right" | |
タイムテーブル
| 月 | 火 | 水 | 木 | 金 | 土 | 日 | 祝 | |
|---|---|---|---|---|---|---|---|---|
| 午前診療 00:00-00:00 |
● | ● | ● | ● | ● | ● | - | - |
| 午後診療 00:00-00:00 |
● | ● | ● | ● | ● | ▲ | ※ | - |
▲ … 補足のテキストがあればここに明記
※ … サブカラーのアイコン
ボックス
余白調整ボックス
テキストや画像やリストやバナーなど、だいたいのパーツが上余白15pxで作られているので、見づらくなった際、上に倍の余白を設けたい時に使います。
class="parts-wrap"
ボーダーボックス
h3サンプルh3サンプルh3サンプル
h4サンプルh4サンプルh4サンプル
h5サンプルh5サンプルh5サンプル
h6サンプルh6サンプルh6サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-box parts-box--border"
サイトカラーボックス
h3サンプルh3サンプルh3サンプル
h4サンプルh4サンプルh4サンプル
h5サンプルh5サンプルh5サンプル
h6サンプルh6サンプルh6サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-box parts-box--siteColor"
iframeボックス
iframe（googleMapやYoutubeの動画など）をタブレット以下でレスポンシブしても最適な縦横比率で表示するボックスです。
PCは横幅100%で高さはhtmlに組み込んだコードに書かれている高さを反映するようにしています。
class="parts-box parts-box--iframe"
小さい画像付き2カラムボックス
監修用などにお使いいただけます。
h3サンプルh3サンプルh3サンプル
h4サンプルh4サンプルh4サンプル
h5サンプルh5サンプルh5サンプル
h6サンプルh6サンプルh6サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
h3サンプルh3サンプルh3サンプル
h4サンプルh4サンプルh4サンプル
h5サンプルh5サンプルh5サンプル
h6サンプルh6サンプルh6サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
カラム分け
parts-box--boxInnerPlaneの部分をparts-box--borderやparts-box--siteColorに変えてお使いいただけます。
また、4カラムのみスマホで2列になります。
コピーコードはボックスが1つしかありません。parts-column_itemをコピぺして必要な数増やしてお使いください。
2カラム
h3サンプルh3サンプルh3サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
h3サンプルh3サンプルh3サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
class="parts-column parts-column--two" の中に class="parts-column_item"
3カラム
class="parts-column parts-column--three" の中に class="parts-column_item"
4カラム
class="parts-column parts-column--four" の中に class="parts-column_item"
画像・画像配置
画像は基本的にスマホでは100%になります。
（可能であれば画像の横幅は750px以上あるとスマホでも綺麗に見えます。切り出し・リサイズの目安にしてください。）
画像単体配置
通常
class="parts-img"
画像の右寄せ
class="parts-img parts-img--right"
画像のセンター寄せ
class="parts-img parts-img--center"
画像を100%に
class="parts-img parts-img--full"
画像をリサイズしない
元画像が小さい時、スマホで100%にせずそのままのサイズで出す
class="parts-img parts-img--noResize"
テキストと合わせた画像配置
flexboxではなくfloat（回り込み）でスマホ以外に実装しています。
使用する際は必ず使用したparts-sectionにclearfixをかけるか、回り込みを解除してすぐの箱や見出しやpにclearをかけてください。（いずれかで可能）
h3、h4は回り込ませると崩れるので、なるべく見出しは回り込みエリアに入れないようにしてください。
画像の左寄せ
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
回り込みを終わらせた直後の要素に必ずclearをつける
class="parts-img parts-img--floatLeft"
画像の右寄せ
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
回り込みを終わらせた直後の要素に必ずclearをつける
class="parts-img parts-img--floatRight"
画像にキャプションをつける
class="parts-img_figure"のfigureの中に
class="parts-img_figcaption"のfigcaption
サイドバー部品
サイドバー（.sidebar 内）専用の部品です。原本カタログではサイドバー枠内に掲載されていたものを、確認用にここへ並べています。
※このページの右カラム（PC表示）に出ているサイドバー本体は config（nav / sidebar）から自動生成されるキット標準のものです。ここの部品は site-parts/sidebar/extra.php での追加枠に使用します。
サイドバー見出し・テキスト
サイドバー見出し（h3）
class="sidebar-heading03"
サイドバー見出し（h4）
class="sidebar-heading04"
サイドバー見出し（h5）
class="sidebar-heading05"
class="sidebar-txt"（修飾: sidebar-txt--small / sidebar-txt--marginSmall）
サイドバーリスト
class="sidebar-list"のulの中に class="sidebar-list_item"のli（子階層は sidebar-list_item--child を追加）、リンクは class="sidebar-list_link"
バナーエリア
画像バナー: class="sidebar-bnr_link" の中に class="sidebar-bnr_img"
簡易CSSバナー: class="sidebar-bnr_cssBnr sidebar-bnr_cssBnr--bg01"（背景は --bg01〜--bg03。親同梱はサンプル画像のため、実サイトは子テーマ site.css で背景を差し替える）
サイドバー専用ボックス
class="sidebar-box sidebar-box--border"
class="sidebar-box sidebar-box--siteColor"
※ボタン矢印のspanは class="sidebar-box__btnArw"（アンダースコア2つ — 原本CSSどおり）
新世代追加部品
コアCSSに収録済みだが原本カタログに無い、テンプレ族の新世代稼働サイトで追加された部品です（docs/04b §7-5）。
top-* 系はトップページ用セクションの部品ですが、バリアントCSSは全ページで読み込まれるため、ここで描画確認できます。
タイムテーブルの記号セル・色文字（parts-schedule 新世代追加）
●等の記号セルを強調する parts-schedule_td--symbol と、注記用の色文字3種です。記号セル内の色はspanで指定します。
| 月 | 火 | 水 | 木 | 金 | 土 | 日 | 祝 | |
|---|---|---|---|---|---|---|---|---|
| 午前診療 00:00-00:00 |
● | ● | ● | ※ | ● | ▲ | - | - |
| 午後診療 00:00-00:00 |
● | ● | ● | ※ | ● | ▲ | - | - |
● … メインカラー文字（parts-schedule_txtColor）
▲ … サブカラー文字（parts-schedule_txtSubColor）
※ … 赤文字（parts-schedule_txtRedColor）
記号セル: class="parts-schedule_td parts-schedule_td--symbol"（マークアップは新世代実サイトの top-clinicInfo_tableTd--symbol と同型）
注記: class="parts-schedule_btmTxt" 内に parts-schedule_txtColor / _txtSubColor / _txtRedColor のspan
トップブログ2列ボックス（top-blog_box--double）
トップのブログ欄を「ブログ＋セミナー」等の2列にする部品です（バリアント02の新世代実サイト由来。site-parts/front/blog.php での差し替え用）。
class="top-blog_wrap" の中に class="top-blog_box top-blog_box--double" を2つ。
各ボックスの見出しは class="top-blog_heading03"（2列目は top-blog_heading03--subColor 追加）
診療カレンダー（top-clinicInfo_calendar 系）
トップのクリニック情報欄に Google カレンダー等を埋め込む部品です（バリアント03の新世代実サイト由来。site-parts/front/clinic-info.php での追加用）。1列（--single）と2列（--double）があります。
1列（top-clinicInfo_calendarArea--single）
2列（top-clinicInfo_calendarArea--double）
診療カレンダー
今月・来月のカレンダーを並べて表示するパターンです。
今月
来月
class="top-clinicInfo_calendarArea top-clinicInfo_calendarArea--single"（または --double）の中に
class="top-clinicInfo_calendarTitle"（見出し・説明）と class="top-clinicInfo_calendar"（--double は2つ）。
各カレンダーは class="top-clinicInfo_calendarIframe" にiframeを入れ、ラベルは class="top-clinicInfo_calendarHeading"
（--double のラベル付き構成はキットCSSと稼働サイトの今月/来月2連カレンダー事例から導出。--single は03新世代実サイトどおり）