−CSSサンプル［flow］−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

flowチャート１

画像ダウンロード

＜HTML＞
<div class="flow_box">
<div class="element"><img src="/wp-content/themes/template/images/icon-img1.gif" /></div>
<div class="element">（１）</div>
</div>
<img class="img_center small-img-sp" src="/wp-content/themes/template/images/icon-yaji2.gif" />
<div class="flow_box">
<div class="element"><img src="/wp-content/themes/template/images/icon-img2.gif" /></div>
<div class="element">（２）</div>
</div>
<img class="img_center small-img-sp" src="/wp-content/themes/template/images/icon-yaji2.gif" />
<div class="flow_box">
<div class="element"><img src="/wp-content/themes/template/images/icon-img3.gif" /></div>
<div class="element">（３）</div>
</div>
<img class="img_center small-img-sp" src="/wp-content/themes/template/images/icon-yaji2.gif" />
<div class="flow_box">
<div class="element"><img src="/wp-content/themes/template/images/icon-img4.gif" /></div>
<div class="element">（４）</div>
</div>
<img class="img_center small-img-sp" src="/wp-content/themes/template/images/icon-yaji2.gif" />
<div class="flow_box">
<div class="element"><img src="/wp-content/themes/template/images/icon-img5.gif" /></div>
<div class="element">（５）</div>
</div>
<img class="img_center small-img-sp" src="/wp-content/themes/template/images/icon-yaji2.gif" />
<div class="flow_box">
<div class="element"><img src="/wp-content/themes/template/images/icon-img6.gif" /></div>
<div class="element">（６）</div>
</div>


＜CSS＞
/*--------------------------------------------------------

flow_box

--------------------------------------------------------*/
.flow_box{
	border:solid 4px #49a2cf;
	border-radius:15px;
	padding:10px 50px;
	color:#49a2cf;
	font-size:1.2em;
	font-weight:bold;
	display: table;
	width:100%;
}
.flow_box .element:nth-of-type(1){
	width:150px;
	display: table-cell;
}
.flow_box .element:nth-of-type(2){
	padding-left:30px;
	display: table-cell;
	vertical-align:middle!important;
}
@media screen and (max-width: 481px)  {
.flow_box{padding:5px 10px;}
.flow_box .element:nth-of-type(1){width:100px;}
.flow_box .element:nth-of-type(2){padding-left:20px;}
.small-img-sp{width:30%;}
}

サンプル2　流れ

データ画像ダウンロード

＜HTML＞
<div class="baikyaku-flow wrap90">
<table>
	<tbody><tr>
		<th><img src="/wp/wp-content/themes/kujiraoka-template/img/no1.png"></th>
		<td><img src="/wp/wp-content/themes/kujiraoka-template/img/flow1.png"></td>
		<td><h3>　</h3>
		</td>
	</tr>
	<tr>
		<th><img src="/wp/wp-content/themes/kujiraoka-template/img/no2.png"></th>
		<td><img src="/wp/wp-content/themes/kujiraoka-template/img/flow2.png"></td>
		<td><h3>調査・査定</h3>
		</td>
	</tr>
	<tr>
		<th><img src="/wp/wp-content/themes/kujiraoka-template/img/no3.png"></th>
		<td><img src="/wp/wp-content/themes/kujiraoka-template/img/flow3.png"></td>
		<td><h3>基本方針の決定</h3>
		</td>
	</tr>
	<tr>
		<th><img src="/wp/wp-content/themes/kujiraoka-template/img/no4.png"></th>
		<td><img src="/wp/wp-content/themes/kujiraoka-template/img/flow4.png"></td>
		<td><h3>媒介契約の締結</h3>
		</td>
	</tr>
</tbody></table>
</div>


＜CSS＞
/*--------------------------------------------------------

不動産の売却 satei

--------------------------------------------------------*/
.baikyaku-flow{
	background-image:url(img/flow_border.png);
	background-repeat:no-repeat;

}

.baikyaku-flow table{
	width:100%;
	border-collapse:collapse;
	/*border-top:2px solid #808080;*/
	/*border-left:2px solid #808080;*/
	empty-cells:show;
}
.baikyaku-flow table th{
	width:90px;
	/*border-right:2px solid #808080;*/
	/*border-bottom:2px solid #808080;*/
	text-align:center;
	vertical-align:top;
}
.baikyaku-flow table td{
	/*border-right:2px solid #808080;*/
	border-bottom:dotted 1px #808080;
	vertical-align:top;
	padding-top:10px;
	padding-bottom:10px;
}

.baikyaku-flow h3{
	font-size:1.6em;
	color:#0f3668;
	margin-bottom:10px;
	margin-top:10px;
}
.baikyaku-flow td:nth-of-type(1){width:130px;}
.baikyaku-flow td:nth-of-type(2){padding-left:10px;}

.baikyaku-flow h3:before {
	font-family: 'FontAwesome';
	content: "\f00c";
	padding-right: 5px;
}

@media screen and (max-width: 481px)  {
.baikyaku-flow table th{width:50px;}
.baikyaku-flow td:nth-of-type(1){width:90px;}
.baikyaku-flow td:nth-of-type(2){padding-left:5px;}
}