Manuals
Studio使い方マニュアル
コードを書いてこだわりのデザインを実装する
DAISUKE
上級
4動画
1時間21分
このコースでは、STUDIOの提供している基本機能では実装できないものの、少しコードを書くことで実現できるデザインを紹介しています。
少し難しい内容になりますが、より凝ったウェブサイトを制作することができますのでぜひチャレンジしてみてください。
住所が自動入力されるフォームを作る
22:00
この動画では、STUDIOで郵便番号を入力すると住所が自動で入力されるフォームの作成方法を紹介しています。
注意点
・実装には有料プランへのアップグレードが必要です。
・ライブプレビューでは機能しません。動作チェックは公開サイトで行なってください。
貼り付けコードはこちらをご利用ください。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<script>
var syubetsu = document.getElementById('name');
var new_elem = document.createElement('span');
new_elem.classList.add('p-country-name');
new_elem.style.display = 'none';
new_elem.textContent = 'Japan';
syubetsu.before(new_elem);
var elemF = document.getElementById('form1');
var elem1 = document.getElementById('postalcode');
var elem2 = document.getElementById('prefecture');
var elem3 = document.getElementById('address1');
var elem4 = document.getElementById('address2');
elemF.classList.add('h-adr');
elem1.classList.add('p-postal-code');
elem2.classList.add('p-region');
elem3.classList.add('p-locality');
elem3.classList.add('p-street-address');
elem4.classList.add('p-extended-address');
new YubinBango.MicroformatDom();
</script>
