Bulmaで画像の中央を丸く切り取って並べる

「Bootstrapを使って作ったWebサイトはいかにもBootstrapを使って作った感が出てしまうからやめたい」とWebのプロに相談したらBulmaを使うといいと言われたので、最近はBulmaを使っています。 bulma.io

画像の中央を丸く切り取って並べるデザインをする必要があったので、記録しておきます。

画像の中央を丸く切り取って並べるとは

Twitterのアイコン画像には正方形以外の画像を設定することもできます。その場合、画像の中心から画像の縦幅と横幅の小さい方を直径とする円で切り抜いた部分がアイコンとして表示されます。これをCSSで実現するにはどうすればいいかという話です。

Bulmaのコラム機能を使った例

まず、画像の中央をトリミングするCSSはobject-fitプロパティを使うと実現することができます。

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

切り抜くときにBulmaでfigureタグにis-squareを、imgタグにis-roundedを指定すると丸く切り抜くことができます。

横に並べるためにコラム機能を使いました。

Columns | Bulma: Free, open source, and modern CSS framework based on Flexbox

スマホの画面でも横並びにするために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>

f:id:kivantium:20200417095555p:plain — スクリーンショット

しかし、この方法では1列ごとに並べる数を決め打ちすることになるので、デスクトップでは6列だがスマートフォンでは4列にするようなレイアウトが実現できません。そういう機能はCSS Gridを使って実現できるらしいので今度やってみます。 www.webcreatorbox.com

（追記） 12の約数という制限はあるものの、is-multilineを指定すれば列数指定ができました。

stackoverflow.com

Bulmaのタイル機能を使った例

より複雑に並べたい場合はタイル機能を使います。

Tiles powered by Flexbox | Bulma: Free, open source, and modern CSS framework based on Flexbox

例を示します。

<!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>