2,719
回編集
編集の要約なし
編集の要約なし |
編集の要約なし |
||
| 2,025行目: | 2,025行目: | ||
align-items: flex-start; | align-items: flex-start; | ||
padding: 10px 12px; | padding: 10px 12px; | ||
} | |||
} | |||
/* ========================================================= | |||
外部画像ギャラリー | |||
========================================================= */ | |||
.ts-gallery { | |||
position: relative; | |||
margin: 1em 0 1.5em; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
.ts-gallery__title { | |||
margin: 0 0 0.55em; | |||
font-size: 1.05em; | |||
font-weight: 700; | |||
} | |||
/* 横方向のスライド領域 */ | |||
.ts-gallery__track { | |||
display: flex; | |||
gap: 12px; | |||
overflow-x: auto; | |||
overflow-y: hidden; | |||
padding: 4px 48px 12px 2px; | |||
scroll-snap-type: x mandatory; | |||
scroll-behavior: smooth; | |||
-webkit-overflow-scrolling: touch; | |||
overscroll-behavior-x: contain; | |||
box-sizing: border-box; | |||
} | |||
/* 1枚ごとのカード */ | |||
.ts-gallery__item { | |||
flex: 0 0 min(520px, calc(100% - 72px)); | |||
scroll-snap-align: start; | |||
scroll-snap-stop: always; | |||
min-width: 0; | |||
box-sizing: border-box; | |||
background: #fff; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
overflow: hidden; | |||
} | |||
/* 画像部分 */ | |||
.ts-gallery__imagebox { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
min-height: 260px; | |||
background: #f8f9fa; | |||
} | |||
.ts-gallery__image { | |||
display: block; | |||
width: 100%; | |||
height: auto; | |||
max-height: 600px; | |||
object-fit: contain; | |||
} | |||
/* キャプション */ | |||
.ts-gallery__caption { | |||
padding: 8px 10px 10px; | |||
font-size: 12px; | |||
line-height: 1.55; | |||
color: #202122; | |||
} | |||
.ts-gallery__source { | |||
font-size: 11px; | |||
color: #54595d; | |||
} | |||
/* 左右ボタン */ | |||
.ts-gallery__nav { | |||
position: absolute; | |||
top: 50%; | |||
z-index: 5; | |||
width: 40px; | |||
height: 40px; | |||
padding: 0; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 50%; | |||
background: rgba(255, 255, 255, 0.94); | |||
color: #202122; | |||
font-size: 28px; | |||
font-family: Arial, sans-serif; | |||
line-height: 36px; | |||
text-align: center; | |||
cursor: pointer; | |||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); | |||
transform: translateY(-50%); | |||
} | |||
.ts-gallery__prev { | |||
left: 8px; | |||
} | |||
.ts-gallery__next { | |||
right: 8px; | |||
} | |||
.ts-gallery__nav:hover { | |||
background: #fff; | |||
border-color: #72777d; | |||
} | |||
.ts-gallery__nav:disabled { | |||
opacity: 0.25; | |||
cursor: default; | |||
} | |||
/* スライドする必要がない場合はボタン非表示 */ | |||
.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav { | |||
display: none; | |||
} | |||
/* スクロールバー */ | |||
.ts-gallery__track { | |||
scrollbar-width: thin; | |||
} | |||
.ts-gallery__track::-webkit-scrollbar { | |||
height: 6px; | |||
} | |||
.ts-gallery__track::-webkit-scrollbar-thumb { | |||
background: #a2a9b1; | |||
border-radius: 10px; | |||
} | |||
/* ========================================================= | |||
スマートフォン | |||
========================================================= */ | |||
@media screen and (max-width: 720px) { | |||
.ts-gallery { | |||
margin: 0.8em 0 1.2em; | |||
} | |||
.ts-gallery__track { | |||
gap: 9px; | |||
padding: 2px 34px 9px 0; | |||
} | |||
/* 次の画像を少し見せて「横に続く」ことを示す */ | |||
.ts-gallery__item { | |||
flex-basis: 88%; | |||
} | |||
.ts-gallery__imagebox { | |||
min-height: 180px; | |||
} | |||
.ts-gallery__image { | |||
max-height: 480px; | |||
} | |||
.ts-gallery__caption { | |||
padding: 7px 8px 9px; | |||
font-size: 12px; | |||
} | |||
.ts-gallery__source { | |||
font-size: 10.5px; | |||
} | |||
.ts-gallery__nav { | |||
width: 34px; | |||
height: 34px; | |||
font-size: 24px; | |||
line-height: 30px; | |||
} | |||
.ts-gallery__prev { | |||
left: 4px; | |||
} | |||
.ts-gallery__next { | |||
right: 4px; | |||
} | } | ||
} | } | ||