コンテンツにスキップ

「MediaWiki:Common.css」の版間の差分

MediaWiki:Common.css (ソースを閲覧)

2026年9月2日 (水) 07:08時点における版

754 バイト追加 、 2026年9月2日 (水)
編集の要約なし
編集の要約なし
編集の要約なし
2,030行目: 2,030行目:
   転スラWiki 外部画像スライドギャラリー
   転スラWiki 外部画像スライドギャラリー
   PC / タブレット / スマートフォン対応
   PC / タブレット / スマートフォン対応
  ・外部画像の生URLに対応
  ・縦長 / 横長 / 正方形を混在可能
  ・画像は絶対にトリミングしない
  ・画像表示領域の高さを統一
  ・PCでは左右ボタン
  ・スマホでは横スワイプ
   ========================================================= */
   ========================================================= */




/* ---------------------------------------------------------
/* =========================================================
   ギャラリー全体
   1. ギャラリー全体
   --------------------------------------------------------- */
   ========================================================= */
 
.mw-parser-output .ts-gallery {
--ts-gallery-image-height: 300px;


.ts-gallery {
position: relative;
position: relative;
display: block;
display: block;
2,051行目: 2,060行目:




/* テンプレート側でタイトルを指定した場合 */
.mw-parser-output .ts-gallery__title {
.ts-gallery__title {
margin: 0 0 0.6em;
margin: 0 0 0.6em;
padding: 0;
padding: 0;
2,062行目: 2,070行目:




/* ---------------------------------------------------------
/* =========================================================
   横スクロール領域
   2. 横スクロール領域
   --------------------------------------------------------- */
   ========================================================= */


.ts-gallery__track {
.mw-parser-output .ts-gallery__track {
display: flex !important;
display: flex !important;
flex-flow: row nowrap !important;
flex-flow: row nowrap !important;
2,076行目: 2,084行目:
max-width: 100% !important;
max-width: 100% !important;


margin: 0;
margin: 0 !important;
padding: 4px 46px 12px 2px;
padding: 4px 46px 12px 2px !important;


overflow-x: auto !important;
overflow-x: auto !important;
2,084行目: 2,092行目:
box-sizing: border-box;
box-sizing: border-box;


/* スワイプ後にカード位置で止まる */
scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-behavior: smooth;
2,091行目: 2,098行目:
overscroll-behavior-x: contain;
overscroll-behavior-x: contain;


/* PCでは細いスクロールバー */
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #a2a9b1 transparent;
scrollbar-color: #a2a9b1 transparent;
2,097行目: 2,103行目:




.ts-gallery__track::-webkit-scrollbar {
.mw-parser-output .ts-gallery__track::-webkit-scrollbar {
height: 6px;
height: 6px;
}
}




.ts-gallery__track::-webkit-scrollbar-track {
.mw-parser-output .ts-gallery__track::-webkit-scrollbar-track {
background: transparent;
background: transparent;
}
}




.ts-gallery__track::-webkit-scrollbar-thumb {
.mw-parser-output .ts-gallery__track::-webkit-scrollbar-thumb {
background: #a2a9b1;
background: #a2a9b1;
border-radius: 999px;
border-radius: 999px;
2,113行目: 2,119行目:




/* ---------------------------------------------------------
/* =========================================================
   1枚ごとのカード
   3. 1枚ごとのカード
   --------------------------------------------------------- */
   ========================================================= */


.ts-gallery__item {
.mw-parser-output .ts-gallery__item {
/*
/*
* PCで巨大になりすぎないよう固定気味にする。
* 大きすぎず小さすぎないサイズ。
* 画面が狭ければ自動的に小さくなる。
* 広いPCでは最大380px。
*/
*/
flex: 0 0 clamp(300px, 31vw, 380px) !important;
flex: 0 0 clamp(300px, 31vw, 380px) !important;
2,126行目: 2,132行目:
width: clamp(300px, 31vw, 380px) !important;
width: clamp(300px, 31vw, 380px) !important;
max-width: calc(100% - 24px) !important;
max-width: calc(100% - 24px) !important;
min-width: 0 !important;
min-width: 0 !important;


margin: 0;
margin: 0 !important;
padding: 0;
padding: 0 !important;


background: #fff;
background: #fff;
2,137行目: 2,142行目:
border-radius: 5px;
border-radius: 5px;


/*
* カード外へのはみ出しだけを防ぐ。
* 画像本体は下で必ず枠内に収める。
*/
overflow: hidden;
overflow: hidden;


2,146行目: 2,155行目:




/* ---------------------------------------------------------
/* =========================================================
   画像を入れる共通枠
   4. 画像表示領域
   --------------------------------------------------------- */
   ========================================================= */


.ts-gallery__imagebox {
.mw-parser-output .ts-gallery__imagebox {
/*
* 画像そのものではなく「表示枠」を統一する。
* これによって縦長・横長でも高さが揃う。
*/
display: flex !important;
display: flex !important;
align-items: center !important;
align-items: center !important;
2,161行目: 2,166行目:
width: 100% !important;
width: 100% !important;


height: 300px !important;
/*
min-height: 300px !important;
* 全画像で表示領域の高さを統一
max-height: 300px !important;
*/
height: var(--ts-gallery-image-height) !important;
min-height: var(--ts-gallery-image-height) !important;
max-height: var(--ts-gallery-image-height) !important;


margin: 0 !important;
margin: 0 !important;
2,170行目: 2,178行目:
background: #f8f9fa;
background: #f8f9fa;


overflow: hidden;
box-sizing: border-box;


box-sizing: border-box;
/*
* 画像は100%×100% + containで
* 必ずこの領域内に収まるため、
* ここではトリミング処理をしない。
*/
overflow: visible !important;
}
}




/*
/* =========================================================
* imgがリンクで囲まれた場合にも対応
  5. 画像がリンクで囲まれた場合
*/
  ========================================================= */
.ts-gallery__imagebox > a {
 
display: flex !important;
.mw-parser-output .ts-gallery__imagebox > a {
align-items: center !important;
display: block !important;
justify-content: center !important;


width: 100% !important;
width: 100% !important;
2,194行目: 2,206行目:




/* ---------------------------------------------------------
/* =========================================================
   画像本体
   6. 画像本体
   ここが重要
   最重要部分
   --------------------------------------------------------- */
   ========================================================= */


.ts-gallery__imagebox img,
/*
.ts-gallery img.ts-gallery__image {
* 重要：
*
* width:auto;
* height:auto;
*
* は使用しない。
*
* img自体に表示枠と同じサイズを与え、
* object-fit:contain で画像本体だけを
* 縦横比を維持したまま収める。
*
* これにより、
*
* 縦長画像 → 左右に余白
* 横長画像 → 上下に余白
* 正方形  → 状況に応じて余白
*
* となり、画像は一切切れない。
*/


.mw-parser-output .ts-gallery__imagebox > img,
.mw-parser-output .ts-gallery__imagebox > a > img,
.mw-parser-output .ts-gallery img.ts-gallery__image {
display: block !important;
display: block !important;


/*
width: 100% !important;
* width:100%;
height: 100% !important;
* height:100%;
* にはしない。
*
* 画像本来の縦横比を維持して
* 枠に収まるところまで縮小する。
*/
width: auto !important;
height: auto !important;


max-width: 100% !important;
max-width: 100% !important;
2,221行目: 2,246行目:
min-height: 0 !important;
min-height: 0 !important;


margin: auto !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;


/*
border: 0 !important;
* 念のためcontainを指定。
box-shadow: none !important;
* 画像をトリミングしない。
 
*/
object-fit: contain !important;
object-fit: contain !important;
object-position: center center !important;
object-position: center center !important;


border: 0 !important;
background: transparent !important;
 
box-shadow: none !important;


vertical-align: middle !important;
box-sizing: border-box !important;
}
}




/* ---------------------------------------------------------
/* =========================================================
   キャプション
   7. キャプション
   --------------------------------------------------------- */
   ========================================================= */


.ts-gallery__caption {
.mw-parser-output .ts-gallery__caption {
display: block;
display: block;
width: 100%;


margin: 0;
margin: 0;
padding: 10px 12px 12px;
padding: 10px 12px 12px;
color: #202122;
background: #fff;


font-size: 12px;
font-size: 12px;
line-height: 1.6;
line-height: 1.6;
color: #202122;
background: #fff;


box-sizing: border-box;
box-sizing: border-box;


/*
* 長いURLや著作権表記が
* スマホ画面からはみ出すのを防ぐ
*/
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: normal;
word-break: normal;
2,266行目: 2,286行目:




.ts-gallery__caption p {
.mw-parser-output .ts-gallery__caption p {
margin-top: 0;
margin-top: 0;
margin-bottom: 0.4em;
margin-bottom: 0.4em;
2,272行目: 2,292行目:




.ts-gallery__caption p:last-child {
.mw-parser-output .ts-gallery__caption p:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
}




.ts-gallery__source {
.mw-parser-output .ts-gallery__source {
display: inline;
display: inline;
color: #54595d;


font-size: 11px;
font-size: 11px;
line-height: 1.55;
line-height: 1.55;
color: #54595d;


overflow-wrap: anywhere;
overflow-wrap: anywhere;
2,289行目: 2,309行目:




/* 外部リンクが長くてもカードからはみ出させない */
.mw-parser-output .ts-gallery__caption a,
.ts-gallery__caption a,
.mw-parser-output .ts-gallery__source a {
.ts-gallery__source a {
overflow-wrap: anywhere;
overflow-wrap: anywhere;
}
}




/* ---------------------------------------------------------
/* =========================================================
   左右移動ボタン
   8. 左右移動ボタン
   Common.jsで生成されるもの
   ========================================================= */
  --------------------------------------------------------- */


.ts-gallery__nav {
.mw-parser-output .ts-gallery__nav {
position: absolute;
position: absolute;


/*
/*
* 画像領域のほぼ中央に配置。
* 300px画像領域の中央付近
* キャプションの高さには影響されない。
*/
*/
top: 154px;
top: calc(
(var(--ts-gallery-image-height) / 2)
+ 4px
);


z-index: 20;
z-index: 20;
2,346行目: 2,366行目:




.ts-gallery__prev {
.mw-parser-output .ts-gallery__prev {
left: 10px;
left: 10px;
}
}




.ts-gallery__next {
.mw-parser-output .ts-gallery__next {
right: 10px;
right: 10px;
}
}




.ts-gallery__nav:hover {
.mw-parser-output .ts-gallery__nav:hover {
background: #fff;
background: #fff;
border-color: #72777d;
border-color: #72777d;
2,362行目: 2,382行目:




.ts-gallery__nav:focus-visible {
.mw-parser-output .ts-gallery__nav:focus-visible {
outline: 2px solid #36c;
outline: 2px solid #36c;
outline-offset: 2px;
outline-offset: 2px;
2,368行目: 2,388行目:




.ts-gallery__nav:disabled {
.mw-parser-output .ts-gallery__nav:disabled {
opacity: 0.25;
opacity: 0.25;
cursor: default;
cursor: default;
2,375行目: 2,395行目:


/*
/*
  * 横スクロールできない場合は
  * スライドする必要がなければボタン非表示
* ボタン自体を隠す
  */
  */
.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
.mw-parser-output
.ts-gallery:not(.ts-gallery--scrollable)
.ts-gallery__nav {
display: none;
display: none;
}
}
2,384行目: 2,405行目:


/* =========================================================
/* =========================================================
   中程度の画面
   9. タブレット
   ========================================================= */
   ========================================================= */


@media screen and (max-width: 900px) {
@media screen and (max-width: 900px) {


.ts-gallery__item {
.mw-parser-output .ts-gallery__item {
flex-basis: clamp(290px, 45vw, 360px) !important;
flex-basis: clamp(290px, 45vw, 360px) !important;
width: clamp(290px, 45vw, 360px) !important;
width: clamp(290px, 45vw, 360px) !important;
2,398行目: 2,419行目:


/* =========================================================
/* =========================================================
   スマートフォン
   10. スマートフォン
   ========================================================= */
   ========================================================= */


@media screen and (max-width: 720px) {
@media screen and (max-width: 720px) {


.ts-gallery {
.mw-parser-output .ts-gallery {
/*
* スマホでは少し低くする。
* ただし全画像で同じ高さ。
*/
--ts-gallery-image-height:
clamp(220px, 64vw, 270px);
 
width: 100% !important;
width: 100% !important;
max-width: 100% !important;
max-width: 100% !important;
2,412行目: 2,440行目:




.ts-gallery__track {
.mw-parser-output .ts-gallery__track {
/*
* vwではなく親要素のwidthを基準にする。
* Minervaの本文幅を超えないため重要。
*/
width: 100% !important;
width: 100% !important;
max-width: 100% !important;
max-width: 100% !important;
2,425行目: 2,449行目:


/*
/*
* 右側に少し余白を置くことで、
* 次のカードが少しだけ見える
* 次のカードが見える。
*/
*/
padding: 3px 30px 8px 0 !important;
padding: 3px 30px 8px 0 !important;
2,436行目: 2,459行目:


/*
/*
* スマホではスクロールバーを隠す。
* スマホではスクロールバーを隠す
* スワイプ自体は可能。
*/
*/
scrollbar-width: none;
scrollbar-width: none;
2,443行目: 2,465行目:




.mw-parser-output
.ts-gallery__track::-webkit-scrollbar {
.ts-gallery__track::-webkit-scrollbar {
display: none;
display: none;
2,448行目: 2,471行目:




.ts-gallery__item {
.mw-parser-output .ts-gallery__item {
/*
/*
* 86vwを使わない。
* vwではなく親要素基準。
*
* MobileFrontendでも本文幅からはみ出しにくい。
* MobileFrontendでは本文領域と
* viewport幅が一致しない場合があるため、
* 親要素基準にする。
*
* 右に次の画像が少しだけ見える。
*/
*/
flex: 0 0 calc(100% - 28px) !important;
flex:
0 0 calc(100% - 28px) !important;


width: calc(100% - 28px) !important;
width:
max-width: calc(100% - 28px) !important;
calc(100% - 28px) !important;
 
max-width:
calc(100% - 28px) !important;


min-width: 0 !important;
min-width: 0 !important;
2,467行目: 2,489行目:




.ts-gallery__imagebox {
/*
/*
* スマホでも画像本体は同じ原理。
* スマホは大きすぎない高さ。
* 100%×100%の領域内にcontain。
* 同じ端末では全画像が必ず同じ高さになる。
*/
*/
.mw-parser-output
height: clamp(220px, 64vw, 270px) !important;
.ts-gallery__imagebox > img,
min-height: clamp(220px, 64vw, 270px) !important;
max-height: clamp(220px, 64vw, 270px) !important;
}


.mw-parser-output
.ts-gallery__imagebox > a > img,


/*
.mw-parser-output
* Minerva側のimg指定より強くして
* 縦横比を必ず維持する
*/
.ts-gallery__imagebox img,
.ts-gallery img.ts-gallery__image {
.ts-gallery img.ts-gallery__image {
width: auto !important;
width: 100% !important;
height: auto !important;
height: 100% !important;


max-width: 100% !important;
max-width: 100% !important;
2,495行目: 2,512行目:




.ts-gallery__caption {
.mw-parser-output .ts-gallery__caption {
padding: 9px 10px 11px !important;
padding: 9px 10px 11px !important;


2,503行目: 2,520行目:




.ts-gallery__source {
.mw-parser-output .ts-gallery__source {
font-size: 10.5px;
font-size: 10.5px;
line-height: 1.55;
line-height: 1.55;
2,509行目: 2,526行目:




.ts-gallery__nav {
.mw-parser-output .ts-gallery__nav {
/*
top: calc(
* clampの画像高におおよそ合わせる
(var(--ts-gallery-image-height) / 2)
*/
+ 3px
top: clamp(113px, 32vw, 138px);
);


width: 34px;
width: 34px;
2,520行目: 2,537行目:
font-size: 23px;
font-size: 23px;


background: rgba(255, 255, 255, 0.88);
background:
rgba(255, 255, 255, 0.88);
}
}




.ts-gallery__prev {
.mw-parser-output .ts-gallery__prev {
left: 5px;
left: 5px;
}
}




.ts-gallery__next {
.mw-parser-output .ts-gallery__next {
right: 5px;
right: 5px;
}
}
2,537行目: 2,555行目:


/* =========================================================
/* =========================================================
   非常に狭いスマートフォン
   11. 非常に狭いスマートフォン
   ========================================================= */
   ========================================================= */


@media screen and (max-width: 380px) {
@media screen and (max-width: 380px) {


.ts-gallery__track {
.mw-parser-output .ts-gallery {
padding-right: 24px !important;
--ts-gallery-image-height: 220px;
}
}




.ts-gallery__item {
.mw-parser-output .ts-gallery__track {
flex-basis: calc(100% - 22px) !important;
padding-right: 24px !important;
 
width: calc(100% - 22px) !important;
max-width: calc(100% - 22px) !important;
}
}




.ts-gallery__imagebox {
.mw-parser-output .ts-gallery__item {
height: 220px !important;
flex-basis:
min-height: 220px !important;
calc(100% - 22px) !important;
max-height: 220px !important;
}


width:
calc(100% - 22px) !important;


.ts-gallery__nav {
max-width:
top: 113px;
calc(100% - 22px) !important;
}
}


2,570行目: 2,585行目:


/* =========================================================
/* =========================================================
   印刷
   12. 印刷
   ========================================================= */
   ========================================================= */


@media print {
@media print {


.ts-gallery__track {
.mw-parser-output .ts-gallery__track {
display: block !important;
display: block !important;


overflow: visible !important;
overflow: visible !important;
padding: 0 !important;
padding: 0 !important;
}
}




.ts-gallery__item {
.mw-parser-output .ts-gallery__item {
display: inline-block !important;
display: inline-block !important;


2,595行目: 2,611行目:




.ts-gallery__nav {
.mw-parser-output .ts-gallery__nav {
display: none !important;
display: none !important;
}
}


}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4256」から取得