モジュール詳細用モジュール

詳細用モジュールを紹介しています。ソースをダブルクリックするとコピーしやすくなりますので、必要に応じてご利用ください。

<div class="summary">
<p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p>
<!-- / .summary --></div>

</div>

アンカーリンク

見出し・リンク・ご注意
画像+テキスト
テーブル
2グリッドテキスト
リスト
出張講義・実習合宿
教員一覧
研究一覧
卒業生メッセージ
よくあるご質問
関連リンク

<div class="mod-alink">
<p class="lv02"><b>見出し</b></p>
<ul>
<li><a href="#section01">アンカーリンク1</a></li>
<li><a href="#section02">アンカーリンク2</a></li>
<li><a href="#section03">アンカーリンク3</a></li>
</ul>
<!-- / .mod-alink --></div>

<ul>

<li><a href="#section01">アンカーリンク1</a></li>

<li><a href="#section02">アンカーリンク2</a></li>

<li><a href="#section03">アンカーリンク3</a></li>

</ul>

</div>

見出し

<h2 class="lv02">見出し</h2>

1	<h2 class="lv02">見出し</h2>

小見出し

<h3 class="lv03">小見出し</h3>

1	<h3 class="lv03">小見出し</h3>

◯ ◯ ◯ ◯ ◯

<p><a href="#" class="icoArrow">◯ ◯ ◯ ◯ ◯</a></p>

1	<p><a href="#" class="icoArrow">◯ ◯ ◯ ◯ ◯</a></p>

◯ ◯ ◯ ◯ ◯

<p><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></p>

1	<p><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></p>

◯ ◯ ◯ ◯ ◯

<p><a href="#" target="_blank" class="icoPdf">◯ ◯ ◯ ◯ ◯</a></p>

1	<p><a href="#" target="_blank" class="icoPdf">◯ ◯ ◯ ◯ ◯</a></p>

ご注意◯ ◯ ◯ ◯ ◯

<p><b class="labelImportant">ご注意</b>◯ ◯ ◯ ◯ ◯</p>

1	<p><b class="labelImportant">ご注意</b>◯ ◯ ◯ ◯ ◯</p>

画像+テキスト

拡大画像なし

◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

<div class="mod-imgTxt">
<h2 class="lv02">見出し</h2>
<dl>
<dt>
<figure>
<img src="https://www.coins.tsukuba.ac.jp/wp/wp-content/uploads/ファイル名.jpg" alt="画像説明">
<figcaption class="displayN">&nbsp;</figcaption>
</figure>
</dt>
<dd>
<h3 class="lv03">拡大画像なし</h3>
<p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p>
<ol>
<li><a href="#">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#">◯ ◯ ◯ ◯ ◯</a></li>
</ol>
</dd>
</dl>
<!-- / .mod-imgTxt --></div>

<dl>

<dt>

</figure>

</dt>

<dd>

<h3 class="lv03">拡大画像なし</h3>

<ol>

</ol>

</dd>

</dl>

</div>

拡大する

拡大画像あり

春の説明会
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯

<div class="mod-imgTxt">
<h2 class="lv02">見出し</h2>
<dl>
<dt>
<figure>
<img src="https://www.coins.tsukuba.ac.jp/wp/wp-content/uploads/ファイル名.jpg" alt="画像説明">
<figcaption><a href="https://www.coins.tsukuba.ac.jp/wp/wp-content/uploads/ファイル名.jpg" class="icoArrow fancybox">拡大する</a></figcaption>
</figure>
</dt>
<dd>
<h3 class="lv03">小見出し</h3>
<table>
<tr><td colspan="2" class="spring"><a href="#" target="_blank" class="icoBlank">春の説明会</a></td></tr>
<tr><th width="25%">● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
</table>
</dd>
</dl>
<!-- / .mod-imgTxt --></div>

<dl>

<dt>

</figure>

</dt>

<dd>

<table>

<tr><td colspan="2" class="spring"><a href="#" target="_blank" class="icoBlank">春の説明会</a></td></tr>

</table>

</dd>

</dl>

</div>

※春または午後の場合は、class=”spring or pm” 夏または午前の場合は、class=”summer or am” に変更します。

<p><span class="indent">※◯ ◯ ◯ ◯ ◯</span></p>

1	<p><span class="indent">※◯ ◯ ◯ ◯ ◯</span></p>

