<h2><span>見出し2</span></h2>
<h2 class="secondary"><span>見出し2.secondary</span></h2>
<h3>見出し3</h3>
<h3 class="secondary">見出し3.secondary</h3>
<h4>見出し4</h4>
<h4 class="secondary">見出し4.secondary</h4>
<h5>見出し5</h5>
<h5 class="secondary">見出し5.secondary</h5>
<h6>見出し6</h6>
<h6 class="secondary">見出し6.secondary</h6>

<h3 class="h2"><span>見出し3に.h2</span></h3>
<h2 class="h3">見出し2に.h3</h2>
<p class="h4">pタグに.h4</p>
<div class="h5">divタグに.h5</div>
<h3 class="h6">見出し3に.h6</h3>
<h2 class="unstyled">見出し2に.unstyled</h2>
<h3 class="unstyled">見出し3に.unstyled</h3>
<h4 class="unstyled">見出し4に.unstyled</h4>
<h5 class="unstyled">見出し5に.unstyled</h5>
<h6 class="unstyled">見出し6に.unstyled</h6>

<section class="heading_group">
<h3>国立埼玉病院キャンパス</h3>
<h4>修了証明書申請 <small class="point">国立埼玉病院キャンパスの大学院・認定看護師教育課程を修了の方</small></h4>
</section><!--.heading_group-->

<section>
ここにコンテンツが入ります。margin-bottomのみが設定されています。
</section>
<article>
ここにコンテンツが入ります。margin-bottomのみが設定されています。
</article>
<hr>
<section class="half">sectionタグに.halfクラスを付与すると、bottom marginが半分になります。</section>
<div>次の要素</div>

<h1>SAMPLE.2カラムのサンプル<em>.col_2</em></h1>
<ul class="col col_2">
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure class="side"><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
</ul>
<h1>SAMPLE.3カラムのサンプル<em>.col_3</em></h1>
<ul class="col col_3">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
</ul>
<h1>SAMPLE.4カラムのサンプル<em>.col_4</em></h1>
<ul class="col col_4">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></figure><p>ダミーダミーダミー</p></li>
</ul>
<h1>SAMPLE.5カラムのサンプル</h1>
<ul class="col col_5">
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></li>
</ul>
<h1>SAMPLE.6カラムのサンプル</h1>
<ul class="col col_6">
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></li>
</ul>
<h1>SAMPLE.横一連カラムのサンプル</h1>
<ul class="col_row">
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"></li>
  <li><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"></li>
</ul>

<section class="box">
白背景
</section>

<section class="box">
  <h3 class="box_header">ボックスのヘッダーつき</h3>
  白背景
</section>

<ul class="col col_2 box_set">
  <li>白背景</li>
  <li>col_2と組み合わせて2カラムのボックス</li>
</ul>

<section class="box secondary">
  <h4 class="box_header">ボックスのヘッダー</h4>
  白ボーダー
</section>

<ul class="col col_3 box_set secondary">
  <li>白ボーダー</li>
  <li>col_3と組み合わせて</li>
  <li>3カラムのボックスのサンプル</li>
</ul>

<h1>画像あり</h1>
<ul class="col col_3 box_set thirdly">
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/characteristics/">
    <figure><img src="//cms.mejiro.ac.jp/univ/images/about/about_img01.jpg" /></figure>
    <h3>目白大学の特色</h3>
    <p>目白大学とはどんな大学なのか。<br>目白大学の特色を紹介します。</p>
    </a>
  </li>
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/message/">
    <figure><img src="//cms.mejiro.ac.jp/univ/images/about/about_img02.jpg" /></figure>
    <h3>学長あいさつ</h3>
    <p>目白大学学長 佐藤 郡衛からのメッセージ。</p>
    </a>
  </li>
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/spirit/">
    <figure><img src="//cms.mejiro.ac.jp/univ/images/about/about_img03.jpg" /></figure>
    <h3>建学の精神</h3>
    <p>「主・師・親」の教えを通した、目白大学の教育理念について紹介します。</p>
    </a>
  </li>
