＊サンプルページ＊

見出しh2

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

見出しh2

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

見出しh3

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

見出しh3

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

見出しh4

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

<h2 class="common_h2">見出しh2</h2>
<h2 class="h2_a">見出しh2</h2>
<p>本文テキストが入ります。　本文テキストが入ります。</p>
<h3 class="common_h3">見出しh3</h3>
<h3 class="h3_a">見出しh3</h3>
<h4 class="common_h4">見出しh4</h4>

リスト

  • リスト
  • リスト
  • リスト
<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アイコン

ワードアイコン

エクセルアイコン

別窓アイコン

PDFダウンロードリンク

<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 class="icon_blank" href="#">別窓アイコン</a></p>
<p><a href="#" class="pdfLink_d">PDFダウンロードリンク</a></p>
<p><a href="#" class="pdfLink_d">PDFダウンロードリンク</a></p>
※PDF、ワード、エクセルのアイコンは自動で判別されます。

太字

赤字

青字

青太字

大きいサイズ

小さいサイズ

<p><strong>太字</strong></p>
<p class="red">赤字</p>
<p class="blue">青字</p>
<p><strong class="blue">青太字</strong></p>
<p class="ontL">大きいサイズ</p>
<p class="ontS">小さいサイズ</p>

ボタン

ボタン

ボタン

ボタン

戻るボタン

戻るボタン

戻るボタン

ボタン

ボタン

ボタン

ボタン

ボタン

ボタン

<p><a href="#" class="secondBtn_c">ボタン</a></p>
<p><a href="#" class="secondBtn_c btn_center">ボタン</a></p>
<p><a href="#" class="secondBtn_c btn_right">ボタン</a></p>
<p><a href="#" class="secondBtn_a">ボタン</a></p>
<p><a href="#" class="btn_center secondBtn_a">ボタン</a></p>
<p><a href="#" class="btn_right secondBtn_a">ボタン</a></p>
<p><a href="#" class="ruturnBtn">戻るボタン</a></p>
<p><a href="#" class="btn_center ruturnBtn">戻るボタン</a></p>
<p><a href="#" class="btn_right ruturnBtn">戻るボタン</a></p>
<p><a href="#" class="secondBtn_b">ボタン</a></p>
<p><a href="#" class="secondBtn_b btn_center">ボタン</a></p>
<p><a href="#" class="secondBtn_b btn_right">ボタン</a></p>
pdfボタン
pdfボタン pdfボタン
pdfボタン pdfボタン pdfボタン 
<div class="icon_downoloadBtn single">
<a href="#" class="iconPdf">pdfボタン</a>
</div>
<div class="icon_downoloadBtn double">
<a href="#" class="iconPdf">pdfボタン</a>
<a href="#" class="iconPdf">pdfボタン</a>
</div>
<div class="icon_downoloadBtn triple">
<a href="#" class="iconPdf">pdfボタン</a>
<a href="#" class="iconPdf">pdfボタン</a>
<a href="#" class="iconPdf">pdfボタン</a>
</div>
pdfボタン
pdfボタン
アイコンなしボタン 
<div class="pdf_download_box">
<div class="pdf_download_item">
<a class="icon_pdf" href="#">pdfボタン</a>
</div>
<div class="pdf_download_item">
<a class="icon_pdf" href="#">pdfボタン</a>
</div>
<div class="pdf_download_item">
<a href="#">アイコンなしボタン</a>
</div>
</div>

寄せ

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

いいいい

うううう

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

画像センター

<p class="taC"><img src="../images/second/dummy.png" alt=""></p>

画像2カラム

画像小さめ

<ul class="imgLine2 small">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>

画像3カラム

<ul class="imgLine3">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>

回り込み

画像右寄せ

スマホ時　画像上

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

<p class="imgInP"><span class="img right"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

スマホ時　画像下

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

<p class="imgInP sp_img_btm"><span class="img right"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></span><span class="text">テキスト</span></p>

画像左寄せ

スマホ時　画像上

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

<p class="imgInP"><span class="img left"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

スマホ時　画像下

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

<p class="imgInP sp_img_btm"><span class="img left"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></span><span class="text">テキスト</span></p>

2カラムレイアウト

