サンプルページ

見出しh2

本文テキストが入ります。 本文テキストが入ります。

見出しh3

本文テキストが入ります。 本文テキストが入ります。

見出しh4

本文テキストが入ります。 本文テキストが入ります。

見出しh5

本文テキストが入ります。 本文テキストが入ります。

<h2 class="title">見出しh2</h2>
<h3 class="title">見出しh3</h3>
<h4 class="title">見出しh4</h4>
<h5 class="title">見出しh5</h5>

リスト

  • リスト
  • リスト
  • リスト
<ul class="commonList">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
  • 2カラム リスト
  • 2カラム リスト
  • 2カラム リスト
  • 2カラム リスト
<ul class="commonList col2List">
<li>2カラム リスト</li>
<li>2カラム リスト</li>
<li>2カラム リスト</li>
<li>2カラム リスト</li>
</ul>
  1. オーダーリスト
  2. オーダーリスト
  3. オーダーリスト
<ol>
<li>オーダーリスト</li>
<li>オーダーリスト</li>
<li>オーダーリスト</li>
</ol>

アイコン・装飾・文字

アンダーライン

リンクマーク

pdfアイコン

ワードアイコン

エクセルアイコン

別窓アイコン

<p><a href="#" class="underline">アンダーライン</a></p>
<p><a href="#" class="link">リンクマーク</a></p>
<p><a class="icon" href="#.pdf">pdfアイコン</a></p>
<p><a class="icon" href="#.doc(docx)">ワードアイコン</a></p>
<p><a class="icon" href="#.xls(xlsx)">エクセルアイコン</a></p>
<p><a href="#" class="underline">別窓アイコン<span class="icon_blank"></span></a></p>
※PDF、ワード、エクセルのアイコンは自動で判別されます。

太字

赤字

緑字

緑太字

この部分はマーカーです

大きいサイズ

小さいサイズ

<p><strong>太字</strong></p>
<p class="red">赤字</p>
<p class="blue">青字</p>
<p><strong class="blue">青太字</strong></p>
<p>この部分は<span class="marker">マーカー</span>です</p>
<p class="fontL">大きいサイズ</p>
<p class="fontS">小さいサイズ</p>

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン(矢印付き)

前のページに戻る

ボタン白

<p><a href="#" class="commonBtn btnS">ボタン</a></p>
<p><a href="#" class="btn_center commonBtn btnS">ボタン</a></p>
<p><a href="#" class="btn_right commonBtn btnS">ボタン</a></p>
<p><a href="#" class="btn_center commonBtn btnM">ボタン</a></p>
<p><a href="#" class="btn_center commonBtn btnL">ボタン</a></p>
<p><a href="#" class="commonBtn btnM link_arrow">ボタン(矢印付き)</a></p>
<p><a href="#" class="commonBtn btnM btn_back">前のページに戻る</a></p>
<p><a href="#" class="commonBtn white btnM">ボタン白</a></p>

ボタンカラム(折り返し)

2カラム

3カラム

アイコンボタン

4カラム

寄せ

ああああ(基本的には、何も指定しなければ左寄せになります)

いいいい

うううう

<p class="taL">ああああ(基本的には、何も指定しなければ左寄せになります)</p>
<p class="taR">いいいい</p>
<p class="taC">うううう</p>

画像センター

<p class="taC"><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></p>

画像2カラム

画像小さめ

<ul class="imgLine2 small">
<li><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></li>
<li><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></li>
</ul>

画像3カラム

<ul class="imgLine3">
<li><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></li>
<li><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></li>
<li><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></li>
</ul>

2カラムレイアウト

文字&画像

見出し4

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

<div class="listCol2">
<div class="listItem">
<h4 class="title">見出し4</h4>
<p>テキスト</p>
</div>
<div class="listItem">
<p><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></p>
</div>
</div>

画像&画像

<div class="listCol2">
<div class="listItem">
<p><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></p>
</div>
<div class="listItem">
<p><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></p>
</div>
</div>

文字&文字

見出し4

テキスト

見出し3

テキスト

<div class="listCol2">
<div class="listItem">
<h4 class="title">見出し4</h4>
<p>テキスト</p>
</div>
<div class="listItem">
<h4 class="title">見出し4</h4>
<p>テキスト</p>
</div>
</div>

回り込み

画像右寄せ

スマホ時 画像上

画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP"><span class="img right"><img src="/wp-content/uploads/2022/09/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

スマホ時 画像下

画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP sp_img_btm"><span class="img right"><img src="/wp-content/uploads/2022/09/dummy.png" alt=""><span class="cap">画像のキャプション 画像のキャプション</span></span><span class="text">テキスト</span></p>

画像左寄せ

スマホ時 画像上

画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP"><span class="img left"><img src="/wp-content/uploads/2022/09/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

スマホ時 画像下

画像のキャプション 画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP sp_img_btm"><span class="img left"><img src="/wp-content/uploads/2022/09/dummy.png" alt=""><span class="cap">画像のキャプション 画像のキャプション</span></span><span class="text">テキスト</span></p>

テーブル

<table class="commonTable">
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
</table>
<table class="commonTable">
<tr>
<th>中</th>
<th>中</th>
<th>中</th>
</tr>
<tr>
<td>中</td>
<td>中</td>
<td>中</td>
</tr>
</table>
th subth subth subth
th td td td
<table class="commonTable">
<tr>
<th>th</th>
<th class="sub">subth</th>
<th class="sub">subth</th>
<th class="sub">subth</th>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>

スマホ時:横スクロール

⟺ スクロールできます
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
<span class="forSP scrolltext">&#10234; スクロールできます</span>
<div class="scrollTable">
<table class="commonTable">
<tr>
<th width="170">タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</div>
⟺ スクロールできます
タイトル タイトル タイトル タイトル
テキストテキスト テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
<span class="forSP scrolltext">&#10234; スクロールできます</span>
<div class="scrollTable">
<table class="commonTable">
<tr>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
</tr>
<tr>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</div>

囲み(背景色付き)

タイトル

補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 

<div class="colorBox bgGray">
<span class="title">タイトル</span>
<p>補足情報テキスト</p>
</div>

囲み(罫線付き)

タイトル

補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 補足情報テキスト 

<div class="borderBox bdGray">
<span class="title">タイトル</span>
<p>補足情報テキスト</p>
</div>

学会誌バックナンバー 一覧

日付と見出しのリスト

<dl class="lineList">
<div>
<dt>2022.08.01</dt>
<dd>
<p><a class="icon" href=".pdf">テキスト</a></p>
</dd>
</div>
</dl>

画像&テキストエリア(幅固定)

<div class="imgFixedCol">
<div class="img"><img src="/wp-content/uploads/2022/09/dummy.png" alt=""></div>
<div class="wideItem">
<dl class="lineList">
<div>
<dt>2022.08.01</dt>
<dd>
<p><a class="icon" href=".pdf">テキスト</a></p>
</dd>
</div>
</dl>
</div>
</div>
									

オンライン研修会「身体拘束を始めないための看護管理」

開催日時

2022年1月22日(土)13:00~16:30

会場

Zoomによるオンライン開催

会費

会 員 無料
非会員 2000円

参加申し込み

フォームよりお申し込みください

※申込締切1月10日。定員になり次第締め切ります。

Youtube埋め込み

<div class="iframeWrap">
<iframe width="100%" src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>