【ギャラリー】画像を横スクロールさせたい

画像を大量に使用したギャラリーを作成中なのですが、多くの画像を横スクロールで見れるようにしたいと考えています。
画像はCSSで正方形にトリミングしてあり、クリックすることでlightgallery.jsを使い拡大やダウンロードできるようにしようと思います。
#表示方法
大量の画像の配置にはJavaScriptを利用し連番の画像を表示します。

JavaScript
1document.addEventListener("DOMContentLoaded", function() {
2for (i = 1; i <= 100; i++) { document.getElementById("lightgallery").insertAdjacentHTML('beforeend', '<a href="//placehold.jp/3e80e4/ffffff/500x300.png?text=' + i + '.jpg" class="gallery-img" download>' + '<img data-src="https://placehold.jp/3e80e4/ffffff/500x300.png?text=' + i + '.jpg">' + '</a>'); }
3}, false);
4```出力されるHTMLはこのようになる。
5```HTML
6<a href="//placehold.jp/3e80e4/ffffff/500x300.png?text=1.jpg" class="gallery-img" download>
7<img data-src="https://placehold.jp/3e80e4/ffffff/500x300.png?text=1.jpg" src="https://placehold.jp/3e80e4/ffffff/500x300.png?text=1.jpg">
8</a>

#トリミング方法
また、トリミングには以下のようなCSSを利用してトリミングしています。

CSS
1.gallery-img {
2  width: 120px;
3  height: 120px;
4  margin: 1px;
5  overflow: hidden;
6}
7.gallery-img img {
8  position: relative;
9  top: 50%;
10  left: 50%;
11  width: auto;
12  height: 100%;
13  -webkit-transform: translate(-50%, -50%);
14  transform: translate(-50%, -50%);
15}

#やってみたCSS

CSS
1main.lightgallery  {
2  margin: 0;
3  padding: 5px;
4  overflow:auto;
5}
6#lightgallery {
7  width: auto;
8  height: 100%;
9}

#目標
目標としては左下から123が表示され、さらに数が増えると横スクロールで見えるようにしたいのです。
また、縦の高さはブラウザに合うようにしたいため、数が決められません。

CSSのみで実装できれば良いのですが、無理ならjQueryに依存しないプラグインを使いたいと思うのですが。

行動規範の内容に同意します

回答1件

ベストアンサー

新たしめのブラウザのみですが、CSS3 Writing Modes を活用すれば可能です。（Firefox/Chromeで確認）

CSS
1.gallery-img {
2  width: 120px;
3  height: 120px;
4  margin: 1px;
5  overflow: hidden;
6  /* 以下追加 */
7  width: calc((100vh - 25px) / 3); /* -25pxはスクロールバーの分。スマートデバイスなら不要かも。 */
8  height: calc((100vh - 25px) / 3); /* width/heightともに「vh（画面高さ）」を基準にサイズを計算 */
9  float: right; /* 「下から」のため。「右上から1」の場合「left」 */
10  display: block;
11  position: relative;
12}
13.gallery-img img {
14  /*position: relative;*/
15  top: 50%;
16  left: 50%;
17  /*width: auto;
18  height: 100%;*/
19  -webkit-transform: translate(-50%, -50%);
20  transform: translate(-50%, -50%);
21  /* 以下追加 */
22  position: absolute;
23  width: 100%;
24}
25
26main.lightgallery  {
27  margin: 0;
28  padding: 5px;
29  overflow:auto;
30}
31#lightgallery {
32  /*width: auto;
33  height: 100%;*/
34  /* 以下追加 */
35  height: 100vh;
36  width: 100vw;
37  overflow: scroll;
38  writing-mode: vertical-rl; /* まだ多くのブラウザがベンダープレフィックスが必要かも */
39}
40
41/* 以下追加 */
42html, body { /* サンプル用 */
43    margin: 0;
44    padding: 0;
45}
46```**動くサンプル：**[https://jsfiddle.net/uy5891jv/](https://jsfiddle.net/uy5891jv/)
47
48---
49
50【writing-mode - CSS | MDN】
51[https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode](https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode)
52
53【CSS3 Writing Modesの仕様解説】
54[http://tategaki.github.io/commentaries/2015/11/09/commentary-writing-modes.html](http://tategaki.github.io/commentaries/2015/11/09/commentary-writing-modes.html)
55
56【writing-mode；縦書きの指定 - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋】
57[http://momdo.s35.xrea.com/web-html-test/CSS3-memo/writing-mode.html](http://momdo.s35.xrea.com/web-html-test/CSS3-memo/writing-mode.html)