見出し（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–mLarge”
さらに大きい文字
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サンプル
h4サンプルh4サンプルh4サンプル
h5サンプルh5サンプルh5サンプル
h6サンプルh6サンプルh6サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
h3サンプルh3サンプルh3サンプル
h4サンプルh4サンプルh4サンプル
h5サンプルh5サンプルh5サンプル
h6サンプルh6サンプルh6サンプル
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- リストサンプル
- リストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプルリストサンプル
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、もしくはparts-boxに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
画像の左寄せキャプションつき
回り込み画像にキャプションを付ける場合は、画像ではなくfigureの箱にparts-img–floatLeftをつける
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
回り込みを終わらせた直後の要素に必ずclearをつける
class=”parts-img_figure parts-img–floatLeft”
画像の右寄せキャプションつき
回り込み画像にキャプションを付ける場合は、画像ではなくfigureの箱にparts-img–floatRightをつける
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
回り込みを終わらせた直後の要素に必ずclearをつける
class=”parts-img_figure parts-img–floatRight”
