KDC : Web演習 第2回

デザインをそのまま実際のWebサイトとして公開可能な、次世代Webデザインツール。
コーディングなしで、完全オリジナルなWebサイトを作成することが出来る。

制作プロセスがシンプルで、爆速でWebサイトを公開することが可能

従来のWeb制作の流れ

STUDIOのWeb制作の流れ

まっさらな状態から制作を始めることが出来る為、他のノーコードツールと比べて表現の自由度が高い。

現在（2023年4月時点）は上質なテンプレートが多数ありますので、いろんなジャンルのテンプレートに触れてみよう。

STUDIOで構築可能なWebサイトの構造を学ぶことが出来る為、学生の皆さんには、テンプレートを選んでからの制作スタートをオススメします。

メンバーを招待して共同でデザイン編集することが可能です。追加人数の制限はありません。

• chot.design – 共同編集について

無料プランの場合、サブドメイン（○○○.studio.design）としてサイトを公開できます。

ドメイン（に設定できる文字列）は早いもの勝ち。お気に入りのワードを含んだドメインを取得したいのであれば、早めに設定してみましょう！

豆知識：サブドメインとは？

「hoge.com」を本体とした際に、「fuga.hoge.com」のようにドメインの先頭に任意の文字列を挿入し、ドメインを区分けするものです。1つのドメインを用途別に分割したい時に使用されます。

豆知識：独自ドメインの設定も可能

有料プランになると独自ドメインを設定できます。

もし、今後も個人のWebサイトとして活用することを考えている方は、独自ドメインの取得方法からSTUDIOでの設定方法まで詳しく教えますので、気軽に相談してね！

STUDIOでは、ボックスレイアウト（ボックスモデルとも呼ぶ）の考え方を採用しています。
「HTMLで定義された要素は全て長方形のボックスの中に納められている」という考え方で、これを元にWebサイトを制作していくことになります。

四角の箱に画像や文字を入れて、積み木のように重ねていくイメージです。

マージンは、ボックスの外側の余白
パディングは、ボックスの内側の余白

マージンとパディングは、家と土地の関係でよく例えられます。以下のようなイメージです。

ボックス内の要素は、上下左右・斜めを含めた9つの位置に配置できます。整列の向きは矢印のボタンですぐに変更可能。

レスポンシブ対応のWebサイトを行う場合はジグザグ矢印に設定しておくとオススメ。