</ul>
<hr>
<h1>画像なし</h1>
<p>figureタグで囲ったimgタグの挿入をしなければ、同じ書き方で下記の表示になります。</p>
<ul class="col col_3 box_set thirdly">
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/characteristics/">
    <h3>目白大学の特色</h3>
    <p>目白大学とはどんな大学なのか。<br>目白大学の特色を紹介します。</p>
    </a>
  </li>
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/message/">
    <h3>学長あいさつ</h3>
    <p>目白大学学長 佐藤 郡衛からのメッセージ。</p>
    </a>
  </li>
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/spirit/">
    <h3>建学の精神</h3>
    <p>「主・師・親」の教えを通した、目白大学の教育理念について紹介します。</p>
    </a>
  </li>
</ul>
<hr>
<h1>画像、説明文なし</h1>
<ul class="col col_3 box_set thirdly">
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/characteristics/">
    <h3>目白大学の特色</h3>
    </a>
  </li>
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/message/">
    <h3>学長あいさつ</h3>
    </a>
  </li>
  <li><a class="a_box" href="//cms.mejiro.ac.jp/univ/about/spirit/">
    <h3>建学の精神</h3>
    </a>
  </li>
</ul>

<section class="box fourthly">
  <h4>斜めストライブ背景の見出しです。</h4>
  <p>斜めストライブ背景</p>
</section>
<section class="box fourthly">
<h3 class="box_header">ボックスのヘッダーつき</h3>
斜めストライブ背景</section>
<ul class="col col_2 box_set fourthly">
<li>斜めストライブ背景</li>
<li>col_2と組み合わせて2カラムのボックスのサンプル</li>
</ul>

<section class="box fourthly">
  <h4>ブルーグレー背景の見出しです。</h4>
  <p>ブルーグレー背景</p>
</section>
<section class="box fourthly">
<h3 class="box_header">ボックスのヘッダーつき</h3>
ブルーグレー背景</section>
<ul class="col col_2 box_set fourthly">
<li>ブルーグレー背景</li>
<li>col_2と組み合わせて2カラムのボックスのサンプル</li>
</ul>

<section class="box sixthly">
  <h4>青ボーダーの見出しです。</h4>
  <p>青ボーダー</p>
</section>
<section class="box sixthly">
<h3 class="box_header">ボックスのヘッダーつき</h3>
青ボーダー</section>
<ul class="col col_2 box_set sixthly">
<li>青ボーダー</li>
<li>col_2と組み合わせて2カラムのボックスのサンプル</li>
</ul>

<section class="box seventhly">
  <h4>赤ボーダーの見出し4です。</h4>
  <h5>赤ボーダーの見出し5です。</h5>
  <p>赤ボーダーの見出し４と見出し５は色が赤になります。</p>
</section>
<section class="box seventhly">
<h3 class="box_header">ボックスのヘッダーつき</h3>
赤ボーダー</section>
<ul class="col col_2 box_set seventhly">
<li>赤ボーダー</li>
<li>col_2と組み合わせて2カラムのボックスのサンプル</li>
</ul>

<figure>
</images/admission/admission_img02.jpg">
<figcaption>画像のキャプションが入ります</figcaption>
</figure>
<div class="text">
<p>画像とテキストの構成の場合は、画像のタグを先に書きます。
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト</p>
</div>

<div class="clearfix">
<figure class="side">
</images/admission/admission_img02.jpg">
<figcaption>画像のキャプションが入ります</figcaption>
</figure>
<div class="text">
<p>右に回り込みの場合。
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト</p>
</div>
</div>

<div class="clearfix">
<figure class="mirror">
</images/admission/admission_img02.jpg">
<figcaption>画像のキャプションが入ります</figcaption>
</figure>
<div class="text">
<p>左に回り込みの場合。
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト</p>
</div>
</div>

<div class="clearfix">
<figure class="side">
<ul>
<li><img src="//ui.mejiro.ac.jp/jyukensei/images/admission/admission_img02.jpg" /><figcaption>画像のキャプションが入ります</figcaption></li>
<li><img src="//ui.mejiro.ac.jp/jyukensei/images/admission/admission_img02.jpg" /><figcaption>画像のキャプションが入ります</figcaption></li>
</figure>
<div class="text">
<p>右に回り込んで複数枚表示の場合。 テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト</p>
</div>
</div>

