:root{ --base-font-size: medium; /* xx-small x-small small medium large x-large xx-large xxx-large */ --base-kaigyouhaba: 160%; --base-font-color: black; --base-link-font-color: blue; --base-haikei-gazou: url(g-hinode.png); --base-hangyojin: url(g-hangyojin.gif); --base-haikei: white; --base-haikei-table: transparent; /* 透明 */ --FlagMAGURO: 123456789; --FlagHANGYOJIN: 123456789; --FlagMoJi-pika: 123456789; } /***********************************************************************************************************************************/ .ss:link{ color:var(--base-link-font-color); text-decoration:none; font-weight:normal; } /* 未訪問のリンク */ .ss:visited{ color:var(--base-link-font-color); text-decoration:none; font-weight:normal; } /* 訪問済みのリンク */ .ss:hover{ color:red; text-decoration:underline; font-weight:bold; } /* カーソル直上 */ .ss:active{ color:red; text-decoration:none; font-weight:bold; } /* 押した瞬間 */ /***********************************************************************************************************************************/ button{ font-size: var(--base-font-size); background-color: mediumblue; color: white; border: none; padding: 0px 0px 0px 0px; /* パディング [上][右][下][左] 要素の内部に余白を作成 */ margin: 2px 0px 0px 0px; /* マージン [上][右][下][左] 要素の外部に余白を作成 */ vertical-align: middle; /* 文字の縦(垂直)方向の位置を指定 */ width: 146px; min-height: 30px; /* 最小でも25pxにして、英語と日本語の高さを揃える */ border-radius: 5px; /* 四辺ふちどり 5px */ cursor: pointer; transition: background-color 0.3s ease; &.is-ctrl{ background-color: black; } &.is-wide{ width:297px; } &.is-min{ width:71px; } } button:hover{ background-color: red; &.is-ctrl{ background-color: black; } } button:active{ background-color: white; &.is-ctrl{ background-color: black; } } /***********************************************************************************************************************************/ html{ color: var(--base-font-color); /* 文字の色 */ font-size: var(--base-font-size); /* 文字の大きさ */ line-height: var(--base-kaigyouhaba); /* 改行幅 */ letter-spacing: normal; /* 文字間隔 normal 1px 0.1em */ word-spacing: normal; /* 単語間隔 */ font-weight: normal; /* 文字の太さ normal bold lighter */ font-style: normal; /* スタイル 標準（normal）イタリック体（italic）斜体（oblique） */ font-family: "Arial","メイリオ","sans-serif"; } body{ background-color: var(--base-haikei); /* 背景色 */ margin: 0px 0px 0px 0px; /* マージン [上][右][下][左] */ list-style-position: outside; /* リスト表示の位置指定 inside; outside; */ background-image: var(--base-haikei-gazou); background-repeat: no-repeat; background-position: center top; background-blend-mode: none; /* background-blend-mode は、その要素にある「背景」の重なり方（描画）を制御するプロパティです。「背景画像」と「背景色」が重なったときの表示の挙動が変わります。*/ /* background-blend-mode: overlay; は、「背景色」を「背景画像」にかぶせて表示したような効果が出ます。 */ background-size: auto; /* 背景画像の大きさ */ /* auto 元の大きさのまま */ /* contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。 */ /* cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。 */ /* 数値(px) 明示的にpxで大きさを調整します。 */ /* 数値(%) 要素に対しての割合で指定します。 */ background-attachment: local; /* 背景画像をスクロールさせるか？ */ /* scroll 背景を要素自身に固定。要素内をスクロールしても背景は固定 */ /* fixed 背景を表示領域に固定。ページをスクロールしても背景は固定 */ /* local 背景をコンテンツに固定。背景も一緒にスクロールする。 */ } table{ margin: 5px 0px 5px 0px; /* マージン[上][右][下][左] */ /* tableとtableの上下を開ける */ border: 0px solid black; /* 外枠 */ border-collapse: collapse; /* collapse:セル同士の間に間隔を空けない separate:間隔をあけて表示する（枠線非表示でも間隔があく */ background-color: var(--base-haikei-table); th,td{ /* tableの基本構造は、パディング無し、左寄せ */ text-align: left; /* td,td以降でないと、パディング・文字寄せ等、効かない */ vertical-align: middle; /* 文字の縦(垂直)方向の位置を指定 */ } &.is-header{ background-image: var(--base-hangyojin); background-size: contain; background-repeat: no-repeat; tr,th,td{ text-align: right; padding: 0px 0px 0px 0px; /* それっぽいの、すべて設定しても、ボタンとボタンの間隔があく */ margin: 0px 0px 0px 0px; border: 0px solid black; border-collapse: collapse; border-spacing: 0px; } } &.is-mokuji{ th,td{ border: 1px solid black; } td{ height: 30px; } td:nth-child(1){ width: 350px; } } } h1{ font-size: xx-large; /* xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large */ text-align: center; font-weight: bold; line-height: 120%; margin-top: 0; margin-bottom: 0; font-style: normal; background-size: 200% 100%; /* 白が走る速度 */ background-image: linear-gradient( 70deg, /* 光の角度 */ black 45%, /*--アニメーション後の文字色--*/ white 50%, /*--アニメーション中の文字色--*/ black 55% /*--アニメーション前の文字色--*/ ); background-clip: text; color: transparent; animation: shine 2s; /* アニメーションの速さ */ animation-iteration-count: var(--FlagMoJi-pika); /* アニメーションの回数 */ } h2{ font-size: large; /* xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large */ text-align: center; font-weight: normal; line-height: 120%; margin-top: 0; margin-bottom: 0; font-style: normal; } ul{ margin: 0px 0px 0px 0px; /* マージン [上][右][下][左] */ padding: 0px 0px 0px 30px; /* パディング [上][右][下][左] */ list-style-position: outside; /* リスト表示の位置指定 inside; outside; */ } img{ border: solid 0px black; margin: 0px 0px 0px 0px; /* マージン [上][右][下][左] */ vertical-align: top; /* これを付けることで、img/video表示後のスペースを防ぐ */ } video{ border: solid 0px black; width: 100%; vertical-align: top; /* これを付けることで、img/video表示後のスペースを防ぐ */ } /* 幅900px以上 **********************************************************************/ @media screen and (min-width:900px) { .mode-pc { display: } /* 最初は inlineだったが、blockやinline-blockに変えてもうまくいかず、空白だとよくなった */ .mode-sm { display: none; } table{ max-width: 900px; /* 横幅の最大値 */ min-width: 900px; /* 横幅の最小値 つまりPC画面ではテーブル幅1000に固定 */ } } /* 幅899まで *********************************************************************/ @media screen and (max-width:899px) { .mode-pc { display: none; } .mode-sm { display: } table{ width: 100%; } }