<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
<title>ブレークポイント | Qwerty.work</title>
<atom:link href="https://qwerty.work/blog2/archives/tag/%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88/feed" rel="self" type="application/rss+xml" />
<link>https://qwerty.work/blog2</link>
<description>パソコンに関することをいろいろメモしています。</description>
<lastBuildDate>Mon, 01 Jul 2024 01:14:46 +0000</lastBuildDate>
<language>ja</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=6.8.1</generator>
<image>
<url>https://qwerty.work/wp/wp-content/uploads/2022/11/cropped-favicon_QwertyWork-32x32.png</url>
<title>ブレークポイント | Qwerty.work</title>
<link>https://qwerty.work/blog2</link>
<width>32</width>
<height>32</height>
</image>
<item>
<title>【STUDIO】ブレークポイントの追加/削除/変更/調整</title>
<link>https://qwerty.work/blog2/archives/843</link>
<dc:creator><![CDATA[postmaster]]></dc:creator>
<pubDate>Fri, 28 Jun 2024 13:50:24 +0000</pubDate>
<category><![CDATA[STUDIO]]></category>
<category><![CDATA[WEB]]></category>
<category><![CDATA[カスタマイズ]]></category>
<category><![CDATA[ブレークポイント]]></category>
<category><![CDATA[ブレイクポイント]]></category>
<guid isPermaLink="false">https://qwerty.work/blog2/?p=843</guid>
<description><![CDATA[ノーコードでホームページ制作ができるSTUDIOで、表示デバイスの画面幅に合わせて表示する可変レイアウト（レスポンシブ）対応についてメモ。 様々なデバイスが世の中に溢れていて、それに対応するためのレスポンシブですが、「パ […]]]></description>
<content:encoded><![CDATA[
<p>ノーコードでホームページ制作ができる<a rel="nofollow noopener" href="https://studio.design/ja" target="_blank">STUDIO</a>で、表示デバイスの画面幅に合わせて表示する可変レイアウト（レスポンシブ）対応についてメモ。</p>
<p>様々なデバイスが世の中に溢れていて、それに対応するためのレスポンシブですが、「パソコン、タブレット、スマートホンの３つに対応すればヨシ」という訳にはいかないことが多々あります。特にパソコンとタブレットの間のMicrosoft Surface Proや、縦だとスマホ、横にするとタブレット表示になるiPhoneなど、ノーコードツールとはいえ、細部までこだわったサイトにしようと思うと、ディープな設定が必要になってきます。そのようなときにやってみたことを、ここにメモ。</p>
<div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
<div class="toc-content">
<ol class="toc-list open"><li><a href="#toc1" tabindex="0">STUDIO標準のブレイクポイントの追加/削除</a></li><li><a href="#toc2" tabindex="0">カスタムコードでCSSを書く方法もある</a></li><li><a href="#toc3" tabindex="0">Surface Pro 7+をタブレットのレイアウトに含めたい</a></li><li><a href="#toc4" tabindex="0">カスタムコードの例</a><ol><li><a href="#toc5" tabindex="0">Surface Pro 7+の縦向き対応</a></li></ol></li></ol>
</div>
</div>
<h2 class="wp-block-heading"><span id="toc1">STUDIO標準のブレイクポイントの追加/削除</span></h2>
<ul class="wp-block-list">
<li>標準 1280px以上（パソコン向け）</li>
<li>スモール 1140pxまで（小型ノート向け）</li>
<li>タブレット 840pxまで</li>
<li>モバイル 540pxまで（スマホ向け）</li>
<li>ミニ 320pxまで</li>
</ul>
<p>それぞれ、既定の幅を数値の入力か、マウスドラッグで変更が可能です。ただし、上記の5つのブレイクポイントの他に追加ができません。</p>
<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="302" src="https://qwerty.work/wp/wp-content/uploads/2024/07/No-00-1024x302.jpg" alt="STUDIOのブレイクポイントの編集の画面" class="wp-image-852" srcset="https://qwerty.work/wp/wp-content/uploads/2024/07/No-00-1024x302.jpg 1024w, https://qwerty.work/wp/wp-content/uploads/2024/07/No-00-300x88.jpg 300w, https://qwerty.work/wp/wp-content/uploads/2024/07/No-00-768x226.jpg 768w, https://qwerty.work/wp/wp-content/uploads/2024/07/No-00.jpg 1255w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
<a rel="noopener" href="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" title="カスタムブレイクポイント | STUDIO U" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://downloads.intercomcdn.com/i/o/206450/1fd76672af5a38b583b32066/f78e523aef93b8c63bc8995a2124ee43.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">カスタムブレイクポイント | STUDIO U</div><div class="blogcard-snippet external-blogcard-snippet">ブレイクポイントを追加したり、値を変更する方法</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=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" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">help.studio.design</div></div></div></div></a>
<h2 class="wp-block-heading"><span id="toc2">カスタムコードでCSSを書く方法もある</span></h2>
<p>標準のブレイクポイントの数以上にオリジナルで追加したい場合は、有料プランにあるカスタムコードに直接CSSを書くしかなさそうです。カスタムコードに書いたCSSはプレビューでは反映されません。更新ボタンで公開したサイトで反映されるので、テスト的に使う場合は一般の目に触れないように注意することが必要です。</p>
<p>ここに手を付けると、もはやノーコードではない気がしますが、コーディングして制作するよりも制作は随分楽です。</p>
<h2 class="wp-block-heading"><span id="toc3">Surface Pro 7+をタブレットのレイアウトに含めたい</span></h2>
<p>iPadはタブレットのブレイクポイントで作成しますが、タブレットに近いサイズのSurface Pro 7+はスモール（PC）として認識されます。これを縦向きにしても、ほぼタブレットサイズに近いのに、スモールまたは標準のブレークポイントで制作したサイトが表示されます。</p>
<p>その場合の対応として、</p>
<ul class="wp-block-list">
<li>タブレットのブレイクポイントを840ピクセルから<strong>912</strong>ピクセルに変更する</li>
<li>カスタムコードにCSSを書く</li>
</ul>
<p>このどちらかになるかと思います。</p>
<h2 class="wp-block-heading"><span id="toc4">カスタムコードの例</span></h2>
<h3 class="wp-block-heading"><span id="toc5">Surface Pro 7+の縦向き対応</span></h3>
<p>STUDIOのブレイクポイントを変更せず、タブレットのデフォルト幅840px以上である841px～1023pxの間で縦向きだった場合のカスタムコードで対応する例。</p>
<pre class="wp-block-preformatted"><style><br>@media screen and (min-width: 841px) and (max-width: 1023px) and (orientation: portrait) {<br> #対象のid .sd.appear {<br> ここにルールを書く<br> }<br>}<br></style></pre>
]]></content:encoded>
</item>
</channel>
</rss>