鷲谷記念病院

SUBPAGE

↑ [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で左配置されているカラムは、スマホの縦配置では上に配置されるが、ここでは画像の下に配置される。

［caption/cap］ 画像のキャプション。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。





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

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

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









Fontawesome

Fontawesome 5 Free

利用頻度が高そうなもの

アイコンの回転/反転

重ねて使う






[h1-richA]

[en] Ambulatory

[h1] 外来

[lg] 地域のかかりつけ医として
さまざまな症状を診察いたします。

[p] 子どもさんからご高齢の方まで、地域の皆さまに安心して過ごしていただきたい。皆さまに気軽に頼っていただけるよう、親身で丁寧な対応を心がけます。





[h1-richB]

[en] Rehabilitaion / Stroke Rehabilitaion Center

[b] 回復期リハビリテーション病棟

[h1] ＜h1＞テキストが入ります。

[bar] 2017年10月より回復期リハビリ病棟が60床に増床

[p] 脳卒中リハビリセンター」では、脳神経外科専門医が４名在籍しており、急性期病院の治療をスムーズに引き継いで、回復具合に合わせてリハビリを行います。
薬剤師、管理栄養士、セラピストなど、多くの専門スタッフが患者さまに関わり、薬の管理や栄養状態などを管理し在宅復帰に向けた治療を行います。








[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.roomy]箇条書きリスト（間隔広め）

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

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

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

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

[ul.kome] ※箇条書き

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

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



[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～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

見出し4が入ります

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



[box02]囲み2

見出し4が入ります

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



[box03]囲み3

見出し4が入ります

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





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

見出し4が入ります

画像のキャプション。

見出し4が入ります

画像のキャプション。この文章はダミーです。

見出し4が入ります

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










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



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





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



タイトル

メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。




タイトル

メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。

ラベルパターンA

メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。メモアイコン付きの大きいボックス。補足や詳細な説明をする時におすすめです。











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

[section-01]



[section-02]



[section-03]



[section-04]



ページ幅






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

[CTA]

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

ここにタイトルが入ります

012-345-6789（直通）

月～金 8時30分～17時まで（祝日・年末年始除く）



ここにタイトルが入ります

012-345-6789（直通）

月～金 8時30分～17時まで
（祝日・年末年始除く）

[btn]お問い合わせ

ここにタイトルが入ります

012-345-6789

月～金 8時30分～17時まで
（祝日・年末年始除く）






アコーディオン・タブ

[QA]

見学は可能ですか？
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
透析の変更は可能ですか？
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。


[AC]

見学は可能ですか？
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
透析の変更は可能ですか？
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。



[HALFHIDE]

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




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



























タブ2
































ボタン・ナビゲーション

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

[btn]ボタン

お問い合わせ


[btn-large]送信ボタン

この内容で送信する

戻って変更する

送信内容を確認する




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

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

[btn-download]

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


リンクページ
リンクページ




[lnav]汎用ナビ






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



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








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






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

NEXT

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

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

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



医師紹介

院長
織田 信長 Oda Nobunaga

消化器内科、消化器診療チーム

専門分野 消化器一般、内視鏡治療
保有資格 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

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

院長
小野 小町

消化器内科、消化器診療チーム

専門分野 消化器一般、内視鏡治療
専門分野 消化器一般、内視鏡治療
保有資格 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。