*サンプルページ – 投稿編集用 - 外国人雇用支援センター山口 | 特定技能制度における外国人雇用支援サービス

*サンプルページ – 投稿編集用

(1)cssライブラリ

見出し2~6(小見出し付)

見出し2小見出し小見出し小見出し

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<h2>見出し2<small>小見出し小見出し小見出し</small></h2>

見出し3小見出し小見出し小見出し

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<h3>見出し3<small>小見出し小見出し小見出し</small></h3>

見出し4小見出し小見出し小見出し

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<h4>見出し4<small>小見出し小見出し小見出し</small></h4>
見出し5小見出し小見出し小見出し

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<h5>見出し5<small>小見出し小見出し小見出し</small></h5>
見出し6小見出し小見出し小見出し

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<h6>見出し6<small>小見出し小見出し小見出し</small></h6>

本文

リード文:lead

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

 HTMLコード<p class="lead">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

背景付引用:bq_bk

引用見出し
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

 HTMLコード<blockquote class="bq_bk"><strong>引用見出し</strong>
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

テーブル

ミニテーブル:mini-table

項目要素
項目要素
項目要素
 HTMLコード<table class="mini-table">
  <tbody>
  <tr>
    <th>項目</th>
    <td>要素</td>
  </tr>
<tr>
  <tr>
    <th>項目</th>
    <td>要素</td>
  </tr>
  <tr>
    <th>項目</th>
    <td>要素</td>
  </tr>
  </tbody>
</table>

水平スクロールテーブル:res-h

テーブル見出しテーブル見出しテーブル見出し
テーブルのデータテーブルのデータテーブルのデータ
テーブルのデータテーブルのデータテーブルのデータ
 HTMLコード<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>

お問い合わせリンクスタイル:contact

〇〇〇〇〇〇〇〇に関することはお気軽にお問い合わせください!

000-000-0000

平日 9:00 – 17:30 土曜 9:00 – 12:00
(第2・4土曜は休み)

お問い合わせ・資料請求

メールは24時間受け付けております。

 HTMLコード<div class="contact">
<div class="contact_in">
<p class="lead">〇〇〇〇〇〇〇〇に関することはお気軽にお問い合わせください!</p>
<div class="telarea">
<p class="tel"><a href="tel:000-000-0000">000-000-0000</a></p>
<p class="tel-ex">平日 9:00 - 17:30 土曜 9:00 - 12:00<br>(第2・4土曜は休み)</p>
</div>
<div class="mailarea">
<p class="mail"><a href="http://yamaguchi-gaikokujin.com/wp/contact/">お問い合わせ・資料請求</a></p>
<p class="mail-ex">メールは24時間受け付けております。</p>
</div>
</div>
</div>

(2)コンポーネント

画像+文章

画像(フルワイズ画像):imgtxt_l

フルワイズ画像
 HTMLコード<div class="full-width"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/pg_ec_default.png" alt="フルワイズ画像" /></div>

画像+文章(ノーマル/画像左):imgtxt_l

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_l">
<div class="ttl"><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt"><strong>吾輩は猫である。名前はまだ無い。</strong>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像+文章(ノーマル/画像右):imgtxt_r

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_r">
<div class="ttl"><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt"><strong>吾輩は猫である。名前はまだ無い。</strong>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像+文章(フルワイズ)

画像+文章(フルワイズ/画像左):imgtxt_full_l

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_full_l">
<div class="ttl"><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像+文章(フルワイズ/画像右):imgtxt_full_r

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="imgtxt_full_r">
<div class="ttl"><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

パネルリンク:panel_link

リンク画像(2つずつ)

 HTMLコード<div class="panel_link2">
<a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>
</div>

リンク画像(3つずつ)

 HTMLコード<a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>

リンク画像(4つずつ)

 HTMLコード<div class="panel_link4"><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>

リンク画像(5つずつ)

 HTMLコード
<a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a><a href="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a>

価格カード:price_card

価格カード(1個)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

価格カード(2個)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

価格カード(3個)

商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
商品名A – AAAA11111
23,000
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="price_card">
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
<div class="price_card-in">
<div class="ttl">商品名A - AAAA11111</div>
<div class="prc">23,000<span class="cu">円</span></div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
<div class="buy"><a href="#">詳細</a></div>
</div>
</div>

フロー図:flow_chart

