見学申込 採用応募

_サンプル
_sample

  1. 見出し
  2. リストの装飾
  3. リンク、ボタン
  4. 画像拡大
  5. 要素の配置
  6. 囲み
  7. 文章と画像の配置
  8. キャプション
  9. 表組み

h2サンプルh2サンプル

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

h3サンプルh3サンプル

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

h4サンプルh4サンプル

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

h5サンプルh5サンプル

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

h6サンプルh6サンプル

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

リストの装飾

通常の箇条書きリスト

  • 箇条書きリストサンプル箇条書きリストサンプル
  • 箇条書きリストサンプル
    箇条書きリストサンプル
  • 箇条書きリストサンプル箇条書きリストサンプル
<ul class="list-normal">
  <li>箇条書きリストサンプル箇条書きリストサンプル</li>
  <li>箇条書きリストサンプル<br>箇条書きリストサンプル</li>
  <li>箇条書きリストサンプル箇条書きリストサンプル</li>
</ul>

米マーク付きリスト

  • 米付きリストサンプル米付きリストサンプル
  • 米付きリストサンプル
    米付きリストサンプル
  • 米付きリストサンプル米付きリストサンプル
<ul class="list-att">
  <li>米付きリストサンプル米付きリストサンプル</li>
  <li>米付きリストサンプル<br>米付きリストサンプル</li>
  <li>米付きリストサンプル米付きリストサンプル</li>
</ul>

順序付きリスト

  1. 順序付きリストサンプル順序付きリストサンプル
  2. 順序付きリストサンプル
    順序付きリストサンプル
  3. 順序付きリストサンプル順序付きリストサンプル
<ol class="list-num">
  <li>順序付きリストサンプル順序付きリストサンプル</li>
  <li>順序付きリストサンプル<br>順序付きリストサンプル</li>
  <li>順序付きリストサンプル順序付きリストサンプル</li>
</ol>

定義リスト

定義リストのサンプル定義リストのサンプル
定義リストのサンプル定義リストのサンプル
定義リストのサンプル定義リストのサンプル
定義リストのサンプル定義リストのサンプル
<dl>
  <dt>定義リストのサンプル定義リストのサンプル</dt>
  <dd>定義リストのサンプル定義リストのサンプル</dd>
  <dt>定義リストのサンプル定義リストのサンプル</dt>
  <dd>定義リストのサンプル定義リストのサンプル</dd>
</dl>

リンク

テキストリンク

文章中にリンクがある場合はこのようなリンクになります。

アイコン付きテキストリンク

pdfアイコン　リンク
※拡張子がpdfのテキストリンクは公開画面側で自動でクラスが付く仕様になっているため、投稿画面側ではクラスを付けなくても問題ありません。

xlsxアイコン　リンク
※拡張子がxlsx（xls）のテキストリンクは公開画面側で自動でクラスが付く仕様になっているため、投稿画面側ではクラスを付けなくても問題ありません。

docxアイコン　リンク
※拡張子がdocxのテキストリンクは公開画面側で自動でクラスが付く仕様になっているため、投稿画面側ではクラスを付けなくても問題ありません。

外部アイコン　リンク
※target=”_blank” が指定されているテキストリンクは公開画面側で自動でクラスが付く仕様になっているため、投稿画面側ではクラスを付けなくても問題ありません。

<a href="/sample.pdf" class="icon-pdf">pdfアイコン　リンク</a>
<a href="/sample.xlsx" class="icon-xlsx">xlsxアイコン　リンク</a>
<a href="/sample.docx" class="icon-docx">docxアイコン　リンク</a>
<a href="" target="_blank">外部アイコン　リンク</a>

ボタンリンク

ピンクのボタン 紫のボタン

<a href="#" class="button-pink">ピンクのボタン</a>
<a href="#" class="button-purple">紫のボタン</a>

アイコン付きボタンリンク

pdfアイコン　ボタンリンク 外部アイコン　ボタンリンク

<a href="#" class="button-pdf">pdfアイコン　ボタンリンク</a>
<a href="" class="button-blank">外部アイコン　ボタンリンク</a>

画像拡大

画像拡大

<a href="/sample.png" class="zoom-img"><img src="/sample.png" /></a>

要素の配置

左寄せ

<p class="al-l">（任意の要素）</p>

中央寄せ

<p class="al-c">（任意の要素）</p>

右寄せ

<p class="al-r">（任意の要素）</p>

要素を横に並べる

<ul class="list-column">
  <li><img src="/sample.png" /></li>
  <li><img src="/sample.png" /></li>
  <li><img src="/sample.png" /></li>
</ul>

要素を横に並べる（間隔10px）

<ul class="list-column-20">
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
</ul>

要素を均等に横に並べる（2分割）

<ul class="list-half">
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
</ul>

要素を均等に横に並べる（3分割）

<ul class="list-third">
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
</ul>

要素を均等に横に並べる（4分割）

<ul class="list-quarter">
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
</ul>

要素を横に並べ、スマホの時は2行にする

<ul class="list-quarter list-sp-2">
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
  <li><img src="/sample.png"></li>
</ul>

囲み

通常の囲み

囲みサンプル囲みサンプル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

<div class="box-memo">
  <div class="text-bold">囲みサンプル囲みサンプル</div>
  <p>文章が入ります。</p>
</div>

