「Bootstrapを使って作ったWebサイトはいかにもBootstrapを使って作った感が出てしまうからやめたい」とWebのプロに相談したらBulmaを使うといいと言われたので、最近はBulmaを使っています。 bulma.io
画像の中央を丸く切り取って並べるデザインをする必要があったので、記録しておきます。
画像の中央を丸く切り取って並べるとは
Twitterのアイコン画像には正方形以外の画像を設定することもできます。その場合、画像の中心から画像の縦幅と横幅の小さい方を直径とする円で切り抜いた部分がアイコンとして表示されます。 これをCSSで実現するにはどうすればいいかという話です。
Bulmaのコラム機能を使った例
まず、画像の中央をトリミングするCSSはobject-fit
プロパティを使うと実現することができます。
切り抜くときにBulmaでfigure
タグにis-square
を、img
タグにis-rounded
を指定すると丸く切り抜くことができます。
横に並べるためにコラム機能を使いました。
スマホの画面でも横並びにするためにis-mobile
を指定するのがポイントでした。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>example</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <style>img { object-fit: cover; }</style> </head> <body> <section class="section"> <div class="container"> <h2 class="title">images</h2> <div class="columns is-mobile"> <div class="column is-4"> <figure class="image is-square"> <img class="is-rounded" alt="スーパー日本人のイラスト" src="image1.png"> </figure> </div> <div class="column is-4"> <figure class="image is-square"> <img class="is-rounded" alt="AIに支配される人達のイラスト" src="image2.png"> </figure> </div> <div class="column is-4"> <figure class="image is-square"> <img class="is-rounded" alt="研究が上手く行かない人のイラスト" src="image3.png"> </figure> </div> </div> </div> </section> </body> </html>
しかし、この方法では1列ごとに並べる数を決め打ちすることになるので、デスクトップでは6列だがスマートフォンでは4列にするようなレイアウトが実現できません。 そういう機能はCSS Gridを使って実現できるらしいので今度やってみます。 www.webcreatorbox.com
(追記)
12の約数という制限はあるものの、is-multiline
を指定すれば列数指定ができました。
Bulmaのタイル機能を使った例
より複雑に並べたい場合はタイル機能を使います。
例を示します。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>example</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <style>img { object-fit: cover; }</style> </head> <body> <section class="section"> <div class="container"> <h2 class="title">images</h2> <div class="tile is-ancestor"> <div class="tile is-parent"> <article class="tile is-4 is-child box"> <figure class="image is-square"> <img class="is-rounded" alt="スーパー日本人のイラスト" src="image1.png"> </figure> <p class="subtitle">image 1</p> </article> <article class="tile is-4 is-child box"> <figure class="image is-square"> <img class="is-rounded" alt="AIに支配される人達のイラスト" src="image2.png"> </figure> <p class="subtitle">image 2</p> </article> <article class="tile is-4 is-child box"> <figure class="image is-square"> <img class="is-rounded" alt="研究が上手く行かない人のイラスト" src="image3.png"> </figure> <p class="subtitle">image 3</p> </article> </div> </div> </div> </section> </body> </html>
問題点としては、この方法を使うと画面幅が一定値より小さくなったときに1段組になってしまうことが挙げられます。
画面幅が小さいときでも強制的に並べることはできないのか?というissueはありましたが、回答がありませんでした。 github.com
解決したら更新します。