登録からお仕事開始までの流れ

  • 登録の申し込み
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • 登録のご説明
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • 登録書類のご記入
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • コーディネーターとの面談
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
  • お仕事開始
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="flow_chart">
<p class="ttl">登録からお仕事開始までの流れ</p>
<ul>
<li class="flow-box">
<div class="flow-l">登録の申し込み</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">登録のご説明</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">登録書類のご記入</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">コーディネーターとの面談</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
<li class="flow-box">
<div class="flow-l">お仕事開始</div>
<div class="flow-r">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div></li>
</ul>
</div>

フロー図:flow_chart

タイトルが入ります。タイトルが入ります。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
タイトルが入ります。タイトルが入ります。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="flow_chart2">
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></div>
<div class="txt"><strong>タイトルが入ります。タイトルが入ります。</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>
<div class="flow_mark"></div>
<div class="flow_chart2">
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></div>
<div class="txt"><strong>タイトルが入ります。タイトルが入ります。</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

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

サンプル画像
タイトルが入ります吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="image_box">
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="サンプル画像" /></div>
<div class="txt"><strong>タイトルが入ります</strong>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

料金プラン:rate_plan

商品名A – AAAA11111商品名B – AAAA11111商品名C – AAAA11111
月額料金10,00020,00030,000
特徴
ネットショップ
ECサイトとブログを含む
AAAAAAAAAAAAAAA
ネットショップ
ECサイトとブログを含む
BBBBBBBBBBBBBBB
ネットショップ
ECサイトとブログを含む
CCCCCCCCCCCCCCC
ネットショップ
ECサイトとブログを含む
DDDDDDDDDDDDDDD
詳細詳細詳細
 HTMLコード<table class="rate_plan">
<tbody>
<tr class="ttl">
<th></th>
<th>商品名A – AAAA11111</th>
<th>商品名B – AAAA11111</th>
<th>商品名C – AAAA11111</th>
</tr>
<tr class="prc">
<th>月額料金</th>
<td>10,000<span class="cu">円</span></td>
<td>20,000<span class="cu">円</span></td>
<td>30,000<span class="cu">円</span></td>
</tr>
<tr>
<th class="feature" colspan="4">特徴</th>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>AAAAA</td>
<td>AAAAA</td>
<td>AAAAA</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>BBBBB</td>
<td>BBBBB</td>
<td>BBBBB</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>CCCCC</td>
<td>CCCCC</td>
<td>CCCCC</td>
</tr>
<tr>
<th>ネットショップ
ECサイトとブログを含む</th>
<td>DDDDD</td>
<td>DDDDD</td>
<td>DDDDD</td>
</tr>
<tr class="buy">
<th></th>
<td><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
<td><a href="#">詳細</a></td>
</tr>
</tbody>
</table>

Q&A

「吾輩は猫である」について
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。?
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。?
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。?
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="faq_list">
<div class="ttl">「吾輩は猫である」について</div>
<dl>
<dt>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。?</dt>
<dd>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</dd>
</dl>
</div>

ポイント説明::point_list

見出し見出し

キャプションキャプションキャプションキャプション

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

見出し見出し

キャプションキャプションキャプションキャプション

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

見出し見出し

キャプションキャプションキャプションキャプション

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

見出し見出し

キャプションキャプションキャプションキャプション

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

見出し見出し

キャプションキャプションキャプションキャプション

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

 HTMLコード<div class="point_list"><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section><section><header>
<p class="ttl">見出し見出し</p>
<p class="cap"><small>キャプションキャプションキャプションキャプション</small></p>
</header>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
</section></div>

リンクボタン:blk

