↑ [h1]ページタイトル（画像あり）

↑ [h1]ページタイトル（ノーマル）

コーダー向け補足

指示書の記述ルール

原稿中の「**」に続くテキストは指示です。HTMLには掲載しないでください。

原稿/指示書中の「 <a.btn =02-02> 受診の流れ」 は下記を略記したものです。
[ 「02-02」はリンク先ページのページIDです。管理表を参照してスラッシュから始まるルートパスを指定してください。

<a class="btn" href="/visits/guide/">受診の流れ</a>

カラム

.flex … カラムを囲む
.flex.row-sp … スマホ表示でカラムを横に並べる、要.__colX-sp）
.mXX … カラムの左右の間隔（下記では60px）
.__colX … カラムの幅（下記では 12分の6 ＝ 50％）
.__colX-sp … スマホ時のカラムの幅（指定がなければ100％幅）

<div class="flex m60">
<div class="__col6">
</div>
<div class="__col6">
</div>
</div>


上記のレイアウトしたいとき、原稿指示上では col6x2 と記述しています。

スマホでもカラムの横並びを維持

スマホでカラムを縦配置にするときにカラムの表示順を逆転

通常、PCで左配置されているカラムは、スマホの縦配置では上に配置されるが、ここでは画像の下に配置される。

片方のカラムのみコンテンツエリアをはみ出す

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

Fontawesome

Fontawesome 5 Free

利用頻度が高そうなもの

アイコンの回転/反転

重ねて使う

[h2]

大見出しが入ります

大見出しが入ります

[h3]

中見出しが入ります

大見出しが入ります

[h4]

小見出しが入ります

小見出しが入ります

1 小見出しが入ります

5 准看護師

装飾なしの見出し

[h5]

小見出しが入ります

小見出しが入ります

装飾なしの見出し

[hr]

---

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

この文章はダミーです。量を確認するために入れています。

本文・リスト

[p/本文]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。リンクです。リンクです。リンクです。文字の大きさ、量、字間、行間等を確認するために入れています。
リンクです。リンクです。リンクです。
マークなしリンクです。マークなしリンクです。
矢印が逆向きのリンクです。

[lead/em]

リード文。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[lead/em.alt]

リード文。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[b/strong]

テキストbタグ / テキストstrongタグ

[maker/ラインマーカー]

テキストbタグ / テキストstrongタグ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[small/memo]

注意書き この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[kome/※/*]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[ul.kome]

この文章はダミーです。^※1この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

ラベル・バッジ

[label]

ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA

[label.fs-normal] フォントを親要素サイズで表示

ラベルパターンA

[label.label-simple]

ラベルパターンA

[label.label-simple.fs-normal]

ラベルパターンA ラベルパターンA

[label.alt]

ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA ラベルパターンA

[label.label-simple.colored]

ラベルパターンA

リスト

[ul]箇条書きリスト

• ulのリスト要素（1）
• ulのリスト要素（2）が入りますリンクです。リンクです。リンクです。ulのリスト要素（2）が入りますulのリスト要素（2）が入りますulのリスト要素（2）が入ります
• ulのリスト要素（3）

[ul.roomy]箇条書きリスト（間隔広め）

• ulのリスト要素（1）
• ulのリスト要素（2）が入りますリンクです。リンクです。リンクです。ulのリスト要素（2）が入りますulのリスト要素（2）が入りますulのリスト要素（2）が入ります

[ul.fa-ul] 行等記号に絵文字利用

• ダミー
• ダミーダミー
• ダミーダミーダミー

[ul.inline-ul] インラインに表示

• ダミー
• ダミーダミー
• ダミーダミーダミー

[ul.kome] ※箇条書き

• ダミー
• ダミーダミー
• この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[ul.check] ※箇条書き

• ダミー
• ダミーダミー
• この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[ul.ul01]箇条書きリスト（カスタム）

• ulのリスト要素（1）
• ulのリスト要素（2）が入りますリンクです。リンクです。リンクです。ulのリスト要素（2）が入りますulのリスト要素（2）が入りますulのリスト要素（2）が入ります

[ol]番号付きの箇条書きリスト

1. olのリスト要素
2. olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素

[ol.rich]見た目がリッチな番号付きの箇条書きリスト

1. olのリスト要素
2. olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素

[dl]記述リスト

[dt] の見出しが入ります（テキスト）

[dd] 本文。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する。

dtの見出しが入ります（テキスト）

dd本文。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する。

dd本文。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する。

流れ・フロー

[ol.rich.flow]見た目がリッチな番号付きの箇条書きリストをベースにした簡易的な流れ図

1. olのリスト要素
2. olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素
3. olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素olのリスト要素

[step/flow]

1. 見出しテキスト

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。

2. 見出しテキストが入ります
見出しテキストが入ります

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。

3. 見出しテキストのみのブロック

4. 見出しテキストが入ります見出しテキストが入ります

[step-simple/flow-simple]

1受付

ご連絡させていただきました入院日時に正面受付へお越しください。
ご連絡させていただきました入院日時に正面受付へお越しください。
ご連絡させていただきました入院日時に正面受付へお越しください。

2診察

担当医師による診察。

3検査

各種必要な検査。

4病棟

検査が終了後、病棟へご案内。

[step-smart/flow-smart

1 見出しテキストが入ります。
見出しテキストが入ります。

当院へお電話いただき、共同利用の予約希望とお伝えください。
担当課にお繋ぎいたします。

入退院支援・地域連携部

Tel　000-1234-5678
（予約状況により、当日のご予約も可能です。）

2 見出しテキストが入ります。

受信者さまのお名前・生年月日・希望日時・撮影部位等をお伝えいただき、日程調整をいたします。

3 見出しテキストが入ります。

下記検査依頼書に必要事項をご記入いただき、FAXをお願いいたします。

入退院支援・地域連携部

Fax　000-1234-5678

タイムライン・スケジュール

[timeline/TL]タイムライン

• 8:30 全体朝礼
• 8:45 病棟部門朝礼
• 9:00〜10:00 持参薬、服薬指導
• 11:30 持参薬処理、セット
• 12:30
• あああああああああ

• 8:30～9:00 全体朝礼

  • ダミー
  • ダミーダミー
  • ダミーダミーダミー
• 10:00～

  この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  メモアイコン付きの小さいボックスです。メモアイコン付きの小さいボックスです。メモアイコン付きの小さいボックスです。

  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

  

テーブル

[table]

th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。

[table.alt]

th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。

[table-simple]シンプルな表組み/テーブル

th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。

[table.table-narrow]セルのpaddingが狭い

th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。

[table.table-taC]セル内の中央揃え

th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。

[table.td-taR]tdセルのみ中央揃え

th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。
th 見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。

[table]ノーマルな表組み/テーブル

th見出しが入ります th見出しが入ります	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。この文章はダミーです。 文字の大きさ、量、字間。
	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。この文章はダミーです。 文字の大きさ、量、字間。
th見出しが入ります th見出しが入ります	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。 この文章はダミーです。文字の大きさ、量、字間。
	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。この文章はダミーです。文字の大きさ、量、字間。

[table-classic]ノーマルな表組み/テーブル 色バリエーション

th見出しが入ります th見出しが入ります	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。この文章はダミーです。 文字の大きさ、量、字間。
	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。この文章はダミーです。 文字の大きさ、量、字間。
th見出しが入ります th見出しが入ります	th見出しが入ります th見出しが入ります	この文章はダミーです。文字の大きさ、量、字間。 この文章はダミーです。文字の大きさ、量、字間。
	th見出しが入ります th見出しが入ります	空欄を斜線で示す [.blank-slash]

囲み

[box01]囲み1

[box02]囲み2

[box03]囲み3

boxの高さを揃える方法 box01.h100p

セクションを区切るレイアウト・全幅

CTA・お問い合わせ・問合せ

[CTA]

** TELは <a class=”tel”>、FAXは <span class=”tel fax”> のマークアップであることに注意。
検証ツール上ではJavaScriptの処理によりaタグがspanに書き換えられた状態で記述されます。スマホでのみaタグを有効にするためです。

アコーディオン・タブ

[QA]

見学は可能ですか？

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

透析の変更は可能ですか？

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

[AC]

見学は可能ですか？

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

透析の変更は可能ですか？

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

見学は可能ですか？

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

透析の変更は可能ですか？

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

[HALFHIDE]

ボタン・ナビゲーション

[pnav] ページ内リンク・アンカーリンク

[btn]ボタン

お問い合わせ

[btn-large]送信ボタン

[btn-download-icon]ダウンロードボタン

紹介状をダウンロードする

[btn-download]

紹介状をダウンロードする

[lnav]汎用ナビ

[lnav-rich]ローカルナビ（下層ページ末端のナビゲーション用）

[lnav-rich]ローカルナビ（サムネあり、下層ページMVと画像を共用する想定：同アスペクト比）

[rel-nav]関連ページへのリンク

[next-nav]複数ページにまたがるコンテンツのリンク

NEXT

見出しテキストが入ります

[next-nav-rev]複数ページにまたがるコンテンツのリンク

見出しテキストが入ります
見出しテキストが入ります

医師紹介