リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。リード文が入ります。

HTMLコード

<p class="lead">リード文が入ります。</p>

見出し２

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。（強調文）これは見出しなどの装飾のサンプルです。強調文(赤)のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

HTMLコード

<h2>見出し２</h2>
<p><strong>（強調文）これは見出しなどの装飾のサンプルです。</strong></p>
<p><strong class="red">強調文(赤)のサンプルです。</strong></p>

見出し３

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

HTMLコード

<h3>見出し３</h3>

見出し４

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

HTMLコード

<h4>見出し４</h4>
見出し５

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

HTMLコード

<h5>見出し５</h5>
見出し６

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

HTMLコード

<h6>見出し６</h6>

レイアウトパターン

レイアウトパターン１

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

キャプション

HTMLコード

<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<figure><img src="画像のURL" alt="代替テキスト">
	<figcaption class="caption">キャプション</figcaption>
</figure>

レイアウトパターン１：１

キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern1-1">
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>
キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern1-1">
	<div class="col right-col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>

レイアウトパターン２：１(１：２)

キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern2-1">
	<div class="right-col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="left-col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>
キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern1-2">
	<div class="left-col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="right-col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>

レイアウトパターン３：１(１：３)

キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern3-1">
	<div class="right-col">
		<figure><img src="画像のURL" alt="代替テキスト"
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="left-col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>
キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern1-3">
	<div class="left-col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="right-col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>

レイアウトパターン２：３(３：２)

キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern2-3">
	<div class="left-col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="right-col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>
キャプション

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。わたしたちは心のふれあいを大切に、お互いが納得できる医療体制を目指しています。疑問な点があれば専門のスタッフが相談に応じますので、お気軽にお申し出下さい。

HTMLコード

<div class="pattern3-2">
	<div class="right-col">
		<figure><img src="画像のURL" alt="代替テキスト">
			<figcaption class="caption">キャプション</figcaption>
		</figure>
	</div>
	<div class="left-col">
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>

レイアウトパターン１：１：１

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

HTMLコード

<div class="pattern1-1-1">
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>

レイアウトパターン１：１：１：１

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

精神科の治療は、患者さんと医療者の信頼関係が大切です。心に不安を抱いたり、イライラしている不安定な時ほど、温かいケアが必要となります。

HTMLコード

<div class="pattern1-1-1-1">
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
	<div class="col">
		<figure><img src="画像のURL" alt="代替テキスト"></figure>
		<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
	</div>
</div>

注意文

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

HTMLコード

<p class="caution">この注意文はダミーです。</p>
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTMLコード

<ul class="caution">
	<li>この文章はダミーです。</li>
	<li>この文章はダミーです。</li>
</ul>

注意文（強調）

心理療法・心理検査をご希望の方へ

心理療法・心理検査は、医師の依頼により行われます。ご希望の方は、主治医にご相談ください。

HTMLコード

<div class="caution-box box">
	<p class="box-head">注意文（強調）タイトル</p>
	<p>ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
</div>

文字揃え

中央揃え

この文章はダミーです。

右揃え

この文章はダミーです。

左揃え

この文章はダミーです。

HTMLコード

<p class="center-position">中央揃えダミーテキスト。</p>
<p class="right-position">右揃えダミーテキスト。</p>
<p class="left-position">左揃えダミーテキスト。</p>

リスト

箇条書きリスト

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

HTMLコード

<ul>
	<li>リストです。
		<ul>
			<li>入れ子<br>
				ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
			<li>入れ子</li>
			<li>入れ子</li>
		</ul>
	</li>
	<li>リストです。</li>
	<li>リストです。</li>
</ul>

番号リスト

  1. 番号リストです。
    1. 入れ子
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
    2. 入れ子
    3. 入れ子
  2. 番号リストです。
    • 入れ子
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
    • 入れ子
    • 入れ子
  3. 番号リストです。

HTMLコード

<ol>
	<li>番号リストです。
		<ol>
			<li>入れ子<br>
				ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
			<li>入れ子</li>
			<li>入れ子</li>
		</ol>
	</li>
	<li>番号リストです。
		<ul>
			<li>入れ子<br>
				ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
			<li>入れ子</li>
			<li>入れ子</li>
		</ul>
	</li>
	<li>番号リストです。</li>
