【重要】メイソンリーレイアウトの注意点

2020年01月02日

ブログカスタマイズ
2
iPhone

年末に書いた記事の中で紹介したメイソンリーレイアウトについて、気になる点を見つけたので忘備録を兼ねて記事にします。

主要ブラウザでの表示の違い

前回の記事の「実際に試してみる」という項目の中で、タイル風レイアウトとメイソンリーレイアウトを実際に記事の中で再現しました。

画像でもっと遊ぼう 3

Akiraさんのブログから「画像で遊ぼう」シリーズのタイル風レイアウトとメイソンリーレイアウトを紹介しましたが、残るもう一つはこちらの記事です。...

該当部分のメイソンリーレイアウトをPCで閲覧すると、ブラウザによって次のような表示になります。
ChromeFirefoxEdge

このようにChromeだけ、折り返すところが違っています。

実は、Chromeについては上の記事を書いている時にも、ちょっと気になる点がありました。

ChromeではPCでも2カラムで表示されることもある

facbook風の表示をスマホでの2カラムで下を揃えて見せるために、③④⑤の画像の縦サイズを調整していた際に、ピッタリ揃ったと思ったらPCでは次のようになっていました。
ChromeFirefoxEdge

これを見て、ちょうどピッタリになるとChromeでは2カラムで表示されるのかな?と思って微調整したものを記事の中に入れました。

ですから前回の記事の「実際に試してみる」の部分をスマホで閲覧すると、ほんの少しだけ2列目(右側の列)の方が下に伸びていますが、これはスマホで左列2枚と右列3枚のfacebook風に表示させるのが目的だったためで、スマホでの左右の列の画像の数を揃えて並べれば、もちろんピッタリ合わせる事も可能です。

MEMO

これが分かっていながら、記事の中で書かなかった点は申し訳ありませんでした。
シリーズの流れで早く投稿したいという功名心だけが先走って、重要な事をお伝えしていませんでした。

私はブログの作成にChromeを利用しているので、微調整してPCでは3カラムになっている点だけを確認して、FirefoxやEdge等の別ブラウザでの確認を怠っていました。

またChromeでの閲覧では、このメイソンリーレイアウトの中の③の画像だけが表示されるタイミングが遅れるのも気にはなっていました。

私のテンプレートにはLazyload(画像の遅延読み込み)が実装されていて、このブログでは画像が表示されるまではローディングスピナーを表示させるようにしているんですが、③の画像だけがずっとスピナーがクルクル回っている表示になってしまったので、この部分ではスピナーは除外しました。

この事に気がついてからいろいろ試してみましたが、画像を横幅いっぱいに表示させる事や画像の間にあるスペースの値を変えた事が原因ではなく、メイソンリーレイアウトとChromeの相性のようなものかも知れません。

Akiraさんのスタイルシートでも属性値の先頭にしばしば-webkit--moz-という文字列を見かけますが、これはベンダープレフィックスと言って各ブラウザでサポートされていない機能を実装するためのものですが、もしかしたらこのベンダープレフィックスを加えて解消する方法があるのかも知れません。

スマホでの表示は?

私は現在iPhoneXを使用しているのでメインブラウザはiOS版のSafariですが、iOSではブラウザによって表示が変わることはないので、もし違いがあっても検証できません。

もしAndroid版のChromeで閲覧して何か気になる点があれば、情報をお待ちしています。

まとめ

現在分かっているのは、以下の2点です。
  • メイソンリーレイアウトは、画像の組み合わせによってはChromeと他のブラウザでは折り返すところが変わってくる。
  • 同じく画像の組み合わせによって、ChromeではPCでも2カラムで表示される場合がある。

ですから、もし私の記事を読んで使ってみようと思っていただける人がいたら、くれぐれも上記の点にはご注意ください。

忘備録のための記事だったとは言えコメントでもお褒めの言葉をいただき嬉しかったのですが、今頃になって大事な点が抜けていることに気づき、読んでくれた方へのお詫びを兼ねて記事にしました。

今後はスマホだけでなく、各ブラウザでの表示も確認する必要があるかも知れません。

IEではどうなるんだよ?
何も書いてないじゃないか!

いや~、それは・・・
ちょっと事情があって

2 件のコメント

まだコメントはありません

さえき奎(けい)

2020/01/03 (Fri) 15:00

78:

すすむさん、明けましておめでとうございます。
「酒とソラの日々」のさえき奎と申します。
いつも私の拙いサイトへお越しいただきましてありがとうございます。
貴サイトを拝読させていただきましたが、大変勉強になります。
今後ともよろしくお願い申し上げます。

ススム

2020/01/03 (Fri) 15:24
ススム

79: To さえき奎(けい)さん

あけましておめでとうございます、コメントありがとうございます。

私のブログへの足跡から訪問させていただきましたが、それより前にお友達のブログへのコメントでお名前は印象に残っていました。

記事を読んでいただきありがとうございます。
でも今回のように失態を演じる事もありますので、その時はまたおおらかな気持ちで笑ってやってください (笑)

こちらこそよろしくお願いします。