ポケモンWikiでは記事の投稿、加筆、検証、修正等参加、協力してくださる方を必要としています。方法や詳細はポケモンWikiに投稿するにはをご覧ください。

利用者:Unドーナツ/Learnlist/styles.css

提供:ポケモンWiki
ナビゲーションに移動検索に移動
.bsb {
  display: grid;
  font-size: 12px;
  line-height: 1;
}
.アタッカー {
  width: min-content;
  grid-template-columns: repeat(6, 3.75em) 5em;
/*  grid-template-rows: repeat(22, calc(2.5em*sin(60deg)));
*/  grid-template-areas:
    " .   .   .   .   .  s17  . "
    " .   .   .   .  s16 s17 s15"
    " .   .   .  s56 s16 s14 s15"
    " .   .  s57 s56 s13 s14 s12"
    " .  s46 s57 s47 s13 s11 s12"
    "s45 s46 s44 s47 s10 s11 s09"
    "s45 s43 s44 s55 s10 s08 s09"
    "s42 s43 s41 s55 s07 s08 s53"
    "s42 s40 s41 s06 s07 s52 s53"
    "s39 s40 s05 s06 s01 s52 s54"
    "s39 s38 s05  s  s01 s29 s54"
    "s50 s38 s04  s  s02 s29 s30"
    "s50 s49 s04 s03 s02 s31 s30"
    "s51 s49 s18 s03 s32 s31 s33"
    "s51 s19 s18 s58 s32 s34 s33"
    "s20 s19 s21 s58 s35 s34 s36"
    "s20 s22 s21 s48 s35 s37 s36"
    "s23 s22 s24 s48 s60 s37  . "
    "s23 s25 s24 s59 s60  .   . "
    "s26 s25 s27 s59  .   .   . "
    "s26 s28 s27  .   .   .   . "
    " .  s28  .   .   .   .   . "
  ;
}
.サポート {
  width: min-content;
  grid-template-columns: repeat(6, 3.75em) 5em;
/*  grid-template-rows: repeat(22, calc(2.5em*sin(60deg)));
*/  grid-template-areas:
    " .   .   .   .   .  s17  . "
    " .   .   .   .  s15 s17 s16"
    " .  s57  .  s56 s15 s14 s16"
    "s46 s57 s45 s56 s12 s14 s13"
    "s46 s44 s45 s47 s12 s11 s13"
    "s43 s44 s42 s47 s09 s11 s10"
    "s43 s41 s42 s55 s09 s08 s10"
    "s40 s41 s39 s55 s07 s08  . "
    "s40 s38 s39 s06 s07 s50  . "
    "s53 s38 s05 s06 s01 s50  . "
    "s53 s52 s05  s  s01 s49  . "
    "s54 s52 s04  s  s02 s49  . "
    "s54 s18 s04 s03 s02 s51  . "
    "s19 s18 s20 s03 s27 s51  . "
    "s19 s21 s20 s58 s27 s28  . "
    "s22 s21 s23 s58 s29 s28 s30"
    "s22 s24 s23 s48 s29 s31 s30"
    "s25 s24 s26 s48 s32 s31 s33"
    "s25 s60 s26 s59 s32 s34 s33"
    " .  s60  .  s59 s35 s34 s36"
    " .   .   .   .  s35 s37 s36"
    " .   .   .   .   .  s37  . "
  ;
}
.スピード {
  width: min-content;
  grid-template-columns: repeat(6, 3.75em) 5em;
/*  grid-template-rows: repeat(22, calc(2.5em*sin(60deg)));
*/  grid-template-areas:
    " .  s17  .   .   .   .   . "
    "s15 s17 s16  .   .   .   . "
    "s15 s14 s16 s56  .   .   . "
    "s12 s14 s13 s56 s57  .   . "
    "s12 s11 s13 s47 s57 s46  . "
    "s09 s11 s10 s47 s44 s46 s45"
    "s09 s08 s10 s55 s44 s43 s45"
    "s53 s08 s07 s55 s41 s43 s42"
    "s53 s52 s07 s06 s41 s40 s42"
    "s54 s52 s01 s06 s05 s40 s39"
    "s54 s29 s01  s  s05 s38 s39"
    "s30 s29 s02  s  s04 s38 s50"
    "s30 s31 s02 s03 s04 s49 s50"
    "s33 s31 s32 s03 s18 s49 s51"
    "s33 s34 s32 s58 s18 s19 s51"
    "s36 s34 s35 s58 s21 s19 s20"
    "s36 s37 s35 s48 s21 s22 s20"
    " .  s37 s60 s48 s24 s22 s23"
    " .   .  s60 s59 s24 s25 s23"
    " .   .   .  s59 s27 s25 s26"
    " .   .   .   .  s27 s28 s26"
    " .   .   .   .   .  s28  . "
  ;
}
.テクニカル {
  width: min-content;
  grid-template-columns: repeat(6, 3.75em) 5em;
/*  grid-template-rows: repeat(19, calc(2.5em*sin(60deg)));
*/  grid-template-areas:
    " .  s46  .  s57  .  s17  . "
    "s44 s46 s45 s57 s15 s17 s16"
    "s44 s43 s45 s56 s15 s14 s16"
    "s41 s43 s42 s56 s12 s14 s13"
    "s41 s40 s42 s47 s12 s11 s13"
    "s39 s40 s38 s47 s09 s11 s10"
    "s39 s37 s38 s55 s09 s08 s10"
    "s50 s37 s36 s55 s07 s08 s53"
    "s50 s49 s36 s06 s07 s52 s53"
    "s51 s49 s05 s06 s01 s52 s54"
    "s51 s18 s05  s  s01 s27 s54"
    "s19 s18 s04  s  s02 s27 s28"
    "s19 s20 s04 s03 s02 s29 s28"
    "s21 s20 s22 s03 s30 s29 s31"
    "s21 s23 s22 s58 s30 s32 s31"
    "s24 s23 s25 s58 s33 s32 s34"
    "s24 s26 s25 s48 s33 s35 s34"
    " .  s26 s59 s48 s60 s35  . "
    " .   .  s59  .  s60  .   . "
  ;
}
.テクニカル2 {
  width: min-content;
  grid-template-columns: repeat(8, 3.75em) 5em;
/*  grid-template-rows: repeat(18, calc(2.5em*sin(60deg)));
*/  grid-template-areas:
    " .   .   .   .  s46  .   .   .   . "
    " .   .   .  s45 s46 s47  .   .   . "
    " .   .   .  s45 s43 s47  .   .   . "
    " .  s40  .  s44 s43 s48  .  s10  . "
    "s39 s40 s41 s44 s42 s48 s09 s10 s11"
    "s39 s36 s41  .  s42  .  s09 s08 s11"
    "s38 s36 s35  .  s06  .  s07 s08 s12"
    "s38 s37 s35 s05 s06 s01 s07 s13 s12"
    " .  s37  .  s05  s  s01  .  s13  . "
    " .  s34  .  s04  s  s02  .  s16  . "
    "s33 s34 s28 s04 s03 s02 s14 s16 s17"
    "s33 s29 s28  .  s03  .  s14 s15 s17"
    "s32 s29 s30  .  s21  .  s20 s15 s18"
    "s32 s31 s30 s27 s21 s23 s20 s19 s18"
    " .  s31  .  s27 s22 s23  .  s19  . "
    " .   .   .  s26 s22 s24  .   .   . "
    " .   .   .  s26 s25 s24  .   .   . "
    " .   .   .   .  s25  .   .   .   . "
  ;
}
.フィールド {
  width: min-content;
  grid-template-columns: repeat(6, 3.75em) 5em;
/*  grid-template-rows: repeat(19, calc(2.5em*sin(60deg)));
*/  grid-template-areas:
    " .   .  s59  .  s60  .   . "
    " .  s26 s59 s48 s60 s35  . "
    "s24 s26 s25 s48 s33 s35 s34"
    "s24 s23 s25 s58 s33 s32 s34"
    "s21 s23 s22 s58 s30 s32 s31"
    "s21 s20 s22 s06 s30 s29 s31"
    "s19 s20 s05 s06 s01 s29 s28"
    "s19 s18 s05  s  s01 s27 s28"
    "s51 s18 s04  s  s02 s27 s54"
    "s51 s49 s04 s03 s02 s52 s54"
    "s50 s49 s36 s03 s07 s52 s53"
    "s50 s37 s36 s55 s07 s08 s53"
    "s39 s37 s38 s55 s09 s08 s10"
    "s39 s40 s38 s47 s09 s11 s10"
    "s41 s40 s42 s47 s12 s11 s13"
    "s41 s43 s42 s56 s12 s14 s13"
    "s44 s43 s45 s56 s15 s14 s16"
    "s44 s46 s45 s57 s15 s17 s16"
    " .  s46  .  s57  .  s17  . "
  ;
}
.bsb > div {
  width: 5em;
  height: 4.33em; /* aspect-ratio: calc(1 / sin(60deg)); が非サポートなのでheightに代替*/
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  text-align: center;
  display: grid;
  place-content: center;
}
.bsb [class*="--"] { grid-area: s; }
.bsb [class*="-1-"] { grid-area: s01; }
.bsb [class*="-2-"] { grid-area: s02; }
.bsb [class*="-3-"] { grid-area: s03; }
.bsb [class*="-4-"] { grid-area: s04; }
.bsb [class*="-5-"] { grid-area: s05; }
.bsb [class*="-6-"] { grid-area: s06; }
.bsb [class*="-7-"] { grid-area: s07; }
.bsb [class*="-8-"] { grid-area: s08; }
.bsb [class*="-9-"] { grid-area: s09; }
.bsb [class*="-10-"] { grid-area: s10; }
.bsb [class*="-11-"] { grid-area: s11; }
.bsb [class*="-12-"] { grid-area: s12; }
.bsb [class*="-13-"] { grid-area: s13; }
.bsb [class*="-14-"] { grid-area: s14; }
.bsb [class*="-15-"] { grid-area: s15; }
.bsb [class*="-16-"] { grid-area: s16; }
.bsb [class*="-17-"] { grid-area: s17; }
.bsb [class*="-18-"] { grid-area: s18; }
.bsb [class*="-19-"] { grid-area: s19; }
.bsb [class*="-20-"] { grid-area: s20; }
.bsb [class*="-21-"] { grid-area: s21; }
.bsb [class*="-22-"] { grid-area: s22; }
.bsb [class*="-23-"] { grid-area: s23; }
.bsb [class*="-24-"] { grid-area: s24; }
.bsb [class*="-25-"] { grid-area: s25; }
.bsb [class*="-26-"] { grid-area: s26; }
.bsb [class*="-27-"] { grid-area: s27; }
.bsb [class*="-28-"] { grid-area: s28; }
.bsb [class*="-29-"] { grid-area: s29; }
.bsb [class*="-30-"] { grid-area: s30; }
.bsb [class*="-31-"] { grid-area: s31; }
.bsb [class*="-32-"] { grid-area: s32; }
.bsb [class*="-33-"] { grid-area: s33; }
.bsb [class*="-34-"] { grid-area: s34; }
.bsb [class*="-35-"] { grid-area: s35; }
.bsb [class*="-36-"] { grid-area: s36; }
.bsb [class*="-37-"] { grid-area: s37; }
.bsb [class*="-38-"] { grid-area: s38; }
.bsb [class*="-39-"] { grid-area: s39; }
.bsb [class*="-40-"] { grid-area: s40; }
.bsb [class*="-41-"] { grid-area: s41; }
.bsb [class*="-42-"] { grid-area: s42; }
.bsb [class*="-43-"] { grid-area: s43; }
.bsb [class*="-44-"] { grid-area: s44; }
.bsb [class*="-45-"] { grid-area: s45; }
.bsb [class*="-46-"] { grid-area: s46; }
.bsb [class*="-47-"] { grid-area: s47; }
.bsb [class*="-48-"] { grid-area: s48; }
.bsb [class*="-49-"] { grid-area: s49; }
.bsb [class*="-50-"] { grid-area: s50; }
.bsb [class*="-51-"] { grid-area: s51; }
.bsb [class*="-52-"] { grid-area: s52; }
.bsb [class*="-53-"] { grid-area: s53; }
.bsb [class*="-54-"] { grid-area: s54; }
.bsb [class*="-55-"] { grid-area: s55; }
.bsb [class*="-56-"] { grid-area: s56; }
.bsb [class*="-57-"] { grid-area: s57; }
.bsb [class*="-58-"] { grid-area: s58; }
.bsb [class*="-59-"] { grid-area: s59; }
.bsb [class*="-60-"] { grid-area: s60; }
.bsb .ina {
  background-image: radial-gradient(farthest-side circle, #D8D8D8 80%, transparent 86.6%);
}
.bsb .act {
  font-weight: bold;
  background-image: radial-gradient(farthest-side circle, rgba(255, 255, 255, 0.4) 80%, transparent 86.6%);
}

.赤 { background-color: #FF6464; }
.青 { background-color: #6464FF; }
.緑 { background-color: #64D364; }
.黄 { background-color: #FFE57A; }
.紫 { background-color: #C97DC0; }
.橙 { background-color: #F6B775; }
.★ { background-color: #9DC1B7; }