<figure class="center">
</images/admission/admission_img02.jpg">
<figcaption>画像のキャプションが入ります</figcaption>
</figure>
<div class="text">
<p>画像のセンタリング。
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト</p>
</div>

<figure>
</images/admission/admission_img02.jpg" class="border">
<figcaption>画像のキャプションが入ります</figcaption>
</figure>
<div class="text">
<p>画像にボーダーを付ける。
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト</p>
</div>

<h1>SAMPLE.2カラムのサンプル<em>.figcol_2</em></h1>
<ul class="figcol figcol_2">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
</ul>
<h1>SAMPLE.3カラムのサンプル<em>.figcol_3</em></h1>
<ul class="figcol figcol_3">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
</ul>
<h1>SAMPLE.4カラムのサンプル<em>.figcol_4</em></h1>
<ul class="figcol figcol_4">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
</ul>
<h1>SAMPLE.5カラムのサンプル</h1>
<ul class="figcol figcol_5">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
</ul>
<h1>SAMPLE.6カラムのサンプル</h1>
<ul class="figcol figcol_6">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
</ul>
<h1>SAMPLE.横一連カラムのサンプル</h1>
<ul class="figcol_row">
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img01.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img02.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img03.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
  <li><figure><img src="//ui.mejiro.ac.jp/jyukensei/images/event/event_festival_img04.jpg" alt="学園祭"><figcaption>ダミーダミーダミー</figcaption></figure></li>
</ul>

<a href="#" class="btn">.btn</a>
<a href="#" class="btn secondary">.btn.secondary</a>
<a href="#" class="btn thirdly">.btn.thirdly</a>
<a href="#" class="btn fourthly">.btn.fourthly</a>
<a href="#" class="btn sm">.btn.sm</a>
<a href="#" class="btn lg">.btn.lg</a>
<a href="#" class="btn disabled">.btn.disabled</a>
<a href="#" class="btn block">.btn.block</a>

<ul class="btn_set">
  <li><a href="#">.btn_set</a></li>
  <li><a href="#">.btn_set</a></li>
</ul>

<ul class="btn_set secondary">
  <li><a href="#">.btn_set.secondary</a></li>
  <li><a href="#">.btn_set.secondary</a></li>
</ul>

<ul class="btn_set fourthly">
  <li><a href="#">.btn_set.fourthly</a></li>
  <li><a href="#">.btn_set.fourthly</a></li>
</ul>

<ul class="btn_set thirdly">
  <li><a href="#">.btn_set.thirdly</a></li>
  <li><a href="#">.btn_set.thirdly</a></li>
</ul>

<div class="list_line">
  <dl>
    <dt>2015.01.01</dt><dd><a href="#" class="title">テキストテキストテキスト</a></dd>
  </dl>
  <dl>
    <dt>2015.01.01</dt><dd><a href="#" class="title">テキストテキストテキスト</a></dd>
  </dl>
</div>
<ul class="list_line">
<li><a href="#"><time class="meta meta_date">2016.12.12</time><div class="meta meta_category"><span class="cat_info">大学からのお知らせ</span></div><p class="title">タイトル</p><div class="meta meta_academic"><span class="ac_univ">大学</span></div></a></li>
<li><a href="#"><time class="meta meta_date">2016.12.12</time><div class="meta meta_category"><span class="cat_course">学科からのお知らせ</span></div><p class="title">タイトル</p><div class="meta meta_academic"><span class="ac_univ">大学</span></div></a></li>
<li><a href="#"><time class="meta meta_date">2016.12.12</time><div class="meta meta_category"><span class="cat_event">イベント</span></div><p class="title">タイトル</p><div class="meta meta_academic"><span class="ac_univ">大学</span></div></a></li>
</ul>

<ul class="list_visual col col_3">
<li><a href="//cms.mejiro.ac.jp/univ/news/2016/01/post_1/" target="_self" style="opacity: 1;">
<!--サムネイル-->
<figure class="ph">
  <img src="//cms.mejiro.ac.jp/univ/images/news/news_img01.jpg" alt="">