文章と画像の配置

PCで文章の右側に画像を配置

PCで文章の右側に画像を配置する場合はこのように表示されます。PCで文章の右側に画像を配置する場合はこのように表示されます。PCで文章の右側に画像を配置する場合はこのように表示されます。

<div class="box-image">
  <div class="text-area">
    <p>PCで文章の右側に画像を配置する場合はこのように表示されます。</p>
  </div>
  <div class="image-area">
    <img src="/sample.png">
  </div>
</div>

PCで文章の右側に画像を配置し、スマホでは文章の上に画像を配置

PCで文章の右側に画像を配置し、スマホでは文章の上に画像を配置する場合はこのように表示されます。PCで文章の右側に画像を配置し、スマホでは文章の上に画像を配置する場合はこのように表示されます。

<div class="box-image box-sp-imgabove">
  <div class="text-area">
    <p>PCで文章の右側に画像を配置し、スマホでは文章の上に画像を配置する場合はこのように表示されます。</p>
  </div>
  <div class="image-area">
    <img src="/sample.png">
  </div>
</div>

キャプション

キャプションが入ります

<p class="text-caption">キャプションが入ります</p>

表組み

通常の表組み

thead th thead th
tbody th tbody td
tbody th tbody td 
<table class="table-normal">
  <thead>
    <tr>
      <th>thead th</th>
      <th>thead th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
  </tbody>
</table>

スマホで横にスクロールする表組み

thead th thead th thead th thead th thead th thead th thead th thead th
tbody th tbody td
tbody th tbody td 
<table class="table-normal table-spscroll">
  <thead>
    <tr>
      <th>thead th</th>
      <th>thead th thead th thead th thead th thead th thead th thead th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
  </tbody>
</table>

スマホで縦並びになる表組み

tbody th tbody td
tbody th tbody td 
<table class="table-normal table-spcolumn">
  <tbody>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
  </tbody>
</table>

thの幅を固定しない

通常は200pxで固定 tr内はじめのthにクラスを追加します。 
<table class="table-normal">
  <tbody>
    <tr>
      <th class="auto">通常は200pxで固定</th>
      <td>tr内はじめのthにクラスを追加します。</td>
    </tr>
  </tbody>
</table>
テーブル全体のthの幅を固定しない tableにクラスを追加します。
テーブル全体のthの幅を固定しない tableにクラスを追加します。 
<table class="table-normal th-auto">
  <tbody>
    <tr>
      <th>テーブル全体のthの幅を固定しない</th>
      <td>tableにクラスを追加します。</td>
    </tr>
    <tr>
      <th>テーブル全体のthの幅を固定しない</th>
      <td>tableにクラスを追加します。</td>
    </tr>
  </tbody>
</table>

thead内のthとtdを中央寄せにする

中央寄せ 中央寄せ
tbodyのthは左寄せ 文字が中央寄せになります。
tbodyのthは左寄せ 文字が中央寄せになります。 
<table class="table-normal thtd-center">
  <thead>
    <tr>
      <th>中央寄せ</th>
      <th>中央寄せ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>tbodyのthは左寄せ</th>
      <td>文字が中央寄せになります。</td>
    </tr>
    <tr>
      <th>tbodyのthは左寄せ</th>
      <td>文字が中央寄せになります。</td>
    </tr>
  </tbody>
</table>

thead内のthを中央寄せ、tbody内のtdを右寄せにする

中央寄せ 中央寄せ
tbodyのthは左寄せ 文字が右寄せになります。
tbodyのthは左寄せ 文字が右寄せになります。 
<table class="table-normal td-right">
  <thead>
    <tr>
      <th>中央寄せ</th>
      <th>中央寄せ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>tbodyのthは左寄せ</th>
      <td>文字が右寄せになります。</td>
    </tr>
    <tr>
      <th>tbodyのthは左寄せ</th>
      <td>文字が右寄せになります。</td>
    </tr>
  </tbody>
</table>

セル内の行間を詰める

tbody th セル内が複数行
セル内が複数行
セル内が複数行
セル内が複数行
tbody th セル内が複数行
セル内が複数行
セル内が複数行
セル内が複数行		 
<table class="table-normal thtd-min">
  <tbody>
    <tr>
      <th>tbody th</th>
      <td>セル内が複数行<br>セル内が複数行<br>セル内が複数行<br>セル内が複数行</td>
    </tr>
    <tr>
      <th>tbody th</th>
      <td>セル内が複数行<br>セル内が複数行<br>セル内が複数行<br>セル内が複数行</td>
    </tr>
  </tbody>
</table>

文字を改行させない

改行させないセル 文字を改行させたくないセルにクラスを追加します。 スマホで横にスクロールする表組みと 組み合わせると良いかもしれません。 
<table class="table-normal table-spscroll">
  <tbody>
    <tr>
      <th class="nowrap">改行させないセル</th>
      <td>文字を改行させたくないセルにクラスを追加します。</td>
      <td>スマホで横にスクロールする表組みと</td>
      <td>組み合わせると良いかもしれません。</td>
    </tr>
  </tbody>
</table>

線のない表組み

tbody th tbody td
tbody th tbody td 
<table class="table-noline">
  <tbody>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
    <tr>
      <th>tbody th</th>
      <td>tbody td</td>
    </tr>
  </tbody>
</table>