テーブル

Aタイプ

	● ● ●	● ● ●	● ● ●	● ● ●	● ● ●
● ● ●	◯ ◯ ◯	◯ ◯ ◯	◯ ◯ ◯	◯ ◯ ◯	◯ ◯ ◯
● ● ●	◯ ◯ ◯	◯ ◯ ◯	◯ ◯ ◯	◯ ◯ ◯	◯ ◯ ◯

<table class="responsive mb15">
<tbody>
<tr>
<th class="top" width="25%"></th>
<td class="topGray">● ● ●</td>
<td class="topGray">● ● ●</td>
<td class="topGray">● ● ●</td>
<td class="topGray">● ● ●</td>
<td class="topGray">● ● ●</td>
</tr>
<tr>
<th>● ● ●</th>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
</tr>
<tr>
<th>● ● ●</th>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
<td>◯ ◯ ◯</td>
</tr>
</tbody>
</table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

Bタイプ

● ● ●	◯ ◯ ◯
● ● ●	◯ ◯ ◯
● ● ●	◯ ◯ ◯

<table class="mb15">
<tbody>
<tr><th class="top" width="25%">● ● ●</th><td class="top">◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯</td></tr>
</tbody>
</table>

<tbody>

</tbody>

</table>

2グリッドテキスト

小見出し: ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

小見出し: ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

<div class="twoGrid">
<div class="mod-tg01">
<dl>
<dt><h3 class="lv03">小見出し</h3></dt>
<dd><p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p></dd>
</dl>
<!-- / .mod-tg01 --></div>

<div class="mod-tg01">
<dl>
<dt><h3 class="lv03">小見出し</h3></dt>
<dd><p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p></dd>
</dl>
<!-- / .mod-tg01 --></div>
<!-- / .twoGrid --></div>

<dl>

</dl>

</div>

<dl>

</dl>

</div>

</div>

<div class="linkArea">
<ul class="list01">
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
</ul>
<!-- / .linkArea --></div>

</ul>

</div>

出張講義・実習合宿

タイトル
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

タイトル
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

過去の◯ ◯ ◯を見る

タイトル
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

タイトル
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯
● ● ●	◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯

<div class="twoGrid">
<div class="mod-tg01">
<table class="mb15">
<tr><td colspan="2" class="base">タイトル</td></tr>
<tr><th width="25%">● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
</table>
<p>◯ ◯ ◯ ◯ ◯</p>
<div class="openArea">
<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>
<div class="openTxt"><p>◯ ◯ ◯ ◯ ◯</p></div>
<!-- / .openArea --></div>
<!-- / .mod-tg01 --></div>

<div class="mod-tg01">
<table class="mb15">
<tr><td colspan="2" class="base">タイトル</td></tr>
<tr><th width="25%">● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
</table>
<p>◯ ◯ ◯ ◯ ◯</p>
<div class="openArea">
<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>
<div class="openTxt"><p>◯ ◯ ◯ ◯ ◯</p></div>
<!-- / .openArea --></div>
<!-- / .mod-tg01 --></div>
<!-- / .twoGrid --></div>

<div class="openArea">
<div class="openHead mb30">
<div class="btnArea">
<ul class="center">
<li><a>過去の◯ ◯ ◯を見る</a></li>
</ul>
<!-- / .btnArea --></div>
<!-- / .openHead --></div>

<div class="openTxt">
<div class="twoGrid">
<div class="mod-tg01">
<table class="mb15">
<tr><td colspan="2" class="base">タイトル</td></tr>
<tr><th width="25%">● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
</table>
<p>◯ ◯ ◯ ◯ ◯</p>
<div class="openArea">
<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>
<div class="openTxt"><p>◯ ◯ ◯ ◯ ◯</p></div>
<!-- / .openArea --></div>
<!-- / .mod-tg01 --></div>

<div class="mod-tg01">
<table class="mb15">
<tr><td colspan="2" class="base">タイトル</td></tr>
<tr><th width="25%">● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td></tr>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
<tr><th>● ● ●</th><td>◯ ◯ ◯ ◯ ◯</td>
</table>
<p>◯ ◯ ◯ ◯ ◯</p>
<div class="openArea">
<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>
<div class="openTxt"><p>◯ ◯ ◯ ◯ ◯</p></div>
<!-- / .openArea --></div>
<!-- / .mod-tg01 --></div>
<!-- / .twoGrid --></div>
<!-- / .openTxt --></div>
<!-- / .openArea --></div>

