レスポンシブデザイン

サイトは、どの画面でも見やすく表示されることが大切です。エディターでは、スマートフォン、タブレット、デスクトップの幅でページを確認し、画面サイズごとに要素のスタイルを変えられます。

ほかの画面幅で確認する

幅のメニュー（パスバーの左にあるデバイスアイコン）をクリックして、幅を選びます。キャンバスのサイズが変わり、その画面でページがどう表示されるかを確認できます。

文字を入力していないときは、D でデスクトップ、T でタブレット（768px）、M でモバイル（375px）に切り替えることもできます。

幅を変えてもスタイルは変わりません。キャンバスのサイズだけが変わります。

スタイルに画面サイズの接頭辞を付けると、その幅以上の画面にだけ適用できます。

たとえば、text-2xl md:text-4xl を指定すると、見出しの文字はスマートフォンでは小さく、タブレット以上では大きく表示されます。

追加するには、要素を選択して、編集パネルの 詳細設定 セクションを開きます。クラスを入力して Enter を押してください フィールドにクラスを入力し、Enter を押します。その後、幅を切り替えて結果を確認します。

言葉で指示することもできます。要素を選択し、⌘K / Ctrl+K を押して、「モバイルでは非表示にする」や「モバイルでは縦に並べる」などと入力します。AI で編集をご覧ください。

hidden を追加すると、すべての画面で要素が非表示になります。次に、ブレークポイントのクラスを追加すると、その幅以上で表示できます。