</figure>
<!--/サムネイル-->
  <time datetime="2016-01-29T18:02:09+09:00" class="meta meta_date">2016.01.29</time>
<!--カテゴリ-->
  <div class="meta meta_category"><span class="cat_event">イベント情報</span></div>
<!--/カテゴリ-->
  <p class="title">岩槻キャンパスにおいて「学習支援ピアサポート」が実施されました</p>
</a></li>
<li><a href="//cms.mejiro.ac.jp/univ/news/2016/01/kfc/" target="_self" style="opacity: 1;">
<!--サムネイル-->
<figure class="ph">
  <img src="//cms.mejiro.ac.jp/univ/images/news/news_img02.jpg" alt="">
</figure>
<!--/サムネイル-->
  <time datetime="2016-01-29T18:01:26+09:00" class="meta meta_date">2016.01.29</time>
<!--カテゴリ-->  
    <div class="meta meta_category"><span class="cat_course">学科からのお知らせ</span></div>
<!--/カテゴリ-->
  <p class="title">社会情報学科授業レポート「"KFCのブランド戦略"を学ぶ」</p>
</a></li>
<li><a href="//cms.mejiro.ac.jp/univ/news/2015/12/next/" target="_self">
<!--サムネイル-->
<figure class="ph">
  <img src="//cms.mejiro.ac.jp/univ/images/news/news_img04.jpg" alt="">
</figure>
<!--/サムネイル-->
  <time datetime="2015-12-22T10:41:40+09:00" class="meta meta_date">2015.12.22</time>
<!--カテゴリ-->
    <div class="meta meta_category"><span class="cat_info">大学からのお知らせ</span></div>
<!--/カテゴリ-->
  <p class="title">留学生サポートチームnextの世代交代式を行いました。</p>
</a></li>
</ul>

<ul class="list_btn col col_3">
<li><a href="#">ダミーダミー１</a></li>
<li><a href="#">ダミーダミー２</a></li>
<li><a href="#">ダミーダミー３</a></li>
</ul>
<hr>
<h1>矢印を下向きに</h1>
<ul class="list_btn col col_3 down">
<li><a href="#">ダミーダミー１</a></li>
<li><a href="#">ダミーダミー２</a></li>
<li><a href="#">ダミーダミー３</a></li>
</ul>
<hr>
<h1>矢印を上向きに</h1>
<ul class="list_btn col col_3 up">
<li><a href="#">ダミーダミー１</a></li>
<li><a href="#">ダミーダミー２</a></li>
<li><a href="#">ダミーダミー３</a></li>
</ul>
<hr>
<h1>2つ目のデザイン</h1>
<ul class="list_btn secondary col col_3">
<li><a href="#">ダミーダミー１</a></li>
<li><a href="#">ダミーダミー２</a></li>
<li><a href="#">ダミーダミー３</a></li>
</ul>
<hr>
<h1>学科の色付き</h1>
<ul class="list_btn col col_3">
<li class="course_human"><a href="#human">人間学部</a></li>
<li class="course_social"><a href="#social">社会学部</a></li>
<li class="course_business"><a href="#business">経営学部</a></li>
<li class="course_foreign"><a href="#foreign">外国語学部</a></li>
<li class="course_health"><a href="#health">保健医療学部</a></li>
<li class="course_nursing"><a href="#nursing">看護学部</a></li>
</ul>
<hr>
<h1>学科の色付き（2つ目のデザイン）</h1>
<ul class="list_btn secondary col col_3">
<li class="course_human"><a href="#human">人間学部</a></li>
<li class="course_social"><a href="#social">社会学部</a></li>
<li class="course_business"><a href="#business">経営学部</a></li>
<li class="course_foreign"><a href="#foreign">外国語学部</a></li>
<li class="course_health"><a href="#health">保健医療学部</a></li>
<li class="course_nursing"><a href="#nursing">看護学部</a></li>
</ul>
<hr>
<h1>学科の色付き（大きいボタン）</h1>
<ul class="list_btn col col_3 lg down">
  <li class="course_human"><a href="#human"><h3>人間学部</h3><em>Faculty of Human Sciences</em><p>心理カウンセリング学科<br>人間福祉学科<br>子ども学科<br>児童教育学科</p></a></li>
  <li class="course_social"><a href="#social"><h3>社会学部</h3><em>Faculty of Studies on<br>Contemporary Society</em><p>社会情報学科<br>メディア表現学科<br>地域社会学科</p></a></li>
  <li class="course_business"><a href="#business"><h3>経営学部</h3><em>Faculty of Business Administration</em><p>経営学科</p></a></li>
  <li class="course_foreign"><a href="#foreign"><h3>外国語学部</h3><em>Faculty of Foreign Language Studies</em><p>英米語学科<br>中国語学科<br>韓国語学科<br>日本語・日本語教育学科</p></a></li>
  <li class="course_health"><a href="#health"><h3>保健医療学部</h3><em>Faculty of Health Sciences</em><p>理学療法学科<br>作業療法学科<br>言語聴覚学科</p></a></li>
  <li class="course_nursing"><a href="#nursing"><h3>看護学部</h3><em>Faculty of Nursing</em><p>看護学科</p></a></li>
