サンプルページ
ページのスタイル
見出しのスタイル
見出し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
- 箇条書き2
- 箇条書き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という画像に切り替わる