</ol>

番号リスト(括弧付き)

  1. 番号リストです。
    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
    1. 入れ子
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
    2. 入れ子
    3. 入れ子
  2. 番号リストです。
  3. 番号リストです。

HTMLコード

<ol class="last-para">
	<li>番号リストです。<br>
			ダミーテキスト。ダミーテキスト。ダミーテキスト。
		<ol class="list_parentheses">
			<li>入れ子<br>
				ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
			<li>入れ子</li>
			<li>入れ子</li>
		</ol>
	</li>
	<li>番号リストです。</li>
	<li>番号リストです。</li>
</ol>
  1. 番号リストです。
    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
    1. 入れ子
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
    2. 入れ子
    3. 入れ子
  2. 番号リストです。
  3. 番号リストです。

HTMLコード

<ol class="list_parentheses">
	<li>番号リストです。<br>
			ダミーテキスト。ダミーテキスト。ダミーテキスト。
		<ol>
			<li>入れ子<br>
				ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
			<li>入れ子</li>
			<li>入れ子</li>
		</ol>
	</li>
	<li>番号リストです。</li>
	<li>番号リストです。</li>
</ol>

定義リスト

dt 定義リスト
dl 定義リスト内容

HTMLコード

<dl>
	<dt>dt 定義リスト</dt>
	<dd>dl 定義リスト内容</dd>
</dl>

リンク

通常リンク

テキストリンク

HTMLコード

<p class="link"><a href="リンク先URL">テキストリンク</a></p>

HTMLコード

<ul class="link-list">
	<li><a href="リンク先URL">テキストリンク</a></li>
	<li><a href="リンク先URL" target="_blank">外部リンク</a><i class="ai ai-out"></i></li>
	<li><a href="リンク先URL" target="_blank">PDFリンク</a><i class="ai ai-pdf"></i></li>
	<li><a href="リンク先URL" target="_blank">WORDリンク</a><i class="ai ai-word"></i></li>
	<li><a href="リンク先URL" target="_blank">EXCELリンク</a><i class="ai ai-excel"></i></li>
	<li><a href="リンク先URL">メールリンク</a><i class="ai ai-mail"></i></li>
</ul>

ボタンリンク

デフォルト

Large button Large button

HTMLコード

<a class="btn btn-primary btn-lg" href="リンク先URL">Large button</a>
<a class="btn btn-default btn-lg" href="リンク先URL">Large button</a>

Default button Default button

HTMLコード

<a class="btn btn-primary" href="リンク先URL">Default button</a>
<a class="btn btn-default" href="リンク先URL">Default button</a>

Small button Small button

HTMLコード

<a class="btn btn-primary btn-sm" href="リンク先URL">Small button</a>
<a class="btn btn-default btn-sm" href="リンク先URL">Small button</a>

Extra small button Extra small button

HTMLコード

<a class="btn btn-primary btn-xs" href="リンク先URL">Extra small button</a>
<a class="btn btn-default btn-xs" href="リンク先URL">Extra small button</a>

Large button Large button

HTMLコード

<a class="btn btn-primary btn-lg btn-block" href="リンク先URL">Large button</a>
<a class="btn btn-default btn-lg btn-block" href="リンク先URL">Large button</a>

特殊

一覧を見る

HTMLコード

<p class="link-btn"><a href="リンク先URL">一覧を見る</a></p>

一覧を見る

HTMLコード

<div class="center-position">
	<p class="link-btn"><a href="リンク先URL">一覧を見る</a></p>
</div>

一覧を見る

一覧を見る

HTMLコード

<div class="center-position">
	<p class="link-btn"><a href="リンク先URL">一覧を見る</a></p>
	<p class="link-btn"><a href="リンク先URL">一覧を見る</a></p>
</div>

分岐リンク

部門・検査室のご案内

医療設備のご紹介

医師のご紹介

一般事業主行動計画(PDF)

HTMLコード

