不動産ホームページに物件価格での住宅ローンシュミレーション( Javascript)を設置する

2020年12月24日

あらかじめ借入金額に物件金額を読み込んで入力されているバージョンを作成しました。

物件価格での住宅ローンシュミレーション

物件価格4,198万円
住宅ローンシュミレーション【元利均等】

ご希望の借入金額や返済期間から、毎月の返済額を計算します。返済額がどのように変わるのかシミュレーションしてみましょう。

借入金額万円
融資金利%
返済期間(月数)ヶ月
返済月額

住宅ローンシュミレーションのCSS

デモの住宅ローンシュミレーションのcssは、下記になります。

.koumoku_box{ border-bottom:solid 1px; position:relative; height:50px; max-width:400px; margin:auto; margin-top:20px;}
.koumoku{ background:white; position:absolute; bottom:5px; border-radius:10px; padding:5px 10px; border:solid 1px;}
.koumoku_value , .koumoku_value2{position:absolute; right:0; bottom:5px;}
.koumoku_box input{ border:none; background:white; text-align:right; background:none; font-size:24px;}
.koumoku_box2{ position:relative; height:50px; max-width:400px; margin:auto; margin-top:20px;}
.koumoku_value input{max-width:300px;}
.red{
color:red;
font-weight:bold;
font-size:2rem;
}
.loan-button {
text-align: center;
text-decoration: none!important;
padding: .5em 1em;
color: #fff;
display: block;
font-size: 1.2em;
line-height: 1.5em;
background-color: #09c;
background-image: -webkit-linear-gradient(#009fd4,#09c,#0086b2);
background-image: -moz-linear-gradient(#009fd4,#09c,#0086b2);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
border: 1px solid #0086b2;
cursor: pointer;
margin:auto;
margin-top:30px;
}

住宅ローンシュミレーションの設置方法

下記よりご購入いただき、ダウンロードした「loan2.zip」を解凍し「loan2.php」に記載されたコードをコピペして使用できます。デザインは前項のcssを利用していただくかご自身でカスタマイズしてください。

物件価格の設定は、コードの中にid名が「price」の要素を取得しています。下記コードは例です。

<div style="margin-bottom:10px;"><span style="border-bottom: solid 1px; border-top: solid 1px; border-left: solid 1px; background:gray; padding: 10px;">物件価格</span><span id="price" style="border: solid 1px; padding: 10px;">4,198万円</span></div>

物件価格での住宅ローンシュミレーション

550円(税込)

メールでのお問い合わせは、下記を入力して下さい。