2,710
回編集
編集の要約なし
編集の要約なし タグ: 手動差し戻し |
編集の要約なし |
||
| 2,027行目: | 2,027行目: | ||
} | } | ||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
外部画像ギャラリー | 外部画像ギャラリー | ||
| 2,045行目: | 2,044行目: | ||
} | } | ||
/* | |||
/* ========================================================= | |||
横スクロール部分 | |||
========================================================= */ | |||
.ts-gallery__track { | .ts-gallery__track { | ||
display: flex; | display: flex; | ||
gap: 12px; | gap: 12px; | ||
overflow-x: auto; | overflow-x: auto; | ||
overflow-y: hidden; | overflow-y: hidden; | ||
| 2,056行目: | 2,060行目: | ||
scroll-snap-type: x mandatory; | scroll-snap-type: x mandatory; | ||
scroll-behavior: smooth; | scroll-behavior: smooth; | ||
-webkit-overflow-scrolling: touch; | -webkit-overflow-scrolling: touch; | ||
overscroll-behavior-x: contain; | overscroll-behavior-x: contain; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
scrollbar-width: thin; | |||
} | |||
.ts-gallery__track::-webkit-scrollbar { | |||
height: 6px; | |||
} | |||
.ts-gallery__track::-webkit-scrollbar-thumb { | |||
background: #a2a9b1; | |||
border-radius: 10px; | |||
} | } | ||
/* 1枚ごとのカード */ | |||
/* ========================================================= | |||
1枚ごとのカード | |||
========================================================= */ | |||
.ts-gallery__item { | .ts-gallery__item { | ||
flex: 0 0 min( | flex: 0 0 min(480px, calc(100% - 72px)); | ||
scroll-snap-align: start; | scroll-snap-align: start; | ||
scroll-snap-stop: always; | scroll-snap-stop: always; | ||
min-width: 0; | min-width: 0; | ||
background: #fff; | background: #fff; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
border-radius: 4px; | border-radius: 4px; | ||
overflow: hidden; | overflow: hidden; | ||
box-sizing: border-box; | |||
} | } | ||
/* | |||
/* ========================================================= | |||
画像表示部分 | |||
========================================================= */ | |||
.ts-gallery__imagebox { | .ts-gallery__imagebox { | ||
display: flex; | display: flex; | ||
| 2,084行目: | 2,110行目: | ||
width: 100%; | width: 100%; | ||
/* | |||
* ここで全画像の縦サイズを統一 | |||
* PCでは最大340px程度 | |||
*/ | |||
height: clamp(280px, 32vw, 340px); | |||
background: #f8f9fa; | background: #f8f9fa; | ||
overflow: hidden; | |||
box-sizing: border-box; | |||
} | } | ||
/* | |||
* 元画像が縦長でも横長でも、 | |||
* 枠の中に収まるように縮小 | |||
*/ | |||
.ts-gallery__image { | .ts-gallery__image { | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
height: | height: 100%; | ||
object-fit: contain; | object-fit: contain; | ||
object-position: center; | |||
margin: 0; | |||
} | } | ||
/* キャプション */ | |||
/* ========================================================= | |||
キャプション | |||
========================================================= */ | |||
.ts-gallery__caption { | .ts-gallery__caption { | ||
padding: 8px 10px 10px; | padding: 8px 10px 10px; | ||
font-size: 12px; | font-size: 12px; | ||
line-height: 1.55; | line-height: 1.55; | ||
color: #202122; | color: #202122; | ||
} | } | ||
| 2,110行目: | 2,159行目: | ||
} | } | ||
/* 左右ボタン */ | |||
/* ========================================================= | |||
左右ボタン | |||
========================================================= */ | |||
.ts-gallery__nav { | .ts-gallery__nav { | ||
position: absolute; | position: absolute; | ||
| 2,156行目: | 2,209行目: | ||
} | } | ||
.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav { | .ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav { | ||
display: none; | display: none; | ||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
| 2,190行目: | 2,229行目: | ||
} | } | ||
/* | /* | ||
* 次の画像を少し見せる | |||
*/ | |||
.ts-gallery__item { | .ts-gallery__item { | ||
flex-basis: 88%; | flex-basis: 88%; | ||
} | } | ||
/* | |||
* スマホでは約230～270px | |||
*/ | |||
.ts-gallery__imagebox { | .ts-gallery__imagebox { | ||
height: clamp(230px, 65vw, 270px); | |||
} | } | ||
| 2,215行目: | 2,255行目: | ||
width: 34px; | width: 34px; | ||
height: 34px; | height: 34px; | ||
font-size: 24px; | font-size: 24px; | ||
line-height: 30px; | line-height: 30px; | ||