:root { /* https://jajaaan.co.jp/web-production/frontend/css-variables/ rootはグローバル変数という意味。あらゆるところで使用できる変数のこと */
--base-font-size: medium; /* xx-small x-small small medium large x-large xx-large xxx-large */
--ControlPanelborder: 1px; /* css変数でコンパネ閉じている時は0、開いた時1にしたら、ボタン部分にしか枠線が描かれない */
--obiobi: 'Amazon'; /* STAR WARS オペレーション変更用 */
--planets: url(a-planet3.jpg);
--FlagStarWars: 123456789; /* 動画フラグ 全部コピーしているのに'infinite'効いたり効かなかったり */
--FlagColonyDrop: 123456789;
--FlagHaro: 123456789;
--FlagUFO: 123456789;
--OpeningTable: 1080px; /* webサイト起動時の稼働用 */
--Button-Color-StarWars-Move: blue;
--Button-Color-StarWars-Stop: rgba(0,0,0,0.1);
--Button-Color-ColonyDrop-Move: blue;
--Button-Color-ColonyDrop-Stop: rgba(0,0,0,0.1);
--Button-Color-Haro-Move: blue;
--Button-Color-Haro-Stop: rgba(0,0,0,0.1);
--Button-Color-UFO-Move: blue;
--Button-Color-UFO-Stop: rgba(0,0,0,0.1);
--Button-Color-SPEED-001: rgba(0,0,0,0.1);
--Button-Color-SPEED-01: rgba(0,0,0,0.1);
--Button-Color-SPEED-1: rgba(0,0,0,0.1);
--Button-Color-SPEED-3: rgba(0,0,0,0.1);
--Button-Color-SPEED-5: blue;
--Button-Color-SPEED-10: rgba(0,0,0,0.1);
--Button-Color-SPEED-777: rgba(0,0,0,0.1);
--Button-Color-Sui: rgba(0,0,0,0.1);
--Button-Color-Kin: rgba(0,0,0,0.1);
--Button-Color-Tik: blue;
--Button-Color-Kas: rgba(0,0,0,0.1);
--Button-Color-Mok: rgba(0,0,0,0.1);
--Button-Color-Dos: rgba(0,0,0,0.1);
--Button-Color-Ten: rgba(0,0,0,0.1);
--Button-Color-Kai: rgba(0,0,0,0.1);
--Button-Color-Mei: rgba(0,0,0,0.1);
--Button-Color-Tuk: rgba(0,0,0,0.1);
--Button-Color-SS: rgba(0,0,0,0.1);
--Button-Color-MM: blue;
--Button-Color-L1: rgba(0,0,0,0.1);
--Button-Color-L2: rgba(0,0,0,0.1);
--Button-Color-L3: rgba(0,0,0,0.1);
--Button-Color-L4: rgba(0,0,0,0.1);
--Button-Color-IchiranON: blue;
--Button-Color-IchiranOF: rgba(0,0,0,0.1);
--Button-Color-IchiranFF: rgba(0,0,0,0.1);
--Button-Color-IchiranRR: rgba(0,0,0,0.1);
--Button-Color-Game-1: blue;
--Button-Color-Game-2: rgba(0,0,0,0.1);
}
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
canvas{
background-color: black;
}
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
.ss:link{ color:yellow; text-decoration:none; font-weight:bold; } /* 通常表示 */
.ss:visited{ color:yellow; text-decoration:none; font-weight:bold; } /* 通常表示 */
.ss:hover{ color:white; text-decoration:none; font-weight:bold; } /* カーソル直上 */
.ss:active{ color:white; text-decoration:none; font-weight:bold; } /* 押した瞬間 */
.ss2:link{ color:cyan; text-decoration:none; } /* 通常表示 */
.ss2:visited{ color:cyan; text-decoration:none; } /* 通常表示 */
.ss2:hover{ color:yellow; text-decoration:none; } /* カーソル直上 */
.ss2:active{ color:white; text-decoration:none; } /* 押した瞬間 */
.ss3:link{ color:#aaaaaa; text-decoration:underline; } /* 通常表示 */
.ss3:visited{ color:#aaaaaa; text-decoration:underline; } /* 通常表示 */
.ss3:hover{ color:yellow; text-decoration:underline; } /* カーソル直上 */
.ss3:active{ color:white; text-decoration:underline; } /* 押した瞬間 */
ul { border:0px skyblue dashed; margin:0px 0px 0px 0px; } /* 箇条書き [上][右][下][左] */
ul li{ margin:0px 0px 0px -1em; padding:0px 0px 0px 0px; } /* １文字 = 1em デフォルトで一文字分下げられている模様 */
ol { border:0px skyblue dashed; margin:0px 0px 0px 0px; } /* ナンバリング */
ol li{ margin:0px 0px 0px -1em; padding:0px 0px 0px 0px; }
span.is-yellow{ color:yellow; }
span.eee{ font-size:400px; font-family:"メイリオ"; }
span.yagou{ font-size:smaller; color:white; }
span.smaller{ font-size:smaller; }
span.GameTitle{ font-size:xxx-large; color:yellow; font-weight:bold; }
span.by{ color:yellow; font-weight:bold; }
span.wb{ color:white; font-weight:bold; }
span.wbg{ color:yellow; font-weight:bold; font-family:ＭＳ ゴシック; }
span.YellowPikari{
animation-name: YellowPikari-Engine;
animation-timing-function: liner;
animation-delay: 0s; /* アニメーション開始を遅らせる */
animation-duration: 1s; /* 時間 */
animation-fill-mode: backwards; /* アニメーション終了時の状態 none 指定なし forwards 終了時の状態を維持 backwards 開始時の状態に戻る both 開始時に"forwards"、終了時に"backwards"を適用 */
animation-iteration-count: infinite; /* 再生回数 「infinite」だと無限 */
}
@keyframes YellowPikari-Engine{ 0% { }
100% { color: yellow; font-size:xxx-large; }
}
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
button{
background-color: rgba(0,0,0,0.1); /* 背景色 rgba(86, 86, 86, 0.6); 背景に限らず総ての色指定は、rgba指定により透明度を指定できる 0だと透明 0.9だとほぼ白 */
opacity: 1; /* 透過度 */
color: white;
height: 30px;
&.is-accordion-Button{
height: 60px;
animation-name: is-accordion-Button-Engine;
animation-timing-function: liner;
animation-delay: 0s; /* アニメーション開始を遅らせる */
animation-duration: 3s; /* 時間 */
animation-fill-mode: backwards; /* アニメーション終了時の状態 none 指定なし forwards 終了時の状態を維持 backwards 開始時の状態に戻る both 開始時に"forwards"、終了時に"backwards"を適用 */
animation-iteration-count: infinite; /* 再生回数 「infinite」だと無限 */
}
}
@keyframes is-accordion-Button-Engine{ 0% { }
50% { font-size:large; }
100% { }
}
button:hover{ /* カーソル直上 */
cursor: pointer; /* カーソルを指ポインターにする */
color: red;
}
#Button-Color-StarWars-Move{ background-color: var(--Button-Color-StarWars-Move); }
#Button-Color-StarWars-Stop{ background-color: var(--Button-Color-StarWars-Stop); }
#Button-Color-ColonyDrop-Move{ background-color: var(--Button-Color-ColonyDrop-Move); }
#Button-Color-ColonyDrop-Stop{ background-color: var(--Button-Color-ColonyDrop-Stop); }
#Button-Color-Haro-Move{ background-color: var(--Button-Color-Haro-Move); }
#Button-Color-Haro-Stop{ background-color: var(--Button-Color-Haro-Stop); }
#Button-Color-UFO-Move{ background-color: var(--Button-Color-UFO-Move); }
#Button-Color-UFO-Stop{ background-color: var(--Button-Color-UFO-Stop); }
#Button-Color-SPEED-001{ background-color: var(--Button-Color-SPEED-001); }
#Button-Color-SPEED-01{ background-color: var(--Button-Color-SPEED-01); }
#Button-Color-SPEED-1{ background-color: var(--Button-Color-SPEED-1); }
#Button-Color-SPEED-3{ background-color: var(--Button-Color-SPEED-3); }
#Button-Color-SPEED-5{ background-color: var(--Button-Color-SPEED-5); }
#Button-Color-SPEED-10{ background-color: var(--Button-Color-SPEED-10); }
#Button-Color-SPEED-777{ background-color: var(--Button-Color-SPEED-777); }
#Button-Color-Sui{ background-color: var(--Button-Color-Sui); }
#Button-Color-Kin{ background-color: var(--Button-Color-Kin); }
#Button-Color-Tik{ background-color: var(--Button-Color-Tik); }
#Button-Color-Kas{ background-color: var(--Button-Color-Kas); }
#Button-Color-Mok{ background-color: var(--Button-Color-Mok); }
#Button-Color-Dos{ background-color: var(--Button-Color-Dos); }
#Button-Color-Ten{ background-color: var(--Button-Color-Ten); }
#Button-Color-Kai{ background-color: var(--Button-Color-Kai); }
#Button-Color-Mei{ background-color: var(--Button-Color-Mei); }
#Button-Color-Tuk{ background-color: var(--Button-Color-Tuk); }
#Button-Color-SS{ background-color: var(--Button-Color-SS); }
#Button-Color-MM{ background-color: var(--Button-Color-MM); }
#Button-Color-L1{ background-color: var(--Button-Color-L1); }
#Button-Color-L2{ background-color: var(--Button-Color-L2); }
#Button-Color-L3{ background-color: var(--Button-Color-L3); }
#Button-Color-L4{ background-color: var(--Button-Color-L4); }
#Button-Color-IchiranON{ background-color: var(--Button-Color-IchiranON); } /* #Button-Color-IchiranON は IDセレクタであり、HTML 要素の id="Button-Color-IchiranON" を持つ要素だけにスタイルを適用する */
#Button-Color-IchiranOF{ background-color: var(--Button-Color-IchiranOF); }
#Button-Color-IchiranFF{ background-color: var(--Button-Color-IchiranFF); }
#Button-Color-IchiranRR{ background-color: var(--Button-Color-IchiranRR); }
#Button-Color-Game-1{ background-color: var(--Button-Color-Game-1); }
#Button-Color-Game-2{ background-color: var(--Button-Color-Game-2); }
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
html{
color: #aaaaaa; /* 文字の色 */
letter-spacing: normal; /* 文字間隔 normal 1px 0.1em */
word-spacing: normal; /* 単語間隔 */
font-weight: normal; /* 文字の太さ normal, bold, lighter */
font-size: var(--base-font-size);
font-style: normal; /* スタイル 標準（normal）イタリック体（italic）斜体（oblique） */
line-height: 160%;
font-family: "メイリオ";
}
body{
margin: 0px 0px 0px 0px; /* [上][右][下][左] */
background-image: var(--planets); /* url(a-planets3.jpg); */
background-color: black; /* 背景画像が無い所は黒色 */
background-repeat: no-repeat; /* 背景画像は繰り返さない */
background-position: center top; /* 背景画像は中央の上 */
background-size: auto; /* 背景画像の大きさ */ /* auto 元の大きさのまま */
/* contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。 */
/* cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。 */
/* 数値(px) 明示的にpxで大きさを調整します。 */
/* 数値(%) 要素に対しての割合で指定します。 */
background-attachment: fixed; /* 背景画像をスクロールさせるか？ */
/* scroll 背景を要素自身に固定。要素内をスクロールしても背景は固定 */
/* fixed 背景を表示領域に固定。ページをスクロールしても背景は固定 */
/* local 背景をコンテンツに固定。背景も一緒にスクロールする。 */
list-style-position: outside; /* リスト表示の位置指定 inside; outside; */
animation-name: animeBODY-engine;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-duration: 20s; /* 時間 */
animation-delay: 7s; /* アニメーション開始を3秒遅らせる */
}
@keyframes animeBODY-engine {
0% { background-position: center bottom; }
100% { background-position: center top; }
}
h2{ font-family: "メイリオ";
color: white;
font-size: medium;
font-weight: bold;
text-align: center;
line-height: 0%;
}
.Arial{
color: white;
font-family: "Arial";
font-weight: normal; /* 文字の太さ normal, bold, lighter */
font-style: italic; /* スタイル 標準（normal）イタリック体（italic）斜体（oblique） */
}
b{ /* 昔からある太文字タグを、更に設定。 */
font-weight: bold; /* 文字の太さ normal, bold, lighter */
font-style: normal; /* スタイル 標準（normal）イタリック体（italic）斜体（oblique） */
color: white;
}
iframe{
zoom: 0.5;
}
table{ border: 0;
border-collapse: collapse; /* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するか collapse:共有して表示 separate:間隔をあけて表示（枠線非表示でも間隔が開く）*/
border-spacing: 0; /* セル間の余白をゼロに */
th,td{ vertical-align: top; } /* テーブルの中身を上寄せにする。tableタブではなく、tdタブで指定しないと効かない */
&.is-game{
border: 1px solid white;
background-color: #222222;
line-height: 160%;
color: #aaaaaa; /* 文字の色 */
font-weight: lighter; /* 文字の太さ normal, bold, lighter */
}
&.is-intable{ /* 親要素にあわせて100%。そしてfixedにして、それとth/tdの一つは幅を未指定にすることで、常に親のwidthにフィットして、tableがあふれない。 */
width: 100%;
table-layout: fixed;"
}
&.is-space{
tr,th,td{ height: 20px; }
}
&.is-top-line111{
color: #aaaaaa;
line-height: 200%;
border: 1px solid white;
background-color: #222222;
font-weight: lighter; /* 文字の太さ normal, bold, lighter */
text-align: left;
tr,th,td{ height: 20px;
border: 1px solid #444444;
vertical-align: middle;
}
tr:nth-of-type(1){ td:nth-child(1){ text-align:right; } }
tr:nth-of-type(2){ td:nth-child(1){ text-align:center; width:90px; } }
tr:nth-of-type(7){ td:nth-child(1){ text-align:center; width:90px; } }
tr:nth-of-type(8){ td:nth-child(1){ text-align:center; width:90px; } }
tr:nth-of-type(12){ td:nth-child(1){ text-align:center; width:90px; } }
}
&.is-sw111f{
background-color: black; /* 背景より前にあるテーブルを大きくして、背景を見えなくする */
height: 100vh; /* vh：ビューポート（画面サイズ）の高さに対する割合。100vhは画面の高さと同じ（100%）を表す */
width: 100vw; /* vw：ビューポート（画面サイズ）の幅に 対する割合。100vwは画面の高さと同じ（100%）を表す */
color: white;
font-family: "Arial";
font-size: xxx-large;
font-weight: bold;
line-height: 0%;
margin: 0 auto; /* テーブルを中央に配置 */
display: flex;
justify-content: center;
align-items: center;
border: 0;
border-collapse: collapse; /* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定する */
tr,th,td{
/* センタリングしたら若干下がるので、すこし上げる */
position: relative; /* 要素の現在の位置を基準にして移動します。 */
top: -30px; /* 元の位置から下に10px移動 */
vertical-align: middle;
text-align: center;
}
}
&.is-sw111{
color: yellow;
font-family: "Arial";
font-size: xxx-large;
font-weight: bold;
line-height: 200%;
margin: 0 auto; /* テーブルを中央に配置 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* vh：ビューポート（画面サイズ）の高さに対する割合。100vhは画面の高さと同じ（100%）を表す */
border: 0;
border-collapse: collapse; /* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定する */
tr,th,td{
vertical-align: middle;
text-align: center;
}
animation-name: animeSW111-engine;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-duration: 4s; /* 時間 */
}
&.is-sw111a{
color: yellow;
font-family: "Arial";
font-size: xxx-large;
font-weight: bold;
line-height: 50%;
margin: 0 auto; /* テーブルを中央に配置 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* vh：ビューポート（画面サイズ）の高さに対する割合。100vhは画面の高さと同じ（100%）を表す */
border: 0;
border-collapse: collapse; /* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定する */
tr,th,td{
vertical-align: middle;
text-align: center;
}
}
&.is-sw222{
margin: 0 auto; /* テーブルを中央に配置 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* vh：ビューポート（画面サイズ）の高さに対する割合。100vhは画面の高さと同じ（100%）を表す */
border: 0;
border-collapse: collapse; /* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定する */
tr,th,td{
vertical-align: middle;
text-align: center;
}
}
&.is-ufo{
max-width: 900px;
min-width: 360px; /* 横幅の最小値 */
tr,th,td{
height: 1px;
}
}
&.is-content{
border: 1px solid white;
background-color: rgba(0, 0, 0, 0.8);
th,td{
height: 40px;
border: 1px solid white;
padding: 0px 0px 0px 5px; /* [上][右][下][左] */
vertical-align: middle; /* テーブルの中身を上寄せにする。tableタブではなく、tdタブで指定しないと効かない */
}
td:nth-child(1){ width: 220px; }
td:nth-child(2){ width: 40px; }
}
&.is-counter{
th,td{
text-align: left;
height: 20px;
}
}
&.is-message{
text-align: center;
color: #aaaaaa; /* 文字の色 */
font-weight: lighter; /* 文字の太さ normal, bold, lighter */
line-height: 120%;
background-color: #222222;
th,td{
padding: 5px 5px 5px 5px; /* [上][右][下][左] */
height: 30px;
vertical-align: middle;
border: 1px solid white;
}
td:nth-child(1){ width:70px; }
td:nth-child(2){ width:120px; text-align:left; }
td:nth-child(3){ text-align:left; }
}
&.is-message222{
text-align: left;
color: #aaaaaa; /* 文字の色 */
font-weight: lighter; /* 文字の太さ normal, bold, lighter */
line-height: 160%;
background-color: #222222;
th,td{
padding: 5px 5px 5px 5px; /* [上][右][下][左] */
height: 30px;
vertical-align: middle;
border: 1px solid white;
}
}
&.is-kaisya-setumei{
text-align: left;
color: #aaaaaa;
font-weight: lighter; /* 文字の太さ normal, bold, lighter */
line-height: 120%;
background-color: rgba(0, 0, 0, 0.8);
th,td{
padding: 5px 5px 5px 5px; /* [上][右][下][左] */
height: 30px;
vertical-align: middle;
border: 1px solid white;
word-break: break-all; /* 長い単語やURLも強制的に折る */
width: 45px; /* 900 / 25 = 45 */
}
tr:nth-of-type(2){ td:nth-child(n+7) { text-align:center; } } /* とある列の、1個目以降から全部 */
/* tr:nth-of-type(3){ td:nth-child(n+1):nth-child(-n+2) { text-align:center; width:160px; } } /* とある列の、1個目から2個目まで */
/* tr:nth-of-type(3){ td:nth-child(3) ) { text-align:center; width:140px; } } /* とある列の、1個目から2個目まで */
}
&.is-table-last{
background-color: rgba(0, 0, 0, 0.8);
font-size: medimu; /* xx-small x-small small medium large x-large xx-large xxx-large */
font-weight: normal; /* 文字の太さ normal, bold, lighter */
td:nth-child(1){ width: 200px; } /* 一列目 */
tr,th,td{
text-align: left;
height: 24px;
vertical-align: middle; /* テーブルの中身を上寄せにする。tableタブではなく、tdタブで指定しないと効かない */
}
}
}
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
img{
border: solid 0px black;
margin: 0px 0px 0px 0px; /* [上][右][下][左] */
&.is-study-sample{ width:200px; }
&.is-tama{ width:200px; height:227px; float:left; padding:0px 20px 0px 0px; }
&.is-58{ width:99%; }
&.is-475{ width:475px; }
&.is-200{ width:200px; }
&.is-280{ width:280px; }
}
.zoom{
width:200px; /* これを指定しないと、ズーム領域にカーソルが入ると拡大してしまう */
}
.zoom img{
width:200px;
transition-property:width; /* アニメーションさせるCSSプロパティを指定します（例: background-color）*/
transition-duration:0.3s; /* 変化にかかる時間を指定します（例: 2s）。*/
transition-timing-function:linear; /* 変化の速度を指定します（例: ease, linear）。*/
transition-delay:0s; /* アニメーション開始までの遅延時間を指定します（例: 1s）。*/
}
.zoom:hover img{ width:888px; }
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
table.zaku-zaku{
border: 1px solid white; /* 外枠 */
border-collapse: collapse; /* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定する */
/* collapse 隣接するセルの枠線を共有して表示する */
/* separate 隣接するセルの枠線を間隔をあけて表示する（枠線非表示でも間隔があく */
margin: 0px 0px 30px 0px; /* マージン・パディング [上][右][下][左] */
background-color: rgba(0, 0, 0, 0.8);
th, td { border:1px solid white; }
font-size: medium; /* xx-small x-small small medium large x-large xx-large xxx-large */
/* 欄が多すぎてスマホだと360収まらないので、緊急措置としてx-small固定にした */
word-break: break-all; /* 単語を折る（推奨されない方式）*/
}
#zaku-iciran-top{
background-image: url("a-zeon-mark-3.png");
background-size: contain; /* 背景画像の大きさ */
background-repeat: no-repeat; /* 背景画像は繰り返さない */
background-position: right top; /* 背景画像は中央の上 */
text-align: left;
padding: 10px 0px 10px 10px; /* マージン・パディング [上][右][下][左] */
transition: 0.9s; /* 変化時間 */
animation: ControlAAAXXX 3.0s; /* animation CALL */
animation-iteration-count: infinite;
}
@keyframes ControlAAAXXX {
0% { color:yellow; background-color: black; }
100% { color:white; background-color: blue; }
}
/*-------------------------------------------------------------------------------------------*/
@keyframes animeSW111-engine {
0% { color: #222200; }
100% { color: #ffff00; }
}
#Start-off-phase{
display: none;
}
#table-waku{
table, th, td { border:3px solid white; }
}
#table-game{
font-weight: normal; /* 文字の太さ normal, bold, lighter */
}
#moji-subtitle{
font-family: "Arial";
color: white; /* 文字の色 */
font-weight: lighter; /* 文字の太さ normal, bold, lighter */
font-size: small; /* xx-small x-small small medium large x-large xx-large xxx-large */
line-height: 100%;
}
#moji-futi{ /* など */
text-shadow: 3px 3px 3px white, -3px -3px 3px white, /* https://lpeg.info/html/css_border.html CSSでテキスト文字の周りを縁取りする方法 */
-3px 3px 3px white, 3px -3px 3px white,
3px 0px 3px white, -3px -0px 3px white,
0px 3px 3px white, 0px -3px 3px white;
}
#moji-small{ /*
など */
font-size: small; /* xx-small x-small small medium large x-large xx-large xxx-large */
}
#haikei-nuri{ /*
など */
background-color:#aaaaaa
}
#cat-line{
filter: brightness(80%);
}
h4{
text-align: center;
font-size: xxx-large; /* xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large */
font-family: "メイリオ";
width: 358px; /* 横幅400pxを5秒間で繰り返す */
font-weight: bold;
line-height: 120%;
margin: 10px 0px 0px 0px; /* [上][右][下][左] */
font-style: normal;
background-size: 500% 100%;
background-image: linear-gradient(
70deg, /* 光の角度 */
yellow 45%, /*--アニメーション後の文字色--*/
blue 50%, /*--アニメーション中の文字色--*/
yellow 55% /*--アニメーション前の文字色--*/
);
background-clip: text;
color: transparent;
animation: shine 2s infinite; /* アニメーションの速さ＆無限ループ */
}
@keyframes shine{ 0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
iframe {
width: 350px; /* 実際の画面より+30しないとスクロールバーがでてしまう */
height: 430px;
border: 0px solid yellow;
transform: scale(1); /* 0.5倍 */
transform-origin: 0 0; /* 左上を起点 */
}
/*********************************************************************************************************** 点滅 使い方 */
.blink{
animation: blink 1s ease infinite;
}
@keyframes blink{
0% {opacity: 0;}
100% {opacity: 1;}
}
/********************************************************************* 普通の文字などにアニメ付けるサンプル。動作確認済みだが、次のコンパネのオープンでは効かない */
/*
animation: ControlAAA 3.0s;
animation-iteration-count: infinite;
}
@keyframes ControlAAA {
0% { color:#aaaaaa; background-color: navy; }
100% { color:#ffffff; background-color: blue; }
}
*/
/*************************************************************************************************/
/*
https://zero-plus.io/media/fix-background-position/
background-positionは背景画像の位置を指定するプロパティです。
背景画像の表示位置を調整したり、背景画像を重ねたりといった使い方ができます。
*/
.testBG{
background-image: url("a2.png"), url("a2.png"); /*画像のパスを複数指定してpositionも複数指定すれば、その数だけ表示される */
width: 300px; /*画像の高さではなく、表示領域の大きさ。なのでこの値が100、犬が100幅、X座標が20だと、犬の右20切れる */
height: 150px; /*画像の高さではなく、表示領域の大きさ。なのでこの値が100、犬が100高、Y座標が20だと、犬の下20切れる */
background-repeat: no-repeat;
background-position: 30px 30px, 50% 50%; /*要素の左端から20px、要素の上端から30pxの位置に背景画像を表示 */
/*また%指定だと、その位置が左端ではなく中央になるように表示、なので100%だと左端の意味だと画像が切れるが、中央表示の意味なので右寄せになる */
/*
px ピクセル
% 親要素に対する割合
vh ビューポート（画面サイズ）の高さに対する割合。100vhは画面の高さと同じ（100%）を表す
vw ビューポートの幅に対する割合
vmin 画面の高さか幅の小さい方に対する割合
vmax 画面の高さか幅の大きい方に対する割合
*/
}
/* 幅900px以上 **********************************************************************/
@media screen and (min-width:900px) {
.mode-pc { display: } /* inline から空白に変えたら、枠線の変なのが消えた */
.mode-sm { display: none; }
table{ width: 900px;
}
table.top{
/* height: 30px; /* スマホモードの時、最初のテーブルに高さを与え、文字幅で画面がぶれないようにする */
}
:root {
--anime-haba: 600px; /* スマホ幅は360だが、10くらい減らさないと回転アニメにより画面が横ブレする */
--star-wars-scroll-end: -1300px /* スターウォーズスクロールの終点位置 */
}
}
/* 幅899まで *********************************************************************/
@media screen and (max-width:899px) {
.mode-pc { display: none; }
.mode-sm { display: } /* inline から空白に変えたら、枠線の変なのが消えた */
table{ max-width: 100%; /* 横幅の最大値 */
min-width: 360px; /* 横幅の最小値 */
}
table.top{
/* height: 100px; /* スマホモードの時、最初のテーブルに高さを与え、文字幅で画面がぶれないようにする */
}
:root {
--anime-haba: 350px; /* スマホ幅は360だが、10くらい減らさないと回転アニメにより画面が横ブレする */
--star-wars-scroll-end: -2000px /* スターウォーズスクロールの終点位置 */
}
table.is-sw111a{
font-size: 40px;
}
img{
&.is-500{ width: 100%; }
&.is-475{ width: 100%; }
}
}
/* 幅1800px以上 **********************************************************************/
@media screen and (min-width:1800px) {
/*
.contentA,.contentB{
width: 50%;
}
*/
.contentA{
width: 900px;
float: left;
margin: 0 0 0 30px; /* マージン [上][右][下][左] */
}
.contentB{
width: 900px;
float: right;
margin: 0 30px 0 0; /* マージン [上][右][下][左] */
}
}
/* 幅1799まで *********************************************************************/
@media screen and (max-width:1799px) {
.contentA,.contentB{
width: 100%;
}
.contentA{
float: left;
}
.contentB{
float: right;
}
}