画像でもっと遊ぼう 5

2020年01月16日

ブログカスタマイズ
25

前回までfacebookでの画像グループの表示スタイルの再現を試みて、タイル風はイメージ通りに行きましたが、メイソンリーレイアウトの応用ではブラウザによって表示が変わっていました。

画像でもっと遊ぼう 4

前回メイソンリーレイアウトでは、Chromeでの表示に注意点がある事も記事にしました。...

その後で自分なりに調べた結果、別の方法でイメージ通りに表示出来るようになったので、再び忘備録を兼ねて記事にします。

タイル風はフレックスボックスと呼ばれ、コンテナに display: flex; という指定があり、上の段を左から右で下の段という順に表示されるのに対し、メイソンリーはブレイクポイントを設定してPCとスマホの画面の特徴に合わせて表示を変化させ、左カラムの上から下で右のカラムという順でした。

そして今回やってみて上手く行ったのはグリッドレイアウトと呼ばれるスタイルで、こちらはコンテナに display: grid; という指定があります。

3枚の画像をグリッドレイアウトで表示

パターン 1

まず、左カラムが1枚で右カラムが2枚のレイアウトでは、Chromeだけが折り返すところが違っていて残念な結果になりましたが、グリッドレイアウトでの主要ブラウザの表示結果は同じになりました。

ChromeFirefoxEdge

実際の表示はDEMOをクリックするとご覧いただけます。

パターン 2

左が2枚で右が1枚のレイアウトでは、ブラウザによって下に余分なスペースが発生していましたが、この点もグリッドレイアウトでは解消されました。

ChromeFirefoxEdge

DEMOでは画像のhtmlコードを①③②の順に書くことで、自然な並び方にしています。

5枚の画像をグリッドレイアウトで表示

左が2枚で右が3枚の画像グループ表示でも、Chromeだけが折り返すところが違っていましたが、グリッドレイアウトでは同じように表示されます。

htmlコードでは画像を①③④②⑤の順に書いてあるのと、PCでは縦に長くなります。

まとめ

前回の記事ではメイソンリーレイアウトの注意点と書きましたが、元々使用する目的が違うために発生したことであり、今にして思えばメイソンリーレイアウトの長所を無視した試みでした。

MEMO

メイソンリーレイアウトのカスタマイズを紹介してくれたAkiraさんも、まさかあんな使い方をされるとは予想も出来なかったと思います (爆)

だったら、最初からグリッドレイアウトでやれば良かったじゃないか

ううっ、知らなかったんだよ・・・

25 件のコメント

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

よつば

2020/01/17 (Fri) 17:10

114: 勉強になります

ススムさん こんばんは