<div class="related-link">
	<div class="col">
		<p><a href="リンク先URL">部門・検査室のご案内</a></p>
	</div>
	<div class="col">
		<p><a href="リンク先URL">医療設備のご紹介</a></p>
	</div>
	<div class="col">
		<p><a href="リンク先URL">医師のご紹介</a></p>
	</div>
	<div class="col">
		<p><a href="リンク先URL">一般事業主行動計画(PDF)<i class="ai ai-pdf"></i></a></p>
	</div>
</div>
公立学校共済組合 東海中央病院 岐阜県各務原市蘇原東島町4-6-2
岐阜大学医学部附属病院 岐阜県岐阜市柳戸1-1

HTMLコード

<div class="related-link related-type2">
	<div class="col">
		<a href="リンク先URL">
			<span class="related-head">公立学校共済組合 東海中央病院<i class="ai ai-out"></i></span>
			<span>岐阜県各務原市蘇原東島町4-6-2</span>
		</a>
	</div>
	<div class="col">
		<a href="リンク先URL">
			<span class="related-head">岐阜大学医学部附属病院<i class="ai ai-out"></i></span>
			<span>岐阜県岐阜市柳戸1-1</span>
		</a>
	</div>
</div>

ページ内リンク

HTMLコード

<ul class="link-anchor">
	<li><a href="リンク先URL">放射線部</a></li>
	<li><a href="リンク先URL">薬剤部</a></li>
	<li><a href="リンク先URL">ソーシャルワーカー室</a></li>
	<li><a href="リンク先URL">検査室</a></li>
	<li><a href="リンク先URL">臨床心理室</a></li>
	<li><a href="リンク先URL">作業療法室</a></li>
</ul>

テーブル

見出し ダミーテキスト ダミーテキスト
見出し ダミーテキスト ダミーテキスト
見出し ダミーテキスト ダミーテキスト

HTMLコード

<table>
	<tbody>
		<tr>
			<th>見出し</th>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
		<tr>
			<th>見出し</th>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
		<tr>
			<th>見出し</th>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
	</tbody>
</table>
見出し 見出し 見出し
ダミーテキスト ダミーテキスト ダミーテキスト
ダミーテキスト ダミーテキスト ダミーテキスト
ダミーテキスト ダミーテキスト ダミーテキスト

HTMLコード

<table>
	<tbody>
		<tr>
			<th>見出し</th>
			<th>見出し</th>
			<th>見出し</th>
		</tr>
		<tr>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
		<tr>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
		<tr>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
	</tbody>
</table>
見出し 見出し 見出し
見出し ダミーテキスト ダミーテキスト
見出し ダミーテキスト ダミーテキスト

HTMLコード

<table>
	<tbody>
		<tr>
			<th>見出し</th>
			<th>見出し</th>
			<th>見出し</th>
		</tr>
		<tr>
			<th class="sub-head">見出し</th>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
		<tr>
			<th class="sub-head">見出し</th>
			<td>ダミーテキスト</td>
			<td>ダミーテキスト</td>
		</tr>
	</tbody>
</table>

スクロールテーブル

見出し テキスト テキスト テキスト テキスト テキスト
見出し テキスト テキスト テキスト テキスト テキスト
見出し テキスト テキスト テキスト テキスト テキスト

HTMLコード

<div class="scroll-box">
	<table>
		<tbody>
		<tr>
			<th class="sub-head">見出し</th>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
		<tr>
			<th class="sub-head">見出し</th>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
		<tr>
			<th class="sub-head">見出し</th>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
			<td>テキスト</td>
		</tr>
	</tbody>
	</table>
</div>

ボックス

ボックスタイトル

ダミーテキスト。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

HTMLコード

<div class="box">
	<p class="box-head">ボックスタイトル</p>
	<p>ダミーテキスト。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

Q&A

質問1
回答回答回答回答回答回答
質問2
回答回答回答回答回答回答

HTMLコード

<dl class="qa">
	<dt>質問1</dt>
	<dd>回答回答回答回答回答回答</dd>
	<dt>質問2</dt>
	<dd>回答回答回答回答回答回答</dd>
</dl>

ブログリンク

アルコール依存治療
ブログ

詳しく見る