tag:crieit.net,2005:https://crieit.net/tags/Bluma/feed
「Bluma」の記事 - Crieit
Crieitでタグ「Bluma」に投稿された最近の記事
2019-08-27T18:30:00+09:00
https://crieit.net/tags/Bluma/feed
tag:crieit.net,2005:PublicArticle/15356
2019-08-27T18:28:49+09:00
2019-08-27T18:30:00+09:00
https://crieit.net/posts/CSS-Bluma-Vuetify-Element-Bootstrap-etc
CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..)
<p>いま開発している<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読用の読書管理アプリ</a>では、CSSフレームワークに<a target="_blank" rel="nofollow noopener" href="https://bulma.io/">Bluma</a>を使ってる。<br />
昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(<em>´ω`</em>)</p>
<h2 id="ブレイクポイントのまとめ"><a href="#%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81">ブレイクポイントのまとめ</a></h2>
<div class="table-responsive"><table>
<thead>
<tr>
<th></th>
<th>xs</th>
<th>sm</th>
<th>md</th>
<th>lg</th>
<th>xl</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bluma</td>
<td>< 769</td>
<td>< 1024</td>
<td>< 1216</td>
<td>< 1408</td>
<td>1408</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>< 576</td>
<td>< 767</td>
<td>< 992</td>
<td>< 1200</td>
<td>1200</td>
</tr>
<tr>
<td>MaterialDesign</td>
<td>< 600</td>
<td>< 1024</td>
<td>< 1440</td>
<td>< 1920</td>
<td>1920</td>
</tr>
<tr>
<td>Vuetify</td>
<td>< 600</td>
<td>< 960</td>
<td>< 1264</td>
<td>< 1904</td>
<td>1904</td>
</tr>
<tr>
<td>Material-UI</td>
<td>< 600</td>
<td>< 960</td>
<td>< 1280</td>
<td>< 1920</td>
<td>1920</td>
</tr>
<tr>
<td>Element</td>
<td>< 768</td>
<td>< 992</td>
<td>< 1200</td>
<td>< 1920</td>
<td>1920</td>
</tr>
<tr>
<td>TwilwindCSS</td>
<td>< 640</td>
<td>< 768</td>
<td>< 1024</td>
<td>< 1280</td>
<td>1280</td>
</tr>
</tbody>
</table></div>
<p>だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(<em>´ω`</em>)<br />
ちなみに単位はpx。収まらなかったので省略...</p>
<h2 id="調べたのはこの7つ"><a href="#%E8%AA%BF%E3%81%B9%E3%81%9F%E3%81%AE%E3%81%AF%E3%81%93%E3%81%AE7%E3%81%A4">調べたのはこの7つ</a></h2>
<ol>
<li>Bluma ... <a target="_blank" rel="nofollow noopener" href="https://bulma.io/documentation/overview/responsiveness/">Responsiveness | Bulma</a></li>
<li>Bootstrap ... <a target="_blank" rel="nofollow noopener" href="https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints">Overview · Bootstrap</a></li>
<li>Material Design ... <a target="_blank" rel="nofollow noopener" href="https://material.io/design/layout/responsive-layout-grid.html#breakpoints">Responsive layout grid - Material Design</a></li>
<li>Vuetify ... <a target="_blank" rel="nofollow noopener" href="https://vuetifyjs.com/ja/customization/breakpoints">Breakpoints — Vuetify.js</a></li>
<li>Material-UI ... <a target="_blank" rel="nofollow noopener" href="https://material-ui.com/customization/breakpoints/#breakpoints">Breakpoints - Material-UI</a></li>
<li>Element ... <a target="_blank" rel="nofollow noopener" href="https://element.eleme.io/#/en-US/component/layout#responsive-layout">Component | Element</a></li>
<li>Twilwind CSS ... <a target="_blank" rel="nofollow noopener" href="https://tailwindcss.com/docs/breakpoints/#app">Breakpoints - Tailwind CSS</a></li>
</ol>
<p>Material DesingはCSSフレームワークではないけど参考として。</p>
<h3 id="Bluma"><a href="#Bluma">Bluma</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://bulma.io/documentation/overview/responsiveness/">Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox</a></p>
<p>まずは使っているBluma。<br />
Bluma独特なのが、コードがxsなどではなく、デバイスの種類になっている点。<br />
classに書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>mobile</td>
<td>Mobile</td>
<td>< 769px</td>
</tr>
<tr>
<td>tablet</td>
<td>Tablet</td>
<td>< 1024px</td>
</tr>
<tr>
<td>desktop</td>
<td>Desktop</td>
<td>< 1216px</td>
</tr>
<tr>
<td>widescreen</td>
<td>Widescreen</td>
<td>< 1408px</td>
</tr>
<tr>
<td>fullhd</td>
<td>FullHD</td>
<td>1408px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small (phones)
// Small devices (tabletS)
@media (min-width: 770px) { ... }
// Medium devices (desktops)
@media (min-width: 1024px) { ... }
// Large devices (widescreen desktops)
@media (min-width: 1216px) { ... }
// Extra large devices (fullhd desktops)
@media (min-width: 1408px) { ... }
</code></pre>
<h3 id="Bootstrap"><a href="#Bootstrap">Bootstrap</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints">Overview · Bootstrap</a></p>
<p>xsのブレイクポイントが一番小さいのが印象的。</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>xs</td>
<td>portrait phones</td>
<td>< 576px</td>
</tr>
<tr>
<td>sm</td>
<td>landscape phones</td>
<td>< 767px</td>
</tr>
<tr>
<td>md</td>
<td>tablets</td>
<td>< 992px</td>
</tr>
<tr>
<td>lg</td>
<td>desktops</td>
<td>< 1200px</td>
</tr>
<tr>
<td>xl</td>
<td>large desktops</td>
<td>1200px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small (portrait phones)
// Small devices (landscape phones)
@media (min-width: 576px) { ... }
// Medium devices (tablets)
@media (min-width: 768px) { ... }
// Large devices (desktops)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }
</code></pre>
<h3 id="Material Design"><a href="#Material+Design">Material Design</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://material.io/design/layout/responsive-layout-grid.html#breakpoints">Responsive layout grid - Material Design</a></p>
<p>ホントの分類はこんな感じ。<br />
縦向き・横向きでそれぞれ決められているので、かなり細かい。</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>xsmall</td>
<td>Portrait: small handset</td>
<td>< 360px</td>
</tr>
<tr>
<td>xsmall</td>
<td>Portrait: medium handset</td>
<td>< 400px</td>
</tr>
<tr>
<td>xsmall</td>
<td>Portrait: large handset</td>
<td>< 480px</td>
</tr>
<tr>
<td>xsmall</td>
<td>Portrait: large handsetLandscape: small handset</td>
<td>< 600px</td>
</tr>
<tr>
<td>small</td>
<td>Portrait: small tabletLandscape: medium handset</td>
<td>< 720px</td>
</tr>
<tr>
<td>small</td>
<td>Portrait: large tabletLandscape: large handset</td>
<td>< 840px</td>
</tr>
<tr>
<td>small</td>
<td>Portrait: large tabletLandscape: large handset</td>
<td>< 960px</td>
</tr>
<tr>
<td>small</td>
<td>Landscape: small tablet</td>
<td>< 1024px</td>
</tr>
<tr>
<td>medium</td>
<td>Landscape: large tablet</td>
<td>< 1280px</td>
</tr>
<tr>
<td>medium</td>
<td>Landscape: large tablet</td>
<td>< 1440px</td>
</tr>
<tr>
<td>large</td>
<td></td>
<td>< 1600px</td>
</tr>
<tr>
<td>large</td>
<td></td>
<td>< 1920px</td>
</tr>
<tr>
<td>xlarge</td>
<td></td>
<td>1920px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small (phones)
// Small devices (portrait tablets)
@media (min-width: 600px) { ... }
// Medium devices (landscape tablets)
@media (min-width: 1024px) { ... }
// Large devices (laptops)
@media (min-width: 1440px) { ... }
// Extra large devices (desktops)
@media (min-width: 1920px) { ... }
</code></pre>
<h3 id="Vuetify"><a href="#Vuetify">Vuetify</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://vuetifyjs.com/ja/customization/breakpoints">Breakpoints — Vuetify.js</a></p>
<p>Material Designを実現するためのCSSフレームワークなので、<br />
Material Designと区分けが近いが、少し異なるので注意が必要かも?</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>xs</td>
<td>small to large handset</td>
<td>< 600px</td>
</tr>
<tr>
<td>sm</td>
<td>small to medium tablet</td>
<td>< 960px</td>
</tr>
<tr>
<td>md</td>
<td>large tablet to laptop</td>
<td>< 1264px</td>
</tr>
<tr>
<td>lg</td>
<td>desktop</td>
<td>< 1904px</td>
</tr>
<tr>
<td>xl</td>
<td>4k and ultra-wides</td>
<td>1904px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small (small to large handset)
// Small devices (small to medium tablet)
@media (min-width: 600px) { ... }
// Medium devices (large tablet to laptop)
@media (min-width: 960px) { ... }
// Large devices (desktop)
@media (min-width: 1264px) { ... }
// Extra large devices (4k and ultra-wides)
@media (min-width: 1904px) { ... }
</code></pre>
<h3 id="Material-UI"><a href="#Material-UI">Material-UI</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://material-ui.com/customization/breakpoints/#breakpoints">Breakpoints - Material-UI</a></p>
<p>こちらもMaterial Designを実現するためのCSSフレームワーク。<br />
ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>xs</td>
<td>extra-small</td>
<td>< 600px</td>
</tr>
<tr>
<td>sm</td>
<td>small</td>
<td>< 960px</td>
</tr>
<tr>
<td>md</td>
<td>medium</td>
<td>< 1280px</td>
</tr>
<tr>
<td>lg</td>
<td>large</td>
<td>< 1920px</td>
</tr>
<tr>
<td>xl</td>
<td>extra-large</td>
<td>1920px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small
// Small devices
@media (min-width: 600px) { ... }
// Medium devices
@media (min-width: 960px) { ... }
// Large devices
@media (min-width: 1280px) { ... }
// Extra large devices
@media (min-width: 1920px) { ... }
</code></pre>
<h3 id="Element UI"><a href="#Element+UI">Element UI</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://element.eleme.io/#/en-US/component/layout#responsive-layout">Component | Element</a></p>
<p>こちらもMaterial-UIと同様に、あまり説明はない。<br />
smやmdの値が少し独自な感じ。</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>xs</td>
<td>extra small viewports</td>
<td>< 768px</td>
</tr>
<tr>
<td>sm</td>
<td>small viewports</td>
<td>< 992px</td>
</tr>
<tr>
<td>md</td>
<td>medium viewports</td>
<td>< 1200px</td>
</tr>
<tr>
<td>lg</td>
<td>large viewports</td>
<td>< 1920px</td>
</tr>
<tr>
<td>xl</td>
<td>extra large viewports</td>
<td>1920px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small
// Small devices
@media (min-width: 768px) { ... }
// Medium devices
@media (min-width: 992px) { ... }
// Large devices
@media (min-width: 1200px) { ... }
// Extra large devices
@media (min-width: 1920px) { ... }
</code></pre>
<h3 id="Tailwind CSS"><a href="#Tailwind+CSS">Tailwind CSS</a></h3>
<p>参照元: <a target="_blank" rel="nofollow noopener" href="https://tailwindcss.com/docs/breakpoints/#app">Breakpoints - Tailwind CSS</a></p>
<p>他と比べ、全体的に低めな値が印象的。</p>
<div class="table-responsive"><table>
<thead>
<tr>
<th>コード</th>
<th>説明</th>
<th>範囲</th>
</tr>
</thead>
<tbody>
<tr>
<td>xs</td>
<td>phones</td>
<td>< 640px</td>
</tr>
<tr>
<td>sm</td>
<td>tablet</td>
<td>< 768px</td>
</tr>
<tr>
<td>md</td>
<td></td>
<td>< 1024px</td>
</tr>
<tr>
<td>lg</td>
<td>laptop</td>
<td>< 1280px</td>
</tr>
<tr>
<td>xl</td>
<td>desktop</td>
<td>1280px</td>
</tr>
</tbody>
</table></div>
<pre><code class="css">// Extra Small
// Small devices
@media (min-width: 640px) { ... }
// Medium devices
@media (min-width: 768px) { ... }
// Large devices
@media (min-width: 1024px) { ... }
// Extra large devices
@media (min-width: 1280px) { ... }
</code></pre>
<h2 id="おわりに"><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">おわりに</a></h2>
<p>いろんなフレームワークを横串で見ていくといろいろおもしろい。<br />
個別の対応をどこまで考えないといけないかなども見えてくるかも。<br />
実際にBlumaを使ってるけど、xs以下のサイズは、個別でブレイクポイントを設定したりなども。</p>
<p>新しいものを使うときはいろいろ見ないといけない(<em>´ω`</em>)</p>
<h2 id="こんなのつくってます。"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%E3%80%82">こんなのつくってます。</a></h2>
<p>最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました!<br />
<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!<br />
CSSフレームワークにBlumaを使ってます(<em>´ω`</em>)</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="25%"/></p>
<p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ</p>
<p>要望・感想・アドバイスなどあれば、<br />
公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで。</p>
きらぷか@積読ハウマッチ/SSSAPIなど