【STUDIO】ブレークポイントの追加/削除/変更/調整

Fri, 28 Jun 2024 00:00:00 +0000

ノーコードでホームページ制作ができるSTUDIOで、表示デバイスの画面幅に合わせて表示する可変レイアウト（レスポンシブ）対応についてメモ。

様々なデバイスが世の中に溢れていて、それに対応するためのレスポンシブですが、「パソコン、タブレット、スマートホンの３つに対応すればヨシ」という訳にはいかないことが多々あります。特にパソコンとタブレットの間のMicrosoft Surface Proや、縦だとスマホ、横にするとタブレット表示になるiPhoneなど、ノーコードツールとはいえ、細部までこだわったサイトにしようと思うと、ディープな設定が必要になってきます。そのようなときにやってみたことを、ここにメモ。

STUDIO標準のブレイクポイントの追加/削除

標準　1280px以上（パソコン向け）
スモール　1140pxまで（小型ノート向け）
タブレット　840pxまで
モバイル　540pxまで（スマホ向け）
ミニ　320pxまで

それぞれ、既定の幅を数値の入力か、マウスドラッグで変更が可能です。ただし、上記の5つのブレイクポイントの他に追加ができません。

https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88 https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88

カスタムコードでCSSを書く方法もある

標準のブレイクポイントの数以上にオリジナルで追加したい場合は、有料プランにあるカスタムコードに直接CSSを書くしかなさそうです。カスタムコードに書いたCSSはプレビューでは反映されません。更新ボタンで公開したサイトで反映されるので、テスト的に使う場合は一般の目に触れないように注意することが必要です。

ここに手を付けると、もはやノーコードではない気がしますが、コーディングして制作するよりも制作は随分楽です。

Surface Pro 7+をタブレットのレイアウトに含めたい

iPadはタブレットのブレイクポイントで作成しますが、タブレットに近いサイズのSurface Pro 7+はスモール（PC）として認識されます。これを縦向きにしても、ほぼタブレットサイズに近いのに、スモールまたは標準のブレークポイントで制作したサイトが表示されます。

その場合の対応として、

タブレットのブレイクポイントを840ピクセルから912ピクセルに変更する
カスタムコードにCSSを書く

このどちらかになるかと思います。

カスタムコードの例

Surface Pro 7+の縦向き対応

STUDIOのブレイクポイントを変更せず、タブレットのデフォルト幅840px以上である841px～1023pxの間で縦向きだった場合のカスタムコードで対応する例。

<style>@media screen and (min-width: 841px) and (max-width: 1023px) and (orientation: portrait) {   #対象のid .sd.appear {       ここにルールを書く   }}</style>

レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値

Sat, 27 Nov 2021 15:36:37 +0900

レスポンシブサイト制作で気になるサイズ

レスポンシブサイトの背景に動画を埋め込む際に、ＰＣで表示する場合とスマートフォンで表示する場合で、どの解像度で動画を用意すればいいかを考える際に必要な参考値をメモ。

ブレークポイント

CSSフレームワークを使った場合の画面横幅の参考。単位はピクセル。

Bootstrap

Extra extra large（xxl）: 1400以上
Extra large（xl）: 1200以上
Large （lg）: 992以上
Medium（md）: 768以上
Small（sm）: 576以上
Extra small（xs）: 576未満

Pure CSS

Extra large（xl）: 1280以上
Large （lg）: 1024以上
Medium（md）: 768以上
Small（sm）: 568以上

参考ページ

https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options

https://purecss.io/grids/ https://purecss.io/grids/

動画の解像度

アスペクト比 16:9 の解像度。単位はピクセル。

4320p: 7680×4320（8K）
2160p: 3840×2160（4K）
1440p: 2560×1440（2K）
1080p: 1920×1080（フルHD）
720p: 1280×720（HD）
480p: 854×480
360p: 640×360（SD）
240p: 426×240

参考ページ

https://support.google.com/youtube/answer/6375112 https://support.google.com/youtube/answer/6375112

ブレークポイント on qwerty.work

【STUDIO】ブレークポイントの追加/削除/変更/調整

STUDIO標準のブレイクポイントの追加/削除

カスタムコードでCSSを書く方法もある

Surface Pro 7+をタブレットのレイアウトに含めたい

カスタムコードの例

Surface Pro 7+の縦向き対応

レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値

レスポンシブサイト制作で気になるサイズ

ブレークポイント

Bootstrap

Pure CSS

参考ページ

動画の解像度

参考ページ