Studio

「配置」機能でページ内のボックスの配置場所やルールを指定することが出来ます。4種類の方法を使い分けることにより、様々な表現が可能です。

ボックスの配置：相対位置・固定位置・絶対位置・追従位置

ページに配置したボックスに設定するサイズ単位をご紹介します。固定値や相対値などの設定が可能です。

ボックスのサイズ単位設定方法

Studioでボックスに余白を設定する方法についてご紹介します。マージン・パディング・ギャップの3つの機能とその具体的な設定方法を解説します。

マージン・パディング・ギャップの設定方法

ネガティブマージン

画面幅（ブレイクポイント）ごとにコンテンツの表示・非表示を設定する方法をご紹介します。

ボックスの表示設定

親ボックスからはみ出した要素の扱い（オーバーフロー）

はみ出し

前面に任意の要素を持ってくる

重ね順

ボックスの不透明度を設定する

不透明度

ページに配置したボックスの色を設定する方法をご紹介します。単色・グラデーション、RGBA・HEXコード指定やカラーピッカーなど、豊富な色の選択方法があります。

ボックスへの色の設定方法

ボックスに枠線を追加し、色や種類、太さを設定できます。コンテンツの区切りやデザインのアクセントとして活用できる機能です。

ボックスの枠線設定

ボックスごとにドロップシャドウまたはインナーシャドウが設定できます。

シャドウの設定方法

ボックスの角丸設定

ブレンドモード・フィルター・背面フィルター

ホバー、出現時などの条件に応じたスタイルの設定

条件付きスタイル

ホバー・出現時などの条件付きスタイルにモーションをつける

アニメーション

Studioでは工夫次第で様々なアニメーション表現ができます。スプラッシュスクリーンを作成する手順をご紹介します。

ローディング風アニメーションの作成方法

条件付きスタイルのホバーと（in）ホバーを使います

ボタンにカーソルを乗せると色が変わるアニメーションの作成方法

画像やテキストが画面上にふわっと現れるようなアニメーション

フェードしながらスライド表示させるアニメーションの作成方法

Studioで作成するモーダル内でのスクロール設定方法を解説しています。サイト閲覧者がページを移動せずに必要な情報を効率的に閲覧できます。

モーダル内でスクロールを設定する方法

Studioで作成したボタンにカーソルを乗せると端から色が変わるアニメーションを設定方法をご紹介します。条件付きスタイルとアニメーションを利用します。

ホバーで色が端から変わるボタンアニメーションの作成方法

Studioの塗り機能を使って、斜めの背景を作成する方法をご紹介します。

斜め背景を作成する方法

Studio Support

Saika

ボックス毎の設定（スタイルバー）

Intercom のサポートやコミュニティのエキスパートに質問し、答えてもらいましょう。

ヘルプセンターは空です

エラーが発生しました。そのページは存在しません。

がっかり

無表情

笑顔

考えています...

ソースを検索しています...

分析しています...

タイトル

御社に関連するすべてのチケットの進捗状況を追跡

チケットポータル。

{assigneeName}さんがこちらに対応中です！

{assigneeName}さんがチケットを完了しました

{assigneeName}さんが近日中に対応する予定です

{assigneeName}さんが詳細情報を必要としています

あなたのチケットは完了しました