無垢材を使った健康で長寿命な富山の注文住宅【棚田建設】

必要なファイル

フル画面のスライダーはこちら

スタイルの変更

矢印の画像ファイル

/common/js/jquery.bxslider/top/img/
に入れてください

画像名

bx-next.png（右）
bx-prev.png（左）

スライドの上のテキスト

/common/js/jquery.bxslider/top/img/
に入れてください

画像名

slide-txt.png

画像横の背景色を変える

/common/js/jquery.bxslider/top/custom.css
31行目
.bx-wrapper .bx-controls-direction p
の背景色を変えてください

フル画面のスライダーはこちら

スタイル一覧

<div class="asset-content"></div>で囲った場合

サイト全体で予め指定してある見出し要素が適用されます。
css記述内「CUSTOM STYLE」に記載

<h2>ブログ記事などのノーマル見出し2</h2>

<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>

<h3>ブログ記事などのノーマル見出し3</h3>

<h4>ブログ記事などのノーマル見出し4</h4>

<h5>ブログ記事などのノーマル見出し5</h5>

▼

asset-contentをクリアして独自のスタイルを適用したい場合

サイト全体で予め指定してある見出し要素を解除します。
「class="s-clear"」でasset-contentを一旦解除して装飾⇒「class="s-clear hogehoge"」
css記述内「ASSET CLEAR」に記載

<h2>ブログ記事などのノーマル見出し2</h2>

<h3>ブログ記事などのノーマル見出し3</h3>

<h4>ブログ記事などのノーマル見出し4</h4>

<h5>ブログ記事などのノーマル見出し5</h5>

既存のクラス

共通要素：COMMON ELEMENT

クラス	仕様	備考
<hr>	標準ボーダー線ボーダーを中心に上下合計4emのマージン＋回りこみ解除 <hr>	{ margin-bottom: 2em; height: 2em; clear: both;...}
hr.s-clear	上記サイト標準<hr>をHTML標準<hr>にクリア <hr class="s-clear">
hr.hidden	領域は維持したまま非表示上記サイト標準<hr>に{visibility: hidden;}を追加 <hr class="hr.hidden">

共通カラー：COMMON COLOR

クラス	仕様
このサイトの基調色	基調色はサイトによって異なります color-a color-b color-c color-d color-e
.color-*	文字色 <span color="color-a">COLOR-A</span> <span color="color-b">COLOR-B</span> <span color="color-c">COLOR-C</span> <span color="color-d">COLOR-D</span> <span color="color-e">COLOR-E</span> <span color="color-w">COLOR-W</span>
.bg-color*	背景色 <span color="bg-color-a">COLOR-A</span> <span color="bg-color-b">COLOR-B</span> <span color="bg-color-c">COLOR-C</span> <span color="bg-color-d">COLOR-D</span> <span color="bg-color-e">COLOR-E</span> <span color="bg-color-w">COLOR-W</span>
.bd-color-*	ボーダー色 <span color="bd-color-a">COLOR-A</span> <span color="bd-color-b">COLOR-B</span> <span color="bd-color-c">COLOR-C</span> <span color="bd-color-d">COLOR-D</span> <span color="bd-color-e">COLOR-E</span> <span color="bd-color-w">COLOR-W</span>

書式・書体・段落：COMMON (FONT + PARAGRAPH)

