(ページの作成:「 .container { display: flex; flex-wrap: wrap; gap: 20px; margin: 10px; } .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…」) |
編集の要約なし |
||
(同じ利用者による、間の15版が非表示) | |||
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 { | ||
77行目: | 82行目: | ||
} | } | ||
} | } | ||
/*スライダー*/ | |||
* { | |||
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%; | |||
} |
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%;
}