編集の要約なし |
編集の要約なし |
||
(同じ利用者による、間の12版が非表示) | |||
3行目: | 3行目: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
margin: 10px 0; | |||
margin: 10px; | |||
} | } | ||
.column { | .column { | ||
26行目: | 25行目: | ||
.menu-container { | .menu-container { | ||
display: flex; | display: flex; | ||
justify-content: center; | |||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 5px; | gap: 5px; | ||
64行目: | 64行目: | ||
.h2_blue2_bg { | .h2_blue2_bg { | ||
} | } | ||
@media (max-width: 768px) { | |||
.mw-parser-output .menulist { | |||
flex: 0 0 calc(31% + 5px); | |||
margin-bottom: 3px; | |||
} | |||
} | |||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.column { | .column { | ||
85行目: | 90行目: | ||
margin: 0; | margin: 0; | ||
} | } | ||
/* スライドする要素 */ | /* スライドする要素 */ | ||
.content { | .content { | ||
width: 100px; | |||
height: 100px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
} | |||
.content img { | |||
} | width: 100%; | ||
.content | height: 100%; | ||
object-fit: cover; | |||
} | |||
/* スライドレールの枠 */ | |||
.wrap { | |||
} | overflow: hidden; | ||
/* スライドレールの枠 */ | display: flex; | ||
.wrap { | align-items: center; | ||
height: 120px; | |||
width:360px; | |||
margin: auto; | |||
} | |||
/* content4つをまとめたスライドブロック */ | |||
.slideshow { | |||
} | display: flex; | ||
/* content4つをまとめたスライドブロック */ | animation: loop-slide 15s infinite linear 1s both; | ||
.slideshow { | } | ||
@keyframes loop-slide { | |||
from { transform: translateX(0); } | |||
} | to { transform: translateX(-100%); } | ||
} | |||
@keyframes loop-slide { | /* タッチデバイスでスクロールを一時停止 */ | ||
.slide-paused:active .slideshow { | |||
animation-play-state: paused; | |||
} | |||
/* タップ時の装飾 */ | |||
.content-hover { | |||
transition: all 0.2s; | |||
} | margin-right: 5px; | ||
/* | } | ||
.slide-paused: | .content-hover:active { | ||
transform: scale(0.95); | |||
} | opacity: 0.8; | ||
/* | } | ||
.content-hover { | span.btn.btn-default >a { | ||
display: flex; | |||
align-items: center; | |||
} | justify-content: center; | ||
.content-hover: | width: 100%; | ||
height: 100%; | |||
} | } |
2024年10月4日 (金) 16:18時点における最新版
.container {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
}
.column {
flex: 1 1 calc(50% - 10px);
min-width: 300px;
box-sizing: border-box;
padding: 10px;
border-radius: 8px;
}
.h2_blue {
font-size: 1em;
color: #fcfcfc;
text-shadow: 0 0 10px #3fbbe8, 0 0 3px #3fbbe8, 0 0 1px #3fbbe8;
background: linear-gradient(#163f6a, #406b97);
padding: 6px 15px !important;
margin: 20px 0 15px 0 !important;
border-radius: 3px;
font-weight: 700;
}
.menu-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
.menulist {
flex: 0 0 calc(32% - 5px);
margin-bottom: 3px;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 40px;
font-size: 14px;
font-weight: 400;
text-align: center;
white-space: normal;
word-wrap: break-word;
cursor: pointer;
background-image: none;
border: 1px solid #ccc !important;
border-radius: 2px;
box-sizing: border-box;
}
.column2{
flex: 0 1 100%;
}
.h2_gray{
font-size:1em;
color: #fcfcfc;
background: linear-gradient(to right, #879294, #c0d5e1);
padding: 6px 15px !important;
margin: 0 0 15px 0 !important;
font-weight: 700;
}
.h2_blue2_bg {
}
@media (max-width: 768px) {
.mw-parser-output .menulist {
flex: 0 0 calc(31% + 5px);
margin-bottom: 3px;
}
}
@media (max-width: 768px) {
.column {
flex: 1 1 100%;
}
.menulist {
flex: 0 0 100%;
}
.menulist {
flex: 0 0 calc(32% - 5px);
margin-bottom: 3px;
}
}
/*スライダー*/
* {
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
}
/* スライドする要素 */
.content {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.content img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* スライドレールの枠 */
.wrap {
overflow: hidden;
display: flex;
align-items: center;
height: 120px;
width:360px;
margin: auto;
}
/* content4つをまとめたスライドブロック */
.slideshow {
display: flex;
animation: loop-slide 15s infinite linear 1s both;
}
@keyframes loop-slide {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* タッチデバイスでスクロールを一時停止 */
.slide-paused:active .slideshow {
animation-play-state: paused;
}
/* タップ時の装飾 */
.content-hover {
transition: all 0.2s;
margin-right: 5px;
}
.content-hover:active {
transform: scale(0.95);
opacity: 0.8;
}
span.btn.btn-default >a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}