クラス	仕様	備考
.font-*	Mac、Windows共通日本語フォント .font-hiramin（ヒラギノ明朝）あのイーハトーヴォのすきとおった風... .font-hiramaru （ヒラギノ丸ゴ）あのイーハトーヴォのすきとおった風... .font-yugothic （游ゴシック体）あのイーハトーヴォのすきとおった風... .font-yumin（游明朝体）あのイーハトーヴォのすきとおった風... Mac、Windows共通欧文フォント .font-arial（Arial） Wind clear of that "Ihatovo"... .font-arial-Black（Arial Black） Wind clear of that "Ihatovo"... .font-comic-sans-ms（Comic Sans MS） Wind clear of that "Ihatovo"... .font-courier（Courier） Wind clear of that "Ihatovo"... .font-courier-new（Courier New） Wind clear of that "Ihatovo"... .font-impact（Impact） Wind clear of that "Ihatovo"... .font-georgia（Georgia） Wind clear of that "Ihatovo"... .font-times-new-roman（Times New Roman） Wind clear of that "Ihatovo"... .font-trebuchet-ms（Trebuchet MS） Wind clear of that "Ihatovo"... .font-verdana（Verdana） Wind clear of that "Ihatovo"...	{ font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN"; }
.f-50p〜.f400p	50% 80% 100% 150% 200% 250% 300% 400%	フォントサイズ { font-size: 50%; }〜{ font-size: 400%; } 200からは250,300,350,400% <span class="f-50p">FONT<span>
.larger	1段大きい文字 <span class="larger">大きい文字<span>	{ font-size: larger; }
.large	大きい文字（+1.2） <span class="large">大きい文字<span>	{ font-size: large; }
.x-large	より大きい文字（+1.4） <span class="x-large">大きい文字<span>	{ font-size: x-large; }
.xx-large	さらに大きい文字（+1.6） <span class="xx-large">大きい文字<span>	{ font-size: xx-large; }
.smaller	1段小さい文字 <span class="smaller">小さい文字<span>	{ font-size: smaller; }
.small	小さい文字（-0.8） <span class="small">小さい文字<span>	{ font-size: small; }
.x-small	より小さい文字（-0.6） <span class="x-small">小さい文字<span>	{ font-size: x-small; }
.xx-small	さらに小さい文字 <span class="xx-small">小さい文字<span>	{ font-size: xx-small; }
.lh-100〜.lh-200	<p class="lh-150">行間を150％<p>	{ line-height: 100%; }〜{ line-height: 200%; } 10%間隔
.warn	ご注意下さい <span class="warn">ご注意下さい</span>	{ color: #e78a2e; font-weight: bold; } 問い合わせフォーム「必須」等に使用
.bold	ボールド書体 <span class="bold">ボールド書体</span>	{ font-weight: bold; }

幅・高さ：COMMON WIDTH

クラス	仕様	備考
.w-5p〜.w-100p PC・SP版有	5% 10% 16% 20% 25% 30% 33% 40% 50% 60% 66% 70% 80% 90% 100%	5,10,16(16.6),20, 25,30,33(33.3),40, 50,60,66(66.6),70, 80,90,100 { width:5%; }〜 { width:100%; }
.per-20p80p〜.per-80p20p	2:8 3:7 4:6 5:5 6:4 7:3 8:2 9:1 per-20p80p⇒<th style="width: 20%"><td style="width: 80%">	class="w-100p per-20p80p" 複合して使用
.heightLine-* .heightLineParent	複数のブロックレベル要素の高さを揃える（要heightLine.js）適用なしの場合 1行ブロック 1行ブロック 2行ブロック 1行ブロック 2行ブロック 3行ブロック各ブロック個別に適用した場合 <p class="heightLine-p"></p> 1行ブロック 1行ブロック 2行ブロック 1行ブロック 2行ブロック 3行ブロックブロック親要素に適用した場合（表示結果はheightlineと同じ） <div class="heightLineParent"><p></p></div> 1行ブロック 1行ブロック 2行ブロック 1行ブロック 2行ブロック 3行ブロック	参考URLはこちら

クラス

仕様

備考

.w-5p〜.w-100p
PC・SP版有

10%

16%

20%

25%

30%

33%

40%

50%

60%

66%

70%

80%

90%

100%

5,10,16(16.6),20,
25,30,33(33.3),40,
50,60,66(66.6),70,
80,90,100
{ width:5%; }〜
{ width:100%; }

.per-20p80p〜.per-80p20p

2:8 3:7 4:6 5:5 6:4 7:3 8:2 9:1
per-20p80p⇒<th style="width: 20%"><td style="width: 80%">

class="w-100p per-20p80p"
複合して使用

.heightLine-*
.heightLineParent

複数のブロックレベル要素の高さを揃える（要heightLine.js）

適用なしの場合

1行ブロック

1行ブロック
2行ブロック

1行ブロック
2行ブロック
3行ブロック

各ブロック個別に適用した場合

1行ブロック

1行ブロック
2行ブロック

1行ブロック
2行ブロック
3行ブロック

ブロック親要素に適用した場合（表示結果はheightlineと同じ）

1行ブロック

1行ブロック
2行ブロック

1行ブロック
2行ブロック
3行ブロック

参考URLはこちら

ディスプレイ：COMMON DISPLAY

クラス	仕様	備考
.dsp-ib PC・SP版有	<div class="dsp-ib"> <p>子(左)</p><p>子(右)</p> </div>	「dsp-ib > *」の親要素に記載。子要素に「 { display: inline-block; } 」が効く
.dsp-bx	リンク要素全て <a href="#" class="dsp-bx">リンク要素全て</a>	{ display: block; }
.dsp-il PC・SP版有	<li>⇒<li>⇒<li>⇒<li> <ul> <li class="dsp-il">リスト</li> <li class="dsp-il">リスト</li> </ul>	{ display: inline; }
.dsp-hide PC・SP版有	<p class="dsp-hide">非表示</p>	{ display: none; }

揃え・回り込み：COMMON ALIGN

.fl-right PC・SP版有	右回り込み <div class="fl-right">右回り込み</div> 右回り込み	{ float: right; }
.fl-left PC・SP版有	左回り込み <div class="fl-left">左回り込み</div> 左回り込み	{ float: left; }
.ta-center PC・SP版有	中央 <p class="ta-center">中央</p> 中央	{ text-align: center; }
.ta-right PC・SP版有	右寄せ <p class="ta-right">右寄せ</p> 右寄せ	{ text-align: right; }
.ta-left PC・SP版有	左寄せ <p class="ta-left">左寄せ</p> 左寄せ	{ text-align: left; }
.va-top	●上部寄せ<td class="va-top"></td>	{ vertical-align: top; }
.va-center	●中心寄せ<td class="va-center"></td>	{ vertical-align: middle; }
.va-bottom	●下部寄せ<td class="va-bottom"></td>	{ vertical-align: bottom; }
.break	回り込み解除 <div class="break"></div>	{ display: block; clear: both; }
.clear	内包するフロート要素をクリアフィックス <div class="clear"> <div class="fl-left">A</div> <div class="fl-left">B</div> </div>

ボックス間隔：COMMON MARGIN+PADDING

クラス	仕様	備考
.m-auto PC・SP版有	適用マージンブロックの左右を自動マージン（中央揃え） <p class="m-auto">中央揃え</p> 中央揃え	{ margin-left:auto; margin-right:auto; }
.m-1p〜.m-10p PC・SP版有	.m-b1p（下）/.m-t1p（上）/.m-l1p（左）/ .m-r1p（右）	{ margin: 1%; }〜{ margin: 10%; } （全体）
.p-1p〜.p-10p PC・SP版有	.p-b1p（下）/.p-t1p（上）/.p-l1p（左）/ .p-r1p（右）	{ padding: 1%; }〜{ padding: 10%; } （全体）
.m-5〜.m-80 PC・SP版有	ピクセル指定は今後使用しない方向	{ margin: 5px; }〜{ margin: 80px; } （50pxまでは5px間隔）
.p-5〜.p-80 PC・SP版有	ピクセル指定は今後使用しない方向	{ padding: 5px; }〜{ padding: 80px; } （50pxまでは5px間隔）

子要素に作用するクラス

クラス	仕様	備考
.m-c-1p > 〜.m-c-10p > PC・SP版有	.m-c-1p（全体）/.m-c-b1p（下）/.m-c-t1p（上）/ .m-c-l1p（左）/ .m-c-r1p（右）/ .m-c-rl-1p（左右）	親要素に付与する <div class="m-c-b1p"> <p>このpの下に1％のマージンがつきます</p> <p>このpの下に1％のマージンがつきます</p> <p>このpの下に1％のマージンがつきます</p> <p>このpの下に1％のマージンがつきます</p> <p>このpの下に1％のマージンがつきます</p> </div>

その他：COMMON OTHER

.box-in	パディング・ボーダー要素が全て内包（箱計算不要）パディング2％・ボーダー5pxの場合通常ブロックパディング・ボーダーの「内側」がwidth:20% ▼ 内包ブロックパディング・ボーダーを「内包」してwidth:20% box-inの適用なし（5列並べたい）ブロック1 ブロック2 ブロック3 ブロック4 ブロック5 ブロック6 ブロック7 ブロック8 ▲ボーダー分が加算されて期待通りに並ばない box-inの適用（5列並べたい）ブロック1 ブロック2 ブロック3 ブロック4 ブロック5 ブロック6 ブロック7 ブロック8 ▲ボーダー分が内包されて意図したとおりに整列	{ box-sizing: border-box; }
.box-radius*	.box-radius3(角丸3px)・.box-radius5(角丸5px) .box-radius10(角丸10px)・.box-radius15(角丸15px) .box-radius20(角丸20px) 角丸要素のみでマージン、パディング、ボーダー線色は含まれていないので、組み合わせで使用 <div class="box-radius5 bd-color-a p-1p"></div>など角丸3px 角丸3px 角丸5px 角丸5px 角丸10px 角丸10px 角丸15px 角丸15px 角丸20px 角丸20px	{ border-radius:*px; }

.box-in

パディング・ボーダー要素が全て内包（箱計算不要）

パディング2％・ボーダー5pxの場合

通常ブロック

パディング・ボーダーの「内側」がwidth:20%

▼

内包ブロック

パディング・ボーダーを「内包」してwidth:20%

box-inの適用なし（5列並べたい）

ブロック1

ブロック2

ブロック3

ブロック4

ブロック5

ブロック6

ブロック7

ブロック8

▲ボーダー分が加算されて期待通りに並ばない

box-inの適用（5列並べたい）

ブロック1

ブロック2

ブロック3

ブロック4

ブロック5

ブロック6

ブロック7

ブロック8

▲ボーダー分が内包されて意図したとおりに整列

{ box-sizing: border-box; }

.box-radius*

.box-radius3(角丸3px)・.box-radius5(角丸5px)
.box-radius10(角丸10px)・.box-radius15(角丸15px)
.box-radius20(角丸20px)
角丸要素のみでマージン、パディング、ボーダー線色は含まれていないので、組み合わせで使用
<div class="box-radius5 bd-color-a p-1p"></div>など

角丸3px
角丸3px

角丸5px
角丸5px

角丸10px
角丸10px

角丸15px
角丸15px

角丸20px
角丸20px

{ border-radius:*px; }

準備されているテーブル一覧

table.style01、table.style02、table.style03、table.style04までの既存スタイルが用意されています
それぞれのtableには幅指定はされていません。（ただしmargin:0 auto 1.5em auto;でセンター揃え）
幅指定する場合は、

例：<table class="style01 w-100p">

加えて、TH要素、TD要素の左右比も指定可能
per-20p80p（th20％・td80％）⇒per-80p20pまで用意

例：<table class="style01 w-100p per-20p80p">

スマホ対応（DIV変換）

例：<div class="chg-table"><table>〜</table></div>

Wrapper要素「<div class="chg-table>」で囲む（PCには影響なし）

Table Header	Table Data
Table Header	Table Data
Table Header	Table Data

スマホ対応（横スクロール）

例：<div class="scroll-table"><table>〜</table></div>

Wrapper要素「<div class="scroll-table>」で囲む（PCには影響なし）

TH1	TH2	TH3	TH4	TH5	TH6	TH7	TH8
TD1（ここに文章が入ります。）	TD2（ここに文章が入ります。）	TD3（ここに文章が入ります。）	TD4（ここに文章が入ります。）	TD5（ここに文章が入ります。）	TD6（ここに文章が入ります。）	TD7（ここに文章が入ります。）	TD8（ここに文章が入ります。）
TD9（ここに文章が入ります。）	TD10（ここに文章が入ります。）	TD11（ここに文章が入ります。）	TD12（ここに文章が入ります。）	TD13（ここに文章が入ります。）	TD14（ここに文章が入ります。）	TD15（ここに文章が入ります。）	TD16（ここに文章が入ります。）

TH1

TH2

TH3

TH4

TH5

TH6

TH7

TH8

TD1（ここに文章が入ります。）

TD2（ここに文章が入ります。）

TD3（ここに文章が入ります。）

TD4（ここに文章が入ります。）

TD5（ここに文章が入ります。）

TD6（ここに文章が入ります。）

TD7（ここに文章が入ります。）

TD8（ここに文章が入ります。）

TD9（ここに文章が入ります。）

TD10（ここに文章が入ります。）

TD11（ここに文章が入ります。）

TD12（ここに文章が入ります。）

TD13（ここに文章が入ります。）

TD14（ここに文章が入ります。）

TD15（ここに文章が入ります。）

TD16（ここに文章が入ります。）

表は横スクロールでご覧いただけます

class="style01 w-100p per-20p80p" ボーダーなし

Table Header	Table Data
Table Header	Table Data
Table Header	Table Data

class="style02 w-80p per-20p80p" <th>センター<td>左

Table Header	Table Data
Table Header	Table Data
Table Header	Table Data

class="style03 w-80p per-40p60p"<th><td>ともに左

Table Header	Table Data
Table Header	Table Data
Table Header	Table Data

class="style04 w-50p per-50p50p" 上下ボーダーのみ

Table Header	Table Data
Table Header	Table Data
Table Header	Table Data
Table Data(colspan="2" class="ta-center")

class="style02 layout-fixed" <th><td>等間隔に整列

TH1	TH2	TH3	TH4	TH5	TH6	TH7	TH8
TD1	TD2	TD3	TD4	TD5	TD7	TD7	TD8
TD9	TD10	TD11	TD12	TD13	TD14	TD15	TD16

TH1

TH2

TH3

TH4

TH5

TH6

TH7

TH8

TD1

TD2

TD3

TD4

TD5

TD7

TD8

TD9

TD10

TD11

TD12

TD13

TD14

TD15

TD16

よく使うスタイル

仕様	書き方	実際の見え方
.btn-continue	CUSTOM STYLE <p class="ta-center"> <a class="btn-continue" href="#"><span>詳細はこちら</span></a> </p>	詳細はこちら
.contents-back	CUSTOM STYLE <p class="ta-center"> <a class="contents-back" href="#"><span>トップに戻る</span></a> </p>	トップに戻る
.hover	Jquery（重ねると薄くなる） <a class="btn-continue hover" href="#"><span>重ねると薄く</span></a>	重ねると薄く
a.blank .a-blank	親要素に設定したい場合「class="a-blank"」で内包<a>の「target="_blank"」属性全てにアイコンが表示されます例： <p class="a-blank"> <a href="#" target="_blank"><span>新規</span></a> <a href="#" target="_parent">親リンク</a> </p> aタグに直接設定したい場合「class="blank"」 <a href="#" target="_blank" class="blank">新規</a>	新規ウィンドウで表示このウィンドウで表示

ボックス

PC・SP版有

仕様	書き方	使い方
.box-3-pc	<p>ボックス1</p> <p>ボックス2</p> <p>ボックス3</p> </div>	ボックスを囲んでいる親要素に指定をする（子要素に反映される）ボックスにマージンをつけたい場合は別途指定が必要ボックスが増えていってもOK 注意 .m-c-r2pを一緒に付与してください。初期値は右にマージン2％を空けるように幅を決めてあります。マージンの値を広くする場合はボックスの幅を狭くしてください。

.box-2-pc .box-2-sp（PC、スマホとも2列）

ボックス1です。

ボックス2です。ボックス2です。

ボックス3です。ボックス3です。ボックス3です。

ボックス4です。ボックス4です。ボックス4です。ボックス4です。

ボックス5です。ボックス5です。ボックス5です。ボックス5です。ボックス5です。

ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。

ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。

ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。

.box-3-pc .box-2-sp（PCでは3列、スマホでは2列）

ボックス1です。

ボックス2です。ボックス2です。

ボックス3です。ボックス3です。ボックス3です。

ボックス4です。ボックス4です。ボックス4です。ボックス4です。

ボックス5です。ボックス5です。ボックス5です。ボックス5です。ボックス5です。

ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。

ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。

ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。

.box-4-pc（PCでは4列、スマホでは1列）

ボックス1です。

ボックス2です。ボックス2です。

ボックス3です。ボックス3です。ボックス3です。

ボックス4です。ボックス4です。ボックス4です。ボックス4です。

ボックス5です。ボックス5です。ボックス5です。ボックス5です。ボックス5です。

ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。

ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。

ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。

.box-5-pc .box-3-sp（PCでは5列、スマホでは3列）

ボックス1です。

ボックス2です。ボックス2です。

ボックス3です。ボックス3です。ボックス3です。

ボックス4です。ボックス4です。ボックス4です。ボックス4です。

ボックス5です。ボックス5です。ボックス5です。ボックス5です。ボックス5です。

ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。ボックス6です。

ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。ボックス7です。

ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。ボックス8です。

よく使うJquery

スライドダウン

更に詳しく

スライドダウン（複数使用）

更に詳しく1

更に詳しく2

更に詳しく3

ライトボックス

画像の場合

aタグにlightboxを追加

iframeの場合

aタグにiframeを追加

youtubeの場合

aタグにiframe cboxElementを追加

ライトボックス（複数枚ある場合）

すべてのaタグにlightboxを追加

よく使うJquery（SP）

仕様	書き方	使い方
.open-sp .open-sp-body .open-sp-btn（画像）	<div> <div class="open-sp"> <p>クリックで開く（スマホで確認）</p> <span class="open-sp-btn"></span> <!-- <div class="open-sp"> --></div> <div class="open-body-sp" style="display:none"> <ul> <li><span>テキスト</span></li> <li><span>テキスト</span></li> <li><span>テキスト</span></li> </ul> <!-- <div class="open-sp-body"> --></div> </div>	・スマホのみクリックで開きたい場合・開いたらボタンの画像が変わる（必要ない場合は<span class="sp-open"></span>をトル）

実際の見え方

クリックで開く（スマホで確認）

div全体をリンクに

仕様	書き方	使い方
.link	<div class="link"> <a href="#"></a> <p>全体がリンクになっています</p> </div>	スマホのみdiv全体をリンクにしたいとき

実際の見え方

全体がリンクになっています

スマホ対応

電話番号

仕様	書き方	使い方
.tel-link	<span class="tel-link">076-000-0000</span>	スマホは数字の羅列を電話番号として認識してしまう。不要なところでタップ→電話という流れを避けるため、電話番号のみにクラス付与。 /include/meta.html <meta name="format-detection" content="telephone=no"> の記述があるか確認

仕様

書き方

使い方

.tel-link

スマホは数字の羅列を電話番号として認識してしまう。
不要なところでタップ→電話という流れを避けるため、電話番号のみにクラス付与。

/include/meta.html
<meta name="format-detection" content="telephone=no"> の記述があるか確認

実際の見え方

076-000-0000

PC、スマホで画像差し替え

仕様	書き方	使い方
.imgChange	<img src="/common/images/parts/pts-no-image-pc.png" alt="noimage" class="imgChange">	PCとスマホで違う画像を置きたい場合など画像を2枚用意・aaa-pc.png ・aaa-sp.png <img src="/common/images/parts/pts-no-image-pc.png" alt="noimage" class="imgChange"> を表示させておき、スマホではaaa-sp.pngが表示される

実際の見え方

画像切り替え

リビング階段、LDK,和室で大空間

LDK同一空間でありながらあまり干渉し合わない

キッチンからは、階段、ダイニング、リビング、和室も見渡せるように配置しました

お客様用玄関はシンプルに、家族には横にシューズクロークを備えた玄関を配置

洗面化粧台は広々カウンターを採用。横の部屋にはたっぷり洗濯物を干せるサンルームを配置

和室にはモダンな吊り押入れ

ゴロンとなりたい時に便利な畳スペースをリビングの横に配置

寝室にはたっぷり洋服が掛けれるウォークインクローゼット

CSS

.gallery-ttl { color: #3fa1c0; font-size: 170% }
.gallery-block { position: relative; min-height: 520px }
.gallery-img-block { width: 520px; height: 520px; position: absolute; margin: auto;  display: table; text-align: center }
.gallery-img {  display: table-cell; vertical-align: middle }
.gallery-img img { max-width:500px; max-height:500px; width:auto; height:auto; margin: auto; }
.gallery-thumb { float: right;  width: 450px; }
.gallery-description { padding: 1em 0; }
.gallery-caption { padding: 1em 0; }
.garelly-photo-section {text-align: center;}

.gallery-img #tab2,
.gallery-img #tab3,
.gallery-img #tab4,
.gallery-img #tab5,
.gallery-img #tab6,
.gallery-img #tab7,
.gallery-img #tab8,
.gallery-img #tab9,
.gallery-img #tab10,
.gallery-img #tab11,
.gallery-img #tab12,
.gallery-img #tab13,
.gallery-img #tab14,
.gallery-img #tab15
 {display: none;}
 
/*thumbnail*/
#gallery ul.thumb-list {  }
ul.thumb-list { list-style: none; padding: 0; margin: 0; letter-spacing: -1em }
ul.thumb-list li { letter-spacing: normal; display: inline-block; padding: 0 2%; box-sizing: border-box; margin-bottom: 3%; vertical-align: top }
#model ul.thumb-list li {  }

JS

//タブオープン
$(function tab() {
    $("#tab .thumb-list a").click(function tab() {
    $($("#tab .thumb-list a.sel").attr("href")).hide();
    $("#tab .thumb-list a.sel").removeClass("sel");
    $(this).addClass("sel");
    $($(this).attr("href")).fadeIn("fast");
return false;
});
});

無垢材を使った健康で長寿命な富山の注文住宅【棚田建設】

必要なファイル

スタイルの変更

矢印の画像ファイル

画像名

スライドの上のテキスト

画像名

画像横の背景色を変える

スタイル一覧

<div class="asset-content"></div>で囲った場合

<h2>ブログ記事などのノーマル見出し2</h2>

<h3>ブログ記事などのノーマル見出し3</h3>

<h4>ブログ記事などのノーマル見出し4</h4>

<h5>ブログ記事などのノーマル見出し5</h5>

asset-contentをクリアして独自のスタイルを適用したい場合

<h2>ブログ記事などのノーマル見出し2</h2>

<h3>ブログ記事などのノーマル見出し3</h3>

<h4>ブログ記事などのノーマル見出し4</h4>

<h5>ブログ記事などのノーマル見出し5</h5>

既存のクラス

共通要素：COMMON ELEMENT

共通カラー：COMMON COLOR

書式・書体・段落：COMMON (FONT + PARAGRAPH)

Mac、Windows共通日本語フォント

Mac、Windows共通欧文フォント

幅・高さ：COMMON WIDTH

複数のブロックレベル要素の高さを揃える（要heightLine.js）

適用なしの場合

各ブロック個別に適用した場合

ブロック親要素に適用した場合（表示結果はheightlineと同じ）

ディスプレイ：COMMON DISPLAY

揃え・回り込み：COMMON ALIGN

ボックス間隔：COMMON MARGIN+PADDING

子要素に作用するクラス

その他：COMMON OTHER

パディング・ボーダー要素が全て内包（箱計算不要）

box-inの適用なし（5列並べたい）

box-inの適用（5列並べたい）

準備されているテーブル一覧

スマホ対応（DIV変換）

スマホ対応（横スクロール）

class="style01 w-100p per-20p80p" ボーダーなし

class="style02 w-80p per-20p80p" <th>センター<td>左

class="style03 w-80p per-40p60p"<th><td>ともに左

class="style04 w-50p per-50p50p" 上下ボーダーのみ

class="style02 layout-fixed" <th><td>等間隔に整列

よく使うスタイル

ボックス

PC・SP版有

.box-2-pc .box-2-sp（PC、スマホとも2列）

.box-3-pc .box-2-sp（PCでは3列、スマホでは2列）

.box-4-pc（PCでは4列、スマホでは1列）

.box-5-pc .box-3-sp（PCでは5列、スマホでは3列）

よく使うJquery

スライドダウン

スライドダウン（複数使用）

ライトボックス

ライトボックス（複数枚ある場合）

よく使うJquery（SP）

実際の見え方

div全体をリンクに

実際の見え方

スマホ対応

電話番号

実際の見え方

PC、スマホで画像差し替え

実際の見え方

画像切り替え

CSS

JS