kivantium活動日記

プログラムを使っていろいろやります

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

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

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

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

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

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

まず、画像の中央をトリミングするCSSobject-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>

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

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

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

stackoverflow.com

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>

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

問題点としては、この方法を使うと画面幅が一定値より小さくなったときに1段組になってしまうことが挙げられます。

f:id:kivantium:20200416232259p:plain:w300
画面幅が狭いときのスクリーンショット

画面幅が小さいときでも強制的に並べることはできないのか?というissueはありましたが、回答がありませんでした。 github.com

解決したら更新します。

広告コーナー