リンクボタン(1個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a></div>

リンクボタン(2個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン(3個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン(4個)

 HTMLコード<div class="blk"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン(1個/中央)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a></div>

リンクボタン(2個/中央)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン(3個/中央)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン(4個/中央)

 HTMLコード<div class="blk blk-c"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

リンクボタン(マルチ)

 HTMLコード<div class="blk blk-multi"><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a><a href="#">詳細はこちら</a></div>

チャットスタイル:chat_normal

チャットスタイル(通常)

名前

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
 HTMLコード<div class="chat_normal">
<div class="img">
<img class="alignnone size-full wp-image-626" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage.png" alt="" width="150" height="150" />
<p class="name">名前</p>
</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

(3)ランディングページ用デザイン

見出し

背景色が変更可能なテーブル見出し:headline_table

テーブル見出し

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

 HTMLコード<table class="headline_table">
<tbody>
<tr>
<td>テーブル見出し</td>
</tr>
</tbody>
</table>

(4)その他

アイコン

awesome font

ホーム
チェック
ダウンロード
注意
カート
アイコンリスト

 HTMLコード<p><i class="fas fa-home"></i> ホーム</p>
<p><i class="fas fa-check-circle"></i> チェック</p>
<p><i class="fas fa-file-download"></i> ダウンロード</p>
<p><i class="fas fa-exclamation-triangle"></i> 注意</p>
<p><i class="fas fa-shopping-cart"></i> カート</p>

レスポンシブ画像

レスポンシブイメージ – プラグインなし

レスポンシブイメージ – プラグインあり

 HTMLコード<img class="res_img" src="http://yamaguchi-gaikokujin.com/wp/wp-content/themes/sw/img/responsiveimg.png">
※スマートフォンサイズ(468px以下)ではresponsiveimg_sp.pngという画像に切り替わる

(2)コンポーネント

チームメンバー:team_member

チームメンバー(1個)

代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="team_member">
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
</div>

チームメンバー(2個)

代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="team_member">
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
</div>

チームメンバー(3個)

代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
代表取締役
メンバー名
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
 HTMLコード<div class="team_member">
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
<div class="team_member-in">
<div class="sta">代表取締役</div>
<div class="img"><img class="alignnone size-full wp-image-725" src="http://yamaguchi-gaikokujin.com/wp/wp-content/uploads/noimage-mid-300x200.png" alt="" /></div>
<div class="ttl">メンバー名</div>
<div class="ex">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</div>
</div>
</div>

お問合せカラム

お問合せ2カラム

お電話でお問い合わせ
TEL:000-000-0000
9:00 – 21:00(土日9:00 – 12:00)

お気軽にお電話ください。
担当者があなたに最適な
プランをご提案いたします。

フォームからお問い合わせ
24時間受付中です。
お気軽にご予約・お問い合わせください。
 HTMLコード
<div class="contact_row">
<div class="contact_col">
<div class="ttl">お電話でお問い合わせ</div>
<div class="em">TEL:000-000-0000</div>
<div class="ex">
9:00 – 21:00(土日9:00 – 12:00)<br><br>
お気軽にお電話ください。<br>
担当者があなたに最適な<br>
プランをご提案いたします。
</div>
</div>
<div class="contact_col">
<div class="ttl">フォームからお問い合わせ</div>
<div class="ex">
24時間受付中です。<br>
お気軽にご予約・お問い合わせください。
</div>
<div class="blk"><a helf="#">お問合せフォーム</a></div>
</div>
</div>

お問合せ3カラム

お電話でお問い合わせ
TEL:000-000-0000
9:00 – 21:00(土日9:00 – 12:00)

お気軽にお電話ください。
担当者があなたに最適な
プランをご提案いたします。

LINEでお問い合わせ
24時間受付中です。
お気軽にご予約・お問い合わせください。
フォームからお問い合わせ
24時間受付中です。
お気軽にご予約・お問い合わせください。
 HTMLコード
<div class="contact_row">
<div class="contact_col">
<div class="ttl">お電話でお問い合わせ</div>
<div class="em">TEL:000-000-0000</div>
<div class="ex">
9:00 – 21:00(土日9:00 – 12:00)<br><br>
お気軽にお電話ください。<br>
担当者があなたに最適な<br>
プランをご提案いたします。
</div>
</div>
<div class="contact_col">
<div class="ttl">LINEでお問い合わせ</div>
<div class="ex">
24時間受付中です。<br>
お気軽にご予約・お問い合わせください。
</div>
<div class="blk"><a helf="#">登録はこちらから</a></div>
</div>
<div class="contact_col">
<div class="ttl">フォームからお問い合わせ</div>
<div class="ex">
24時間受付中です。<br>
お気軽にご予約・お問い合わせください。
</div>
<div class="blk"><a helf="#">お問合せフォーム</a></div>
</div>
</div>

カウントダウン

 HTMLコード<div id="inner">
<div id="countdown"></div>
</div>

※技能実習生をご希望の方は関連団体 ヒューマン・グローバル事業協同組合をご紹介いたします。

お問い合わせ先

083-941-0135

平日 9:00 – 17:00

お問い合わせ・資料請求

メールは24時間受け付けております。

PAGE TOP