#サンプルページ

ページのスタイル

見出しのスタイル

見出し2

<h2>見出し2</h2>

見出し3

<h3>見出し3</h3>

見出し4

<h4>見出し4</h4>
見出し5
<h5>見出し5</h5>

箇条書きスタイル

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<ol>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ol>
定義
定義データ
定義
定義データ
定義
定義データ
<dl>
<dt>定義</dt>
<dd>定義データ</dd>
<dt>定義</dt>
<dd>定義データ</dd>
<dt>定義</dt>
<dd>定義データ</dd>
</dl>

ギャラリー

その他スタイル

引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

<blockquote>引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

イメージボックススタイル

見出し4

サンプル画像文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります 

<div class="image-box clearFix">
<h4>見出し4</h4>
<img src="http://su-works.jp/img/sample.png" alt="サンプル画像" />
文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります
</div>

テーブルスタイル

テーブル見出し テーブル見出し テーブル見出し
テーブルのデータ テーブルのデータ テーブルのデータ
テーブルのデータ テーブルのデータ テーブルのデータ 
<table>
<tbody>
<tr>
<th>テーブル見出し</th>
<th>テーブル見出し</th>
<th>テーブル見出し</th>
</tr>
<tr>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
<tr>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
</tbody>
</table>
テーブル見出し テーブルのデータ テーブルのデータ
テーブル見出し テーブルのデータ テーブルのデータ 
<table>
<tbody>
<tr>
<th>テーブル見出し</th>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
<tr>
<th>テーブル見出し</th>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
</tbody>
</table>
テーブル見出し テーブル見出し テーブル見出し
テーブルのデータ テーブルのデータ テーブルのデータ
テーブルのデータ テーブルのデータ テーブルのデータ 
<table class="res-h">
<tbody>
<tr>
<th>テーブル見出し</th>
<th>テーブル見出し</th>
<th>テーブル見出し</th>
</tr>
<tr>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
<tr>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
</tbody>
</table>
テーブル見出し テーブルのデータ テーブルのデータ
テーブル見出し テーブルのデータ テーブルのデータ 
<table class="res-v">
<tbody>
<tr>
<th>テーブル見出し</th>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
<tr>
<th>テーブル見出し</th>
<td>テーブルのデータ</td>
<td>テーブルのデータ</td>
</tr>
</tbody>
</table>

ウェブフォント

ホーム

チェック

ダウンロード

注意

カート

アイコンリスト

<p><i class="fa fa-home"></i> ホーム</p>
<p><i class="fa fa-check"></i> チェック</p>
<p><i class="fa fa-download"></i> ダウンロード</p>
<p><i class="fa fa-warning"></i> 注意</p>
<p><i class="fa fa-shopping-cart"></i> カート</p>

jquery cycle

サンプル画像 サンプル画像 サンプル画像
<div id="cycle">
<img src="http://su-works.jp/img/sample.png" alt="サンプル画像">
<img src="http://su-works.jp/img/sample2.png" alt="サンプル画像">
<img src="http://su-works.jp/img/sample3.png" alt="サンプル画像">
</div>
<div id="nav"></div>

デザインリスト

レスポンシブで横長画像の差し替え

プラグインなし

プラグインあり

<img class="res_img" src="http://su-works.jp/img/responsiveimg.png">
※スマートフォンサイズ(468px以下)ではresponsiveimg_sp.pngという画像に切り替わる
MENU
PAGE TOP