Manuals
Studio使い方マニュアル
コードを書いてこだわりのデザインを実装する
DAISUKE
上級
4動画
1時間21分
このコースでは、STUDIOの提供している基本機能では実装できないものの、少しコードを書くことで実現できるデザインを紹介しています。
少し難しい内容になりますが、より凝ったウェブサイトを制作することができますのでぜひチャレンジしてみてください。
住所が自動入力されるフォームを作る
22:00
住所が自動入力されるフォームを作る
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>ボックスにパターンを適用させる
16:28
ボックスにパターンを適用させる
16:28
今回はSTUDIOでボックスをパターン（模様）で塗りつぶす方法を解説します。
STUDIOにはボックスをパターン（模様）で塗る機能はありませんが、CSS Background Patternsというサービスを活用することで簡単に実装できます。
CSSをコピペするだけでデザインの一部やWebサイトの背景として使うことができると思いますのでぜひ試してみてください。
貼り付けコードはこちらをご利用ください。
<style>
#pattern {
}
</style>タイトルが追従するメニューを作成する
32:35
タイトルが追従するメニューを作成する
32:35
今回は、STUDIOでタイトルが追従するメニューを作る方法を解説します。
現段階ではSTUDIOに要素を追従させる機能はありませんが、CSSのコードを使うことで簡単に実装できます。
動画を見ながら真似するだけで簡単に作成できると思いますのでぜひ試してみたください。
貼り付けコードはこちらをご利用ください。
<style>
.StudioCanvas > .sd {
overflow: visible !important;
}
#follow {
position: sticky;
top: 30px;
}
</style>縦横比を固定したままYouTube動画を埋め込む
12:43
縦横比を固定したままYouTube動画を埋め込む
12:43
今回は、縦横比を維持したままYouTube動画を埋め込む方法をご紹介します。
STUDIOのYouTube埋め込み機能を使うと、縦横の比率をキープできないのでウィンドウサイズによっては動画の端が切れてしまいます。
少しコード（CSS）を書くことで、縦横比が崩れない動画埋め込みを簡単に実装できますのでぜひチャレンジしてみてください。
貼り付けコードはこちらをご利用ください。
<iframe class="youtube-video" src="動画の埋め込みリンクを入力" frameborder="0">
</iframe>
<style>
.youtube-video{
aspect-ratio: 16 / 9;
}
</style>テキストがくるくる回り続けるデザイン
19:19
テキストがくるくる回り続けるデザイン
19:19
今回は、最近いろんなウェブサイトで目にするテキストがくるくる回るデザインをご紹介します。
少しコード（CSS）を書く必要はありますが、真似するだけで簡単に実装できますのでぜひチャレンジしてみてください。
貼り付けコードはこちらをご利用ください。
<style>
#loop{
animation:rotate 10s infinite;
animation-timing-function:linear;
}
@keyframes rotate{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
</style>