/***************************************************************************************** 文字の大きさ xx-small x-small small medium large x-large xx-large xxx-large マージン等の順番 [上][右][下][左] border: 0px solid black; ******************************************************************************************/ :root{ --base-font-size: medium; --base-kaigyouhaba: 160%; --base-font-color: #cccccc; --base-link-font-color: yellow; --base-haikei: #262522; --base-haikei-table: #302e2b; --Button-PageSet-1: gray; /* ライトモード */ --Button-PageSet-2: yellow; /* ダークモード */ --Button-PageSet-3: yellow; /* 文字標準 */ --Button-PageSet-4: gray; /* 文字大1 */ --Button-PageSet-5: gray; /* 文字大2 */ --Button-PageSet-6: yellow; /* 名前の変更 */ } /***********************************************************************************************************************************/ .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; } /* 押した瞬間 */ ul { border:none; margin:0px 0px 0px 1em; padding:0px 0px 0px 0px; } ul li{ margin:0px 0px 0px 1em; padding:0px 0px 0px 0px; } /* １文字 = 1em デフォルトで一文字分下げられている模様 */ ol { border:none; margin:0px 0px 0px 1em; padding:0px 0px 0px 0px; } /* ナンバリング */ ol li{ margin:0px 0px 0px 1em; padding:0px 0px 0px 0px; } p{ margin-bottom: 0px; /* 段落間の余白 pタグはHTMLで段落を表現するための基本的な要素です。 */ text-indent: 0em; /* 最初の行の字下げ 1文字 = 1em */ padding: 0px 5px 0px 5px; } span.smaller{ font-size:smaller; } span.larger{ font-size:larger; } span.is-red{ font-size:larger; color:red; } span.is-message{ font-size:large; color:navy; font-weight:bold; } span.is-shadow{ text-shadow:3px 3px 3px yellow, -3px -3px 3px yellow, -3px 3px 3px yellow, 3px -3px 3px yellow, 3px 0px 3px yellow, -3px -0px 3px yellow, 0px 3px 3px yellow, 0px -3px 3px yellow; } div{ &.is-Right{ text-align: right; } &.is-Hidden{ display: none; } } .container{ /* コンテナ化 */ display: flex; /* 画像の横に、文字を横並びにする用 */ align-items: center; /* 縦方向の中央揃え */ gap: 10px; } /***********************************************************************************************************************************/ button{ padding: 0px 0px 0px 0px; margin: 2px 0px 0px 0px; border: none; border-radius: 5px; /* 縁取り */ min-width: 146px; min-height: 30px; font-size: var(--base-font-size); background-color: #222222; vertical-align: middle; /* 文字の縦(垂直)方向の位置を指定 */ cursor: pointer; transition: background-color 0.5s ease, color 0.5s ease; &.is-buttonKen{ margin: 0px 0px 0px 0px; min-width: 50px; min-height: 20px; } } button:hover{ background-color: #aa0000; } button:active{ background-color: white; } #Button-PageSet-1{ color: var(--Button-PageSet-1); } /* ライトモード */ #Button-PageSet-2{ color: var(--Button-PageSet-2); } /* ダークモード */ #Button-PageSet-3{ color: var(--Button-PageSet-3); } /* 文字標準 */ #Button-PageSet-4{ color: var(--Button-PageSet-4); } /* 文字大1 */ #Button-PageSet-5{ color: var(--Button-PageSet-5); } /* 文字大2 */ #Button-PageSet-6{ color: var(--Button-PageSet-6); } /* 文字大2 */ /***********************************************************************************************************************************/ 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） */ list-style-position:outside; /* リスト表示の位置指定 inside; outside; */ /* font-family: "Arial","メイリオ","sans-serif"; 無指定の方が綺麗 */ } body{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: var(--base-haikei); } table{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: none; border-collapse: collapse; /* collapse:セル同士の間に間隔を空けない separate:間隔をあけて表示する（枠線非表示でも間隔があく */ background-color: var(--base-haikei-table); th,td{ text-align: left; /* td,td以降でないと、パディング・文字寄せ等、効かない */ vertical-align: middle; /* 文字の縦(垂直)方向の位置を指定 */ } tr,td,th{ height: 20px; } &.is-mokuji{ td{ border:1px solid black; } td:nth-of-type(1){ width:70px; text-align:center; } /* 1列目 */ td:nth-of-type(2){ width:285px; text-align:left; padding:0px 0px 0px 5px; } /* 2列目 */ td:nth-of-type(3){ width:300px; text-align:left; padding:0px 0px 0px 5px; } /* 3列目 */ td:nth-of-type(4){ border-top:none; border-bottom:none; border-right:none; } /* 4列目 */ tr:nth-of-type(1){ td:nth-of-type(-n+3){ text-align:center; font-weight:bold; }} /* 1行目の1〜3までのtd。trよりtdが上なので、tdを再指定しないといけない */ } &.is-honbun{ td{ border:1px solid black; } } } img{ max-width: 100%; /* 基準：原寸大表示なおかつ画面幅まで */ width: auto; /* 基準：原寸大表示なおかつ画面幅まで */ border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /*clip-path: inset(0 50% 0 0); /* 左半分だけ表示 */ /*clip-path: inset(0 0 0 50%); /* 右半分だけ表示 */ } h1{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 2.5rem; /* 文字サイズ　親要素の２倍 */ line-height: 1.0; /* 改行幅　　　フォントサイズの1.5倍 */ font-weight: bold; /* 文字の太さ　normal bold lighter */ text-align: center; } /* 幅900px以上 **********************************************************************/ @media screen and (min-width:900px) { .mode-pc { display: } /* 最初は inlineだったが、blockやinline-blockだと枠線が変に表示され、空白だとよくなった */ .mode-sm { display: none; } table{ width: 900px; } } /* 幅899まで *********************************************************************/ @media screen and (max-width:899px) { .mode-pc { display: none; } .mode-sm { display: } table{ width: 100%; } }