イントロダクション
  • STUDIOとは
  • 講座の構成
動作環境
  • Google Chromeを使用する
  • googleChromeのレスポンシブ確認方法
  • アカウントの作成
  • ログイン方法
STUDIOの機能
  • デザインを開始する
  • ツールの配置
  • 要素の編集
  • 要素の追加
  • 要素のコピー
  • BOXレイアウトとは
  • BOXを親子関係にする
  • BOXを角丸にする
  • BOXの装飾(透明度・塗・枠線・シャドウ)
  • BOXの配置の挙動(横配置・縦配置・回り込み)
  • ブレークポイントでの表示切り替え
  • マージンとパディング(図解)
  • 空白を作る(マージン・パディング)
  • タイポグラフィー
  • アイコンの追加・サイズ・色変更
  • リンクの設定
  • スクリーンサイズでの表示/非表示
  • マウスホバー時のデザイン
  • 画像の配置
  • 動画の配置
  • google mapの配置
  • カスタムiframeの配置(例:Facebookプラグインを表示)
  • メニューを固定する
  • 画像のアップロード
  • ページの新規作成・複製・削除
  • ドロワーメニューの設置方法
  • モーダルウィンドウを設置する
  • TOPページを決定する
  • ヘルプの案内(操作に迷ったときは)
ステップバイステップ(1ページコーポレートサイトを作成する)
  • 新規プロジェクトを作成
  • サイトの構成を確認
  • ヘッダーを作成する
  • ヘッダー:レスポンシブの調整
  • アイキャッチ画像を配置
  • キャッチコピー、お問い合わせボタンを設置(アイキャッチエリア内)
  • キャッチコピー・お問い合わせエリアのレスポンシブ確認
  • サービスエリアを作成する
  • メッセージエリアを作成する
  • お問い合わせエリアを作成する
  • 地図を埋め込む
  • フッターを作成
  • 各セクションにIDを設定
  • リンクを設定
  • デザイン完了
さいごに
  • さいごに