画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
画像のキャプション　画像のキャプション
<div class="twoCol">
<div class="txt">キストテキストテキストテキストテキスト</div>
<div class="img"><img src="https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
</div>
画像のキャプション　画像のキャプション
画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="twoCol">
<div class="img"><img src="https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
<div class="txt">キストテキストテキストテキストテキスト</div>
</div>

towCol layout sample（これはh3）

.txt内は通常のタグが自由に使えます。（これはp）

  • これはcommonList
  • これはcommonList
画像のキャプション　画像のキャプション
<div class="twoCol">
<div class="txt">
<h3 class="title">towCol layout sample（これはh3）</h3>
<p>.txt内は通常のタグが自由に使えます。（これはp）</p>
<ul class="commonList">
<li>これはcommonList</li>
<li>これはcommonList</li>
</ul>
</div>
<div class="img"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
</div>

テキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります

<div class="twoCal_a">
<h3 class="title">テキストが入りますテキストが入ります</h3>
<div class="fleWrap">
<div class="leftBox">
<p><span class="firstTxt">テ</span>キストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>
<div class="rightBox">
<div class="imgBox">
<img src="../images/second/dummy_a.png" alt="">
</div>
</div>
</div>
</div>

テキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります

<div class="twoCal_b">
<h3 class="title">テキストが入りますテキストが入ります</h3>
<div class="fleWrap">
<div class="leftBox">
<div class="imgBox">
<img src="../images/second/dummy_a.png" alt="">
</div>
</div>
<div class="rightBox">
<p>テキストが入ります</p>
</div>
</div>
</div>

タイトル

詳しく見る

<div class="twoCal_c">
<div class="leftBox">
<img src="../images/second/dummy_c.png" alt="">
</div>
<div class="rightBox">
<h3 class="title">タイトル</h3>
<p><a href="#" class="secondBtn_b btn_center">詳しく見る</a></p>
</div>
</div>

タイトル

詳しく見る

<div class="twoCal_d">
<div class="leftBox">
<h3 class="title">タイトル</h3>
<p><a href="#" class="secondBtn_b btn_center">詳しく見る</a></p>
</div>
<div class="rightBox">
<img src="../images/second/dummy_c.png" alt="">
</div>
</div>

テーブル

中 中 中
中 中 中 
<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>
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト 
<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>
タイトル タイトル タイトル タイトル
テキストテキスト テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト 
<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>

囲み（罫線付き）

デフォルトのボーダーカラーは黒。bdGrayを付けるとこの色になる。補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　補足情報テキスト　

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

アクセス

本部

〒144-0055　東京都大田区仲六郷1-6-9-125
TEL:03-3739-6666　FAX:03-3734-0722
JR・東急 蒲田駅より徒歩15分
京急 雑色駅より徒歩13分

印刷する
<div class="accessBox">
<div class="accessFle">
<div class="leftBox">
<p class="accessPoint">本部</p>
<div class="txt">
<p>〒144-0055　東京都大田区仲六郷1-6-9-125 <br>
TEL:03-3739-6666　FAX:03-3734-0722<br>
JR・東急 蒲田駅より徒歩15分<br>
京急 雑色駅より徒歩13分
</p>
</div>
<div class="iconBtn">
<a class="point_icon" href="#" target="_blank">印刷する</a>
</div>
</div>
<div class="rightBox">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3245.969968358985!2d139.71154851548184!3d35.55444388022409!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601860f584211aa3%3A0x80e594862a992943!2z44CSMTQ0LTAwNTUg5p2x5Lqs6YO95aSn55Sw5Yy65Luy5YWt6YO377yR5LiB55uu77yW4oiS77yZ!5e0!3m2!1sja!2sjp!4v1612951757866!5m2!1sja!2sjp" width="100%" height="auto" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</div>

Youtube埋め込み

<div class="ytWrap">
<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>

お気軽にお問合せください

大田区シルバー人材センターについて、ご不明なことがありましたら、
お電話またはお問い合わせフォームよりご連絡お待ちしております。

お電話でのお問い合わせはこちら 0120-200-027
お問い合わせフォームは
こちら
Smile to Smile 会員向け専用サイト Smile to Smile 会員向け専用サイト