グリッドレイアウトですか~これも楽しい表示の仕方ですね
HTML/CSSもコピペで使えるなら使ってみたいけど...
自分で調べながら試すのは時間がかかるから避けちゃうかなぁ(;^_^A

ススム

2020/01/17 (Fri) 22:22
ススム

115: To よつばさん

こんばんは、コメントありがとうございます。

facebook風にグループ表示させたいと思って、いろいろ調べました。
あくまでも自分用の忘備録なのと、自己流のコードを書くのも恥ずかしいです (笑)

よつばさんのテンプレートは2カラムなので、ここにある5枚のレイアウトがPCでも映えると思います。

そふぃあ

2020/01/18 (Sat) 08:03

116: こんにちは

いつも勉強になります。
実は私も昨日記事を拝見して、よつばさんと同じことを思って帰りました。
良い方法も、私のような素人では、ソースコードが無いと使えないな…と。
自分でコードが書けるなんて凄いです。

ススム

2020/01/18 (Sat) 10:42
ススム

117: To そふぃあさん

おはようございます、コメントありがとうございます。
決して出し惜しみする意図はなく、あまりにもグチャグチャなコードで笑い者になるのが目に見えますので (爆)

それに投稿してからも、何度か修正しています (笑)

-

2020/01/18 (Sat) 11:05

118: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/01/18 (Sat) 15:01
ススム

119: To 非公開コメントさん

こんにちは。
はい、記事も拝見しました。
気に入っていただければ、何よりです。

-

2020/01/18 (Sat) 21:57

120: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/01/19 (Sun) 07:10
ススム

121: To 非公開コメントさん

いえいえ、今後もより一層ブログを楽しみましょう。

-

2020/01/19 (Sun) 09:15

122: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/01/19 (Sun) 11:12
ススム

123: To 非公開コメントさん

こんにちは、ご報告ありがとうございます。
ただいま記事を拝見しました。

絶妙なバランスですね。
こちらこそ、参考にさせていただきます。

-

2020/02/03 (Mon) 15:06

132: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/02/03 (Mon) 23:38
ススム

133: To 非公開コメントさん

こんばんは、コメントありがとうございます。

返信は、そちらの方に伺います。

-

2020/02/04 (Tue) 21:54

134: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/02/05 (Wed) 01:24
ススム

135: To 非公開コメントさん

こんばんは。
先ほど、そちらに返信しました。

-

2020/02/05 (Wed) 17:21

136: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/02/05 (Wed) 18:33
ススム

137: To 非公開コメントさん

こんにちは、そちらに返信しました。

-

2020/02/05 (Wed) 23:43

138: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

bon

2020/07/22 (Wed) 23:23

179:

ススムさん
お元気ですか?
ススムさんの画像でもっと遊ぼうシリーズを参考に、
タイル状レイアウト+luminous+スマホで横幅いっぱい
を実現することができました。
ススムさんのブログがヒントになりました。ありがとうございました。
display: grid にも興味があるので、今後いろいろやってみます。

ススム

2020/07/24 (Fri) 21:27
ススム

181: To bonさん

こんばんはbonさん、コメントありがとうございます。
もし、私の記事が参考になったのなら良かったです。
疲れない程度に、いろいろお楽しみください (笑)

bon

2020/08/01 (Sat) 12:55

185:

ススムさん
こんにちは。
今日は、もし可能であれば何かアドバイスをいただきたくお邪魔しました。

ススムさんの記事を参考に、グリッドレイアウトを勉強してみました。
まずは方眼紙に絵を描き(そこからです笑)思い描いた通りにグリッド表示させることに苦労しましたが、それが終わったら次に「スマホで横幅いっぱい」の適用、次にLuminous…と完成間近まできてつまづきました。
Luminousのコードを加えると、画像に別の作用が効いてしまうようで崩れてしまいます(T_T)

テスト記事はこちらです。
https://bon3te.fc2.net/blog-entry-126.html

目次1
.gridbox6 Luminousあり(試しに画像一つだけ)

ですが、画像6つ入りグリッドボックスのうち1つの画像にLuminousを適用しています。拡大アイコンがついている画像がそれです。Luminousを適用するとグリッドボックスにフィットしなくなり(object-fit: cover;が効かなくなる?)、グリッドボックス全体もなんだか縦長になってしまいます。というか、横幅はブラウザ幅に合わせて伸縮するのに、縦幅が元の比率を保ってくれないという感じです。自分の思いつく範囲で修正を試みましたが、どれも的外れで、どこをどのように変更すべきなのか見当がつきません。

目次2、目次3はLuminousを使用しておらず、思い描いた通りになっており、問題はないかと思うのですが…
一度はもうこれでいいかな(Luminousを使わない方針で)と思ったのですが…途中であきらめずやっぱりLuminousを併用したいと思い、不躾ながらススムさんのブログへ質問に来ました。

Luminousと「画像横幅いっぱい」のCSSはスタイルシートに入れていますが、今回のグリッドボックス用CSSはスクリプトで記事の一番下に入れています。

もしお気づきの点がありましたらヒントでも構いませんので何か助言をいただけないでしょうか。お忙しいところ申し訳ありませんが、よろしくお願い致します。

ススム

2020/08/01 (Sat) 22:19
ススム

186: To bonさん

こんばんは、ご質問にあるbonさんの記事も拝見しました。
私がこのグリッドレイアウトを紹介したきっかけは、facebookの画像の表示を再現することが目的でした。

元々グリッドレイアウトは、画像よりもテンプレートのトップページなどで、コンテンツの並べ方の規則を定義するために使用されることが多いような気がします。

記事を拝見してまず気になったのは、Luminousありの画像で真ん中に空白スペースが発生している点ですね。
なぜ1枚だけLuminousを適用したのか分かりませんが、この画像だけは見切れがないので列の横幅に合わせて縮小したため、本来はないはずの空白が発生しています。
「Luminousを適用すると~」と言うよりは、1枚だけ適用したことが原因かも知れません。

記事で使用されている画像は2種類で、チョコレートを開封した画像は横長で、スケールに乗っている画像は縦長ですね。
グリッドレイアウトでの並べ方には、コツというほどではありませんが、bonさんの記事で3枚のレイアウトのように、横長x2枚の列と縦長x1枚の列や、横長x3枚の列と縦長x2枚などのバランスを考えた方が見栄えが良いと思います。(facebook風にする場合)

グリッドレイアウトでは画像の見切れが発生するので、個人的にはLuminousと併用する方がベターなのと、あまり多くの画像を並べるのには向かないと思います。

ソースの内容は、時間のある時に自分自身の復習を兼ねてチェックして、何か気がついたらお知らせします。
---
bonさんの記事にあるクリックで拡大を知らせる方法は、とてもいいですね。
ホバーで表示される方法だと、スマホでは気が付かないこともありますからね。

bon

2020/08/02 (Sun) 14:46

187:

(コメントの名前リンクを、グリッドレイアウトのテスト記事にしています)
ススムさん、こんにちは。お返事ありがとうございます。

私もグリッドレイアウトについては、「これは画像配置のためというよりは、コンテンツをどう配置するかが主な用途なんだな」と思いました。それをススムさんが柔軟な発想でFB風にアレンジされ、それを見た私が真似としているという流れでしょうか(^^;)
ただ、私はFacebookは使っておらず見ることもほとんどないため、私としては画像コラージュに使えそうという感じでした。
私は過去ブログでは、写真加工ソフトのコラージュ機能で画像を組み合わせてアップしておりました。

極端な例ですが使用例です
https://bon3te.blog.fc2.com/blog-entry-1849.html

私の使っている写真加工ソフトのコラージュ機能を解説されているブログです
https://pc.paso-cafe.com/know-how/photoscape/collage-1/

ただし、このコラージュでは当然、ひとつひとつの画像を拡大して表示させることはできませんし、画像間の余白はテンプレートの背景色と合わせなければなりませんでした。つまり画像間の余白を白に指定してしまうと、いつかテンプレート背景色を変えた時でも余白だけは白のままになってしまうのです。

そこで最近は、htmlやCSSをお勉強し始めた流れで、画像をまとめて小さくアップする場合はAkiraさんのブログで知った
display: flex;
をよく使わせてもらっています。
こちらの記事
https://vanillaice000.blog.fc2.com/blog-entry-952.html
の、目次
6-3 div要素でimg要素を包含【おすすめ】
です。パーセンテージを変えて3つの画像を横並びにしたり、重ねて使用して「はてな風タイル」のように運用が可能です。ただ、画像の大きさを揃えるためには表示%の調整が必要となります。

また最近はススムさんに触発され「はてな風タイルに並べる」も導入することができました。
しかし、縦長と横長の画像が混在した時にこれまでの知識ではうまく配置するのは難しい…そこでススムさんのこの記事のdisplay: grid;に取り組むことにしたのでした。

テスト記事には縦長、横長画像をなにも考えずに並べてしまいましたので、お見苦しくて申し訳ありません。今後ちゃんとした記事にする場合にはもちろん縦横比を考えて配置するつもりです(^^)

Lumunousを画像一枚だけに適用していたのは特に意味はなかったのですが、なるほど、と思って全部をLuminousで拡大するようにしてみました(ペタペタとコードをペーストしたの同じ画像が拡大します)。
すると、全部の画像が見切れ無しで、それぞれ縦横の小さいほうに合わせて縮小して表示されました!
なかなか一筋縄ではいきまませんね~(^^;)
ススムさんはこの記事で正しく表示させておられますし、それを真似したら良いだけなのでコードを見せていただいたのですが、それでもよくわかりませんでした…
Akiraさんもススムさんもすごすぎです。

あくまで初心者の私の頭で考えるには、Luminousのコードの何かとバッティングしているのかと思いますが、それがどれなのかさっぱりです。
「クリックで拡大を知らせる」コードをごっそり省いてみても変わりませんでした。
「画像横幅いっぱい」をやめてみても変わりませんでした。

急いでいませんので、もしまたご覧いただくことができ、何かお気づきの点がありましたらよろしくお願いします!
ススムさんのブログに質問してよいものか悩みましたが、ただ、コードを見てあれこれするのは大変に骨の折れることと思いますので、ちょっとわからない、と言っていただいてもかまいません。相談に乗ってもらって、本当にありがとうございます。
-------
クリックで拡大を知らせる方法は、Akiraさんに質問した時にやままちさんという方が教えてくださったこちらを参考にしました。
https://web-roku.com/luminous#i-6

最近は私のブログ読者さんも7~8割スマホのようで、私はほとんどの画像を「拡大しない」ように掲載していますので、その中に拡大する画像があってもわかりづらいですよね。毎回「この画像は拡大します」と書くよりは、画像にアイコンがあれば視覚効果で誰でも一目瞭然なのが良いと思いました。ただ、画像をいくつも並べて全部にアイコンがつくのはちょっとやかましい感じがしますが、ぱっと見で判別できる点を優先しました。そう言っていただけて嬉しいです^^

bon

2020/08/07 (Fri) 20:19

188:

ススムさん
こんばんは。
グリッドレイアウトですが、私には難しすぎました^^;
何かあったら教えて下さいとお願いしていましたが、無かったことにしてください。勝手言ってすみません。
他所様のお手を煩わせてまですることじゃないと思いましたし、自力でできるくらい鍛錬してから再挑戦しようと思います。
ススムさんのブログは楽しみにしていますから、これからもよろしくお願いします(^^)

ススム

2020/08/07 (Fri) 23:32
ススム

189: To bonさん

こんばんは。
グリッドレイアウトに関して、中途半端に返信したままになってしまった事をお詫びします。
お盆休みを利用して、bonさんや自分の過去記事をチェックするつもりでしたが、結果的に放置してしまっていました。

グリッドレイアウトに関しては、実際に使用している記事をご覧いただいた方が、この記事よりも参考になるかも知れません。
https://lifeisfantastic.blog.fc2.com/blog-entry-39.html
https://lifeisfantastic.blog.fc2.com/blog-entry-41.html
https://lifeisfantastic.blog.fc2.com/blog-entry-42.html
https://lifeisfantastic.blog.fc2.com/blog-entry-43.html

こちらこそ、今後ともよろしくお願いします。

bon

2020/08/08 (Sat) 10:52

190: To ススムさん

こんにちは。何をおっしゃいますか、ススムさんの優しさに甘えてしまい、あつかましいお願いをしたのはこちらです。
新しいことにチャレンジするのは楽しいのですが、自力でできるようにならなければ。
他人様の貴重なお時間をいただいてまですることではないと思いましたm(__)m

ススムさんの記事を見せていただきましたが、場面によってグリッド位置を指定されているんですよね。
頭が柔らかいな~と、すごいな~と思いソースを眺めていました。参考にさせていただきます。記事をあげてくださりありがとうございました。