製品を探す お気に入りお気に入り
設計支援・選定ツール 設計支援・選定ツール 設計支援・選定ツール
  • ヒンジ
  • ステー
  • 家具用ドア金物
  • スライドレール
  • 引戸・間仕切り金物
  • LED照明
  • スイッチ・コンセントプレート
  • その他
  • データダウンロード
  • 選定ツールさスガくん
見出しデザイン

h1タイトル デザイン1_左揃え

h1タイトル デザイン2_中央揃え

h1タイトル デザイン3_左揃え黒

h1タイトル デザイン4_中央揃え黒

h1タイトル デザイン3_左揃え白

h1タイトル デザイン4_中央揃え白

h2タイトル デザイン1_アーキカラー、テクノカラー

h2タイトル デザイン2_モノクロカラー

h2タイトル デザイン3_シンプル

h3タイトル デザイン

タイトル「製品一覧」デザイン
製品一覧
製品一覧
製品一覧

ロゴは製品ページに掲載されているロゴを流用

製品一覧
製品一覧
製品一覧
製品一覧
製品一覧
製品一覧

デザイン、フォントQ数を固定しているため、見出しタグ（h）、pタグなど、どんなタグにアテても見た目は変わらない。

h2タグ

製品一覧

pタグ

製品一覧

Pタグ

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

Pタグに注釈のクラス

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

画像回り込みレイアウト

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ボタンデザイン
ボタンデザイン1
ボタンデザイン2
ボタンデザイン3
ボタンデザイン4
ボタンデザイン5
ボタンデザイン6
ボタンデザイン 矢印アイコン付き
ボタンデザイン1
ボタンデザイン2
ボタンデザイン3
ボタンデザイン4
ボタンデザイン5
ボタンデザイン6

ボタン内でテキストが2行以上になる場合、テキストを<div class="txtl">タグで囲む。

ボタンデザイン1
ボタンデザイン1
ボタンデザイン2
ボタンデザイン2

←さらに<span>タグで囲んでQ数変更した場合。

接頭アイコン

ulリストタイプ アーキ、テクノカラー

ulリストタイプ モノトーン

任意の位置につけられる（pタグの場合）

リンクするときはこんなイメージ

リンクするときはこんなイメージ

リンクするときはこんなイメージ

リンクするときはこんなイメージ

画像の上に文字をのせる

画像の上に文字をのせる
テキスト中央

画像の上に文字をのせる
テキスト中央

画像の上に文字をのせる
テキスト中央

画像の上に文字をのせる
テキスト左揃え

画像の上に文字をのせる
テキスト左揃え

画像の上に文字をのせる
テキスト左揃え

画像の上に文字をのせる
テキスト右ぞろえ

画像の上に文字をのせる
テキスト中央

画像の上に文字をのせる
テキスト中央

画像の上に文字をのせる
テキスト中央

画像の上に文字をのせる
テキスト左揃え

画像の上に文字をのせる
テキスト左揃え

画像の上に文字をのせる
テキスト左揃え

画像の上に文字をのせる
テキスト右ぞろえ

2カラム 組み合わせ 例

ここに特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

ここに特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

ここに特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

ここに特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2
3カラム 組み合わせ 例

特長タイトル (h3)中央揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

特長タイトル (h3)中央揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

特長タイトル (h3)中央揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2
3カラム例 順番、組み合わせ を変えた場合

特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン1

特長タイトル (h3)中央揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

特長タイトル (h3)右揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン3

特長タイトル (h3)中央揃え

情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ボタンデザイン4
ボタンデザイン4

特長タイトル (h3)中央揃え
特長タイトル (h3)中央揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。

ボタンデザイン5

特長タイトル (h3)中央揃え

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ボタンデザイン6
4カラム 組み合わせ 例

特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2

特長タイトル (h3)

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。

ボタンデザイン2
画像 左右寄せ 組み合わせ 例

h3タイトル デザイン

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ボタンデザイン2

h3タイトル デザイン
h3タイトル デザイン

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

ボタンデザイン2
Youtube 埋め込み

左寄せclass

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

2カラムレイアウト内に入れる方法

<div class="area">内に、<div class="video">を作成する。
Youtubeサイトで配布される「動画の埋め込み」で作成されるコードをそのまま<div class="video">内に張り付ける。