</table>

<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>

</div>

</div>

</table>

<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>

</div>

</div>

</div>

</ul>

</div>

</div>

</table>

<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>

</div>

</div>

</table>

<div class="openHead"><p><a class="icoArrow">続きを読む</a></p></div>

</div>

</div>

</div>

</div>

</div>

教員一覧

教授准教授講師助教

教員名

◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

メッセージを見る

<div class="mod-tg02">
<dl>
<dt><img src="https://www.coins.tsukuba.ac.jp/wp/wp-content/uploads/ファイル名.jpg" alt="教員名の写真">
<span class="labelProfessor">教授</span>
<span class="labelAssociate">准教授</span>
<span class="labelLecturer">講師</span>
<span class="labelAssistant">助教</span>
</dt>
<dd>
<p class="lv03"><a href="#" target="_blank" class="icoBlank">教員名</a></p>
<p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p>
<div class="btnArea">
<ul class="list01 small">
<li><a class="fancybox fancybox.iframe" href="#"><span>メッセージを見る</span></a></li>
</ul>
<!-- / .btnArea --></div>
</dd>
</dl>
<!-- / .mod-tg02 --></div>

<dl>

</dt>

<dd>

<li><a class="fancybox fancybox.iframe" href="#"><span>メッセージを見る</span></a></li>

</ul>

</div>

</dd>

</dl>

</div>

研究一覧

タイトル

◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯。詳細を見る

教授名

<div class="mod-tg03">
<h2 class="lv02">研究室名</h2>
<dl>
<dt><img src="https://www.coins.tsukuba.ac.jp/wp/wp-content/uploads/ファイル名.jpg"></dt>
<dd>
<h3 class="lv03">タイトル</h3>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯。<a href="#" target="_blank" class="icoBlank displayIB">詳細を見る</a>
<div class="linkArea">
<ul class="list03 small">
<li><a href="#" target="_blank" class="icoBlank">教授名</a></li>
</ul>
<!-- / .linkArea --></div>
</dd>
</dl>
<!-- / .mod-tg03 --></div>

<dl>

<dd>

<h3 class="lv03">タイトル</h3>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯。<a href="#" target="_blank" class="icoBlank displayIB">詳細を見る</a>

</ul>

</div>

</dd>

</dl>

</div>

卒業生メッセージ

名前

◯ ◯ ◯ ◯ ◯
◯ ◯ ◯ ◯ ◯
◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

<section>
<div class="mod-imgTxtSmall">
<h2 class="lv02">20xx年卒業生</h2>
<dl>
<dt><img src="http://dummyimage.com/80x80" alt="名前の写真"></dt>
<dd>
<h3 class="lv03">名前</h3>
<ul class="square">
<li>◯ ◯ ◯ ◯ ◯</li>
<li>◯ ◯ ◯ ◯ ◯</li>
<li>◯ ◯ ◯ ◯ ◯</li>
</ul>
</dd>
</dl>

<p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p>
<!-- / .mod-imgTxtSmall --></div>
</section>

<h2 class="lv02">20xx年卒業生</h2>

<dl>

<dd>

</ul>

</dd>

</dl>

</div>

</section>

よくあるご質問

Q.質問

◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯

<h3 class="lv03">Q.質問</h3>
<p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p>
<div class="openArea mb15">
<div class="openHead"><p><a class="button small"><span>続きを読む</span></a></p></div>
<div class="openTxt">
<p>◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯</p>
<ul class="mb15">
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
<li><a href="#" target="_blank" class="icoBlank">◯ ◯ ◯ ◯ ◯</a></li>
</ul>
<!-- / .openTxt --></div>
<!-- / .openArea --></div>

<div class="openHead"><p><a class="button small"><span>続きを読む</span></a></p></div>

</ul>

</div>

</div>

モジュール詳細用モジュール

見出し

小見出し

画像+テキスト

拡大画像なし

拡大画像あり

テーブル

Aタイプ

Bタイプ

2グリッドテキスト

小見出し

小見出し

リスト

リンクなし

リンクあり

出張講義・実習合宿

教員一覧

研究一覧

タイトル

卒業生メッセージ

名前

よくあるご質問

Q.質問

関連リンク