</ul>

  <ul class="col col_3 list_definition">
    <li><dl>
      <dt><a href="#">見出し</a></dt>
      <dd><p>ダミーダミーダミーダミーダミーダミーダミーダミー</p></dd>
    </dl></li>
    <li><dl>
      <dt><a href="#">見出し</a></dt>
      <dd><ul class="list_mark">
      <li><a href="">リンク1</a>
          <ul>
          <li><a href="">リンク1-1</a></li>
          <li><a href="">リンク1-2</a></li>
          <li><a href="">リンク1-3</a></li>
          </ul>
      </li>
      <li><a href="">リンク2</a></li>
      <li><a href="">リンク3</a></li>
      </ul></dd>
    </dl></li>
    <li><dl>
      <dt><a href="#">見出し</a></dt>
      <dd><ul class="link">
      <li><a href="">リンク1</a></li>
      <li><a href="">リンク2</a></li>
      <li><a href="">リンク3</a></li>
      </ul></dd>
    </dl></li>
  </ul>

<p><a class="link" href="#">単一のリンク</a>　これは文章の途中に入れる事ができます。</p>
<hr>
<ul class="link">
  <li><a href="#">ulに指定すれば、まとめて設定できます</a></li>
  <li><a href="#">ulに指定すれば、まとめて設定できます</a></li>
  <li><a href="#">ulに指定すれば、まとめて設定できます</a></li>
  <li><a href="#">ulに指定すれば、まとめて設定できます</a></li>
  <li><a href="#">ulに指定すれば、まとめて設定できます</a></li>
</ul>

<nav class="tab">
  <ul>
    <li class="active"><a>新宿キャンパス</a></li>
    <li><a href="#">岩槻キャンパス</a></li>
  </ul>
</nav>

<ul class="paging">
<li><a href="#m201503" class="link">3月</a></li>
<li><a href="#m201504" class="link">4月</a></li>
<li><a href="#m201505" class="link">5月</a></li>
<li><a href="#m201506" class="link">6月</a></li>
<li><a href="#m201507" class="link">7月</a></li>
<li><a href="#m201509" class="link">9月</a></li>
</ul>
<dl class="paging">
<dt>2015年</dt>
<dd>
<ul>
<li><a href="#m201503" class="link">3月</a></li>
<li><a href="#m201504" class="link">4月</a></li>
<li><a href="#m201505" class="link">5月</a></li>
<li><a href="#m201506" class="link">6月</a></li>
<li><a href="#m201507" class="link">7月</a></li>
<li><a href="#m201509" class="link">9月</a></li>
</ul>
</dd>
</dl>
<hr>
<h1>二つ目</h1>
<ul class="paging secondary">
<li><a href="#m201503" class="link">3月</a></li>
<li><a href="#m201504" class="link">4月</a></li>
<li><a href="#m201505" class="link">5月</a></li>
<li><a href="#m201506" class="link">6月</a></li>
<li><a href="#m201507" class="link">7月</a></li>
<li><a href="#m201509" class="link">9月</a></li>
</ul>
<dl class="paging secondary">
<dt>2015年</dt>
<dd>
<ul>
<li><a href="#m201503" class="link">3月</a></li>
<li><a href="#m201504" class="link">4月</a></li>
<li><a href="#m201505" class="link">5月</a></li>
<li><a href="#m201506" class="link">6月</a></li>
<li><a href="#m201507" class="link">7月</a></li>
<li><a href="#m201509" class="link">9月</a></li>
</ul>
</dd>
</dl>

<h1>SAMPLE .1</h1>
<table class="table">
  <thead>
  <tr>
    <th>thead内のヘッダー</th>
    <th>thead内のヘッダー</th>
    <th>thead内のヘッダー</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th>ヘッダー</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th>ヘッダー</th>
    <td>td</td>
    <td>td</td>
  </tr>
  </tbody>
</table>
<hr>
<h1>SAMPLE .2</h1>
<table class="table">
  <tr>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
  </tr>
  <tr>
    <th class="secondary">th.secondary</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th class="thirdly">th.thirdly</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th class="fourthly">th.fourthly</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th class="fifthly">th.fifthly</th>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <th class="sixthly">th.sixthly</th>
    <td>td</td>
    <td>td</td>
  </tr>
</table>
<hr>
<h1>SAMPLE .3</h1>
<table class="table">
  <tr>
    <th> </th>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
  </tr>
  <tr>
    <th class="secondary vertical">縦書き</th>
    <td>td</td>
    <td>td</td>
  </tr>
</table>
<hr>
<h1>SAMPLE .4</h1>
<table class="table secondary">
  <tr>
    <th>ヘッダー</th>
    <td>tableタグに.table.secondaryをつけると、thがセンター揃えに</td>
  </tr>
  <tr>
    <th>ヘッダー</th>
    <td>tableタグに.table.secondaryをつけると、thがセンター揃えに</td>
  </tr>
  <tr>
    <th>ヘッダー</th>
    <td>tableタグに.table.secondaryをつけると、thがセンター揃えに</td>
  </tr>
</table>
<hr>
<h1>SAMPLE .5</h1>
<table class="table thirdly">
  <tr>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
  </tr>
  <tr>
    <td>tableタグに.table.thirdlyをつけると、すべてがセンター揃えに</td>
    <td>tableタグに.table.thirdlyをつけると、すべてがセンター揃えに</td>
    <td>tableタグに.table.thirdlyをつけると、すべてがセンター揃えに</td>
  </tr>
</table>
<hr>
<h1>SAMPLE .6</h1>
<table class="table sm">
  <tr>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
    <th>ヘッダー</th>
  </tr>
  <tr>
    <td>tableタグに.table.smをつけると、余白が小さく、thのフォントサイズも少し小さくなります</td>
    <td>tableタグに.table.smをつけると、余白が小さく、thのフォントサイズも少し小さくなります</td>
    <td>tableタグに.table.smをつけると、余白が小さく、thのフォントサイズも少し小さくなります</td>
  </tr>
</table>
<hr>
<h1>SAMPLE .7</h1>
<div class="table">
  <dl>
    <dt>ヘッダー</dt>
    <dd>dlでも.tableで表組みを実装することができます。スマホでは、dtとddが上下になります。</dd>
  </dl>
</div>

太字は<strong>strong</strong>タグで囲うとこのようになります。 
小さい文字は<small>small（小さい文字のサンプル）</small>タグで囲うとこのようになります。
<span class="small">.small</span>クラスの指定で、文字を小さくすることもできます。
大きい文字は<big>big（大きい文字のサンプル）</big>タグで囲うとこのようになります。
<span class="big">.big</span>クラスの指定で、文字を小さくすることもできます。
強調したい時は、<span class="important">.important</span> クラスをつけると赤い色がつきます。
他に、<span class="more_important">.more_important</span>や、<span class="attention">.attention</span> クラスがあります。
青い色をつけたい時は、<span class="point">.point</span> クラスをつけると青い色がつきます。
背景に青い色をつけたい時は、<span class="point bgcolor">.point.bgcolor</span> クラスをつけます。
ハイライト表示をしたい時は、<span class="highlight">.highlight</span> クラスをつけるとハイライトされます。
文字に下線を引きたいときは、<span class="underline">.underline</span>、文字を囲みたいときは、<span class="surround">.surround</span>をつけます。

<p class="left">.leftを付与するとテキストが左揃えになります。<br>
ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
<p class="right">.rightを付与するとテキストが右揃えになります。<br>
ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
<p class="center">.centerを付与するとテキストが中央揃えになります。<br>
ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー<br>
ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>

<section class="note">
<p>心理カウンセリング学科・社会情報学科・メディア表現学科・地域社会学科・経営学科は、既修得科目と本学のカリキュラムとを個々に照らし合わせ、上限62単位まで認定することもあります。 </p>
</section><!--.note-->

<section id="heigan" class="prominent">
<h5 class="prominent_header">短大に併願ができます</h5>
女子の受験者に限り、目白大学短期大学部一般入試1期に課金なしで併願が可能です。ただし、試験科目の「国語」を受験する方に限ります。
</section>

<section class="info">
<h3>お問い合わせ</h3>
目白大学/目白大学短期大学部「入試ガイド2016」より抜粋。
</section>

<section class="emergency">
ここに緊急ニュースが入ります。
</section>

<h1>横</h1>
<section class="flow">
  <dl>
    <dt>その1</dt>
    <dd>
    <h5>実験・教育・発達・社会・臨床にわたる<br>心理学全般をカバーしたカリキュラム</h5>
    </dd>
  </dl>
  <dl>
    <dt>その2</dt>
    <dd>
    <h5>心理学の基礎から心のケアについての<br>理論と方法（カウンセリング）まで<br>バランス良く履修</h5>
    </dd>
  </dl>
  <dl>
    <dt>その3</dt>
    <dd>
    <h5>臨地研修、ピアサポートなど<br>主体的に学べる体験学習</h5>
    </dd>
  </dl>
  <dl>
    <dt>その4</dt>
    <dd>
    <h5>現場経験の豊富な教授陣の指導による<br>実践的なカウンセリング技法の習得</h5>
    </dd>
  </dl>
</section>
<hr>
<h1>縦</h1>
<section class="flow_vertical">
  <dl>
    <dt>その1</dt>
    <dd>
    <h5>実験・教育・発達・社会・臨床にわたる<br>心理学全般をカバーしたカリキュラム</h5>
    </dd>
  </dl>
  <dl>
    <dt>その2</dt>
    <dd>
    <h5>心理学の基礎から心のケアについての<br>理論と方法（カウンセリング）まで<br>バランス良く履修</h5>
    </dd>
  </dl>
  <dl>
    <dt>その3</dt>
    <dd>
    <h5>臨地研修、ピアサポートなど<br>主体的に学べる体験学習</h5>
    </dd>
  </dl>
  <dl>
    <dt>その4</dt>
    <dd>
    <h5>現場経験の豊富な教授陣の指導による<br>実践的なカウンセリング技法の習得</h5>
    </dd>
  </dl>
</section>

<ul class="bnr_set">
  <li><a href="/jyukensei/campuslife/"><img src="//ui.mejiro.ac.jp/jyukensei/images/course/course_bnr01.png" alt="キャンパスライフも確認！"></a></li>
  <li><a href="https://www.mejiro.ac.jp/jyukensei/opencampus/index.html" target="_blank"><img src="//ui.mejiro.ac.jp/jyukensei/images/course/course_bnr02.png" alt="2015 OPEN CAMPUS"></a></li>
</ul>

<p class="indent">●試験科目<br>
すべての教科から高得点の2科目<br>
（国語は近代以降の文章のみ、英語は筆記とリスニング）</p>
<hr>
<div class="indent secondary">1)　高等学校または中等教育学校を卒業した方、または平成28年3月に卒業見込みの方。</div></section><!--.example-->

<hr>
<hr class="secondary">

2015年度入試結果<i class="i_pdf"></i><br>
ワードファイル<i class="i_doc"></i><br>
エクセルファイル<i class="i_excel"></i><br>
新規ウィンドウで開く<i class="i_popup"></i>

<a href="http://ui.mejiro.ac.jp/jyukensei/admission/exam/?srid=start">アンカーリンク</a>