Studio使い方マニュアル

Studioでの画像の挿入方法、表示方法の違いについて初心者にもわかりやすく解説しています。2023年8月のStudio仕様アップデートに対応しています！

Studioでのテキストの挿入方法、フォントや色といったデザイン変更の方法について初心者にもわかりやすく解説しています。2023年8月のStudio仕様アップデートに対応しています！

Studioでの出現時アニメーションの設定方法について初心者にもわかりやすく丁寧に解説しています。2023年8月のStudio仕様アップデートに対応しています！

STUDIOでのホバーアニメーションの設定方法について初心者にもわかりやすく丁寧に解説しています。2023年8月のSTUDIO仕様アップデートに対応しています！

STUDIOでの余白の設定方法、マージンとパディングの違いについて初心者にもわかりやすく丁寧に解説しています。2023年8月のSTUDIO仕様アップデートに対応しています！

STUDIOでのボックスや文字色の設定方法について初心者にもわかりやすく丁寧に解説しています。2023年8月のSTUDIO仕様アップデートに対応しています！

STUDIOでのギャップを使った余白の設定方法やマージンとの違いや使い分けについて初心者にもわかりやすく丁寧に解説しています。2023年8月のSTUDIO仕様アップデートに対応しています！

STUDIOで制作するWebサイトにYouTube動画を埋め込む方法、任意の位置から再生したりループ（繰り返し）再生させたりする方法について初心者にもわかりやすく丁寧に解説しています。2023年8月のSTUDIO仕様アップデートに対応しています！

STUDIOで制作するWebサイトに地図（GoogleMap）を埋め込む方法、ズームアウトして広域表示にしたりズームインして詳細表示にしたりする方法について初心者にもわかりやすく丁寧に解説しています。

STUDIOでWebサイトを制作する際に高頻度で使用する要素の選択方法について初心者にもわかりやすく丁寧に解説しています。2023年8月に追加されたダイレクト選択モードの他、親ボックス選択、レイヤー選択をマスターすれば、要素の選択をスムーズに行うことができると思うのでいまいちうまく選択できないなと思っていた方は必見です！

2023年8月、STUDIOのシンボル機能がコンポーネント機能としてパワーアップしました。
この動画ではコンポーネント機能について初心者にもわかりやすく丁寧に解説しています。
コンポーネント機能を利用すると、よく使うデザインを部品として保存しておけるので、STUDIOでのウェブサイト制作が格段に効率的になります。
同じ作業を何回もしているような気がするなーという方はぜひマスターしていただければと思います！

この動画ではSTUDIOのはみ出し設定（はみ出し・切り取り・スクロール）について初心者にもわかりやすく丁寧に解説しています。
この機能をマスターすると、ページの一部で横スクロールできるデザインや、サイズがバラバラの画像を一定の範囲内に収めたりすることができるのでデザインの幅がぐんと広がります。

この動画ではSTUDIOのリッチテキストの使い方について初心者にもわかりやすく丁寧に解説しています。
リッチテキストをマスターすると、簡単に箇条書きを挿入できたりテキストボックスを多用しなくても簡単に文章の一部のデザインを変更したりできるので、テキストデザインの幅がぐんと広がります。

この動画ではSTUDIOのボックスの並び（方向・配置）の設定方法について初心者にもわかりやすく丁寧に解説しています。
何となく使いがちなこの機能ですが、中身を理解するとレイアウトを組む際に困ることが無くなる便利な機能なのでぜひこの機会にしっかり理解してください！

この動画ではSTUDIOの表示・非表示の設定方法について初心者にもわかりやすく丁寧に解説しています。
この機能をマスターするとレスポンシブ対応で欠かせないハンバーガーメニューの設置等ができるようになります！

この動画ではSTUDIOのサイズ単位について初心者にもわかりやすく丁寧に解説しています。
ピクセル、パーセント、フレックス、オート...STUDIOにはサイズを調整する際に色々な単位がありますがなんとなく使っていませんか？
今回は実はあまりちゃんと理解できていないことも多い単位について実例を交えながら詳しく解説します！

マイナスマージンを使ってテキストや画像同士を重ねたレイアウトを作る方法や重ね順の制御の仕方について初心者にもわかりやすく丁寧に解説しています。
この機能をマスターすると要素通しが重なり合ったレイアウトのウェブサイトを作れるようになります！

ボックスの配置設定（相対位置・絶対位置・固定位置）それぞれの特徴や実装方法、注意点を初心者にもわかりやすく丁寧に解説しています。
ボックス配置を理解すると、スクロールしても固定表示されるナビゲーションやお問い合わせボタン等を作ることができるのでぜひマスターしてみてください！

リスト化について、基本的な使い方、ひとつ一つの機能についてわかりやすく丁寧に解説しています。
リスト化をすると、デザインを型として保存できるので、デザインの変更作業が格段に楽になります！
もし同じようなデザインを何回もコピーしていたり、デザイン変更の度に同じ作業を何回も繰り返してるなぁと思っている方はぜひマスターしてみてください！

CMSの機能について、仕組みの理解から記事ページの作成方法をわかりやすく丁寧に解説しています。
CMSを利用すると、コンテンツとデザインを別々に管理することができるようになるため、ウェブサイトの更新が格段に楽になります。
記事をたくさん投稿するメディアサイトも作れるようになりますのでぜひマスターしてみてください！

CMSの機能について、仕組みの理解から記事ページの作成方法をわかりやすく丁寧に解説しています。
今回の後編は、前編で作成した記事への入り口となる記事一覧ページをSTUDIOの動的リストを使って作成していきます。
CMSを利用すると、コンテンツとデザインを別々に管理することができるようになるため、ウェブサイトの更新が格段に楽になります。
記事をたくさん投稿するメディアサイトも作れるようになりますのでぜひマスターしてみてください！

404ページの作成・設定方法についてわかりやすく丁寧に解説しています。
404ページは、リンク切れ等でサイト上に適切なページが見つからなかった際、閲覧者の混乱を避けるために表示する大事なページですのでぜひご覧ください！

リンクの設定方法について、基本的な使い方、ひとつ一つの機能についてわかりやすく丁寧に解説しています。
ページ同士をリンクで繋げる方法はもちろん、ページ内でぬるっと移動させるアンカーリンクの設定や外部サイトを別タブで開く方法も解説しますのでぜひご覧ください！

Googleドライブを使ったファイルダウンロードの実装方法についてわかりやすく丁寧に解説しています。
ファイルダウロードを実装できれば資料や画像等をウェブサイトからユーザーに直接ダウンロードしてもらうことができます。

直接ダウンロードさせるためのリンク形式
下記URLの「ファイルID」部分をダウンロードさせたいファイルIDに差し替えてください。

https://drive.google.com/uc?export=download&id=ファイルID

カルーセルについて、基本的な使い方、ひとつ一つの機能についてわかりやすく丁寧に解説しています。
構造が少し複雑で、初見だと全体像が掴めず編集しにくいと感じる方が多いかもしれませんが、構造と仕組みを理解すると編集は簡単で、ワンランク上のウェブサイトを構築することができます。

ファビコン（ウィンドウのタブに表示されるアイコン）の設定方法についてわかりやすく丁寧に解説しています。
ファビコンを設定することでブランドを強化でき、オリジナリティや信頼性の向上につながります。

セクションとボックスの違いについて、わかりやすく丁寧に解説しています。
セクションとボックスは持っている機能が一部異なります。
両者の違いをしっかり理解することで、思い通りのウェブデザインを実現できるようになります。

トグルの仕組みと使い方について、わかりやすく丁寧に解説しています。
トグルの使い方をマスターすると、Q＆A・アコーディオンメニュー・ポップアップ式のメニューなどを実装できるようになります。

Lottieアニメーションを使用する方法をわかりやすく丁寧に解説しています。
Lottieを使用すると、スクロールに連動するアニメーションや動くアイコン等を、CSSやJavaScriptといったコードを一切使わずに実装することができます。

相対位置・絶対位置の違いや使い分けについて、わかりやすく丁寧に解説しています。
両者の位置の決まり方や使い分けについて正しく理解することで、Webサイトを正しく綺麗に作ることができます。