*サンプルページ*
見出し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>
- オーダーリスト
- オーダーリスト
- オーダーリスト
<ol> <li>オーダーリスト</li> <li>オーダーリスト</li> <li>オーダーリスト</li> </ol>
アイコン・装飾・文字
<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>
<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>
<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カラムレイアウト
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy.png)
<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>
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy.png)
<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
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy.png)
<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>
テキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy_a.png)
<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>
テキストが入りますテキストが入ります
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy_a.png)
テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
<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>
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy_c.png)
タイトル
<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>
タイトル
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/second/dummy_c.png)
<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>
アクセス
<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>
お気軽にお問合せください
大田区シルバー人材センターについて、ご不明なことがありましたら、
お電話またはお問い合わせフォームよりご連絡お待ちしております。
![](https://www.ota-sjc.or.jp/wp/wp-content/themes/otasilver/images/home/home_img21.png)