247 lines
4.0 KiB
CSS
247 lines
4.0 KiB
CSS
/* トップのバナー */
|
||
|
||
.top-banner {
|
||
max-width: 780px;
|
||
width: calc(100vw - 48px);
|
||
height: auto;
|
||
margin: 8px;
|
||
}
|
||
|
||
/* コード */
|
||
|
||
/* 一般のコードスタイリング */
|
||
/* 注：一部の宣言はインラインコード専用。 */
|
||
/* 'pre > code' でどれなのか確認できる。 */
|
||
code {
|
||
/* lang="ja" は Cousine （Tor Browser）または他のフォントを必要とする。 */
|
||
/* lang="en" ではフォントサイズは monospace または -moz-fixed
|
||
/* の場合に 12px で、 Cousine またはリスト値の場合に 16px。 */
|
||
font-family: Cousine, monospace;
|
||
color: purple;
|
||
background-color: palegoldenrod;
|
||
border-radius: 4px;
|
||
padding: 2px;
|
||
word-wrap: anywhere;
|
||
}
|
||
|
||
pre {
|
||
background-color: thistle;
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
padding-top: 1em;
|
||
padding-bottom: 1em;
|
||
overflow-x: auto;
|
||
white-space: pre-wrap;
|
||
max-width: 50em; /* 80 文字 */
|
||
}
|
||
|
||
/* ディスプレイコードのためにインラインコード専用スタイリングをもとに戻す */
|
||
pre > code {
|
||
color: unset;
|
||
background-color: unset;
|
||
border-radius: unset;
|
||
padding: unset;
|
||
}
|
||
|
||
/* キーボードキー */
|
||
|
||
kbd {
|
||
color: white;
|
||
font-family: sans-serif;
|
||
font-size: 85%;
|
||
border-radius: 4px;
|
||
border-block-style: outset;
|
||
background-color: darkslategrey;
|
||
padding-left: 3px;
|
||
padding-right: 3px;
|
||
}
|
||
|
||
/* 表と画像 */
|
||
|
||
caption, figcaption {
|
||
color: maroon;
|
||
font-size: 80%;
|
||
}
|
||
|
||
/* 表 */
|
||
|
||
table {
|
||
border-collapse: collapse;
|
||
border-color: black;
|
||
border-style: solid;
|
||
border-width: 2px;
|
||
}
|
||
|
||
th, td {
|
||
border-color: gray;
|
||
border-style: solid;
|
||
border-width: 1px;
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
thead {
|
||
border-bottom-color: black;
|
||
border-bottom-style: solid;
|
||
border-bottom-width: 2px;
|
||
background-color: burlywood;
|
||
}
|
||
|
||
th:hover {
|
||
background-color: chocolate;
|
||
}
|
||
|
||
tr.even {
|
||
background-color: bisque;
|
||
}
|
||
|
||
tbody > tr:hover {
|
||
background-color: lightgreen;
|
||
}
|
||
|
||
td:hover {
|
||
background-color: limegreen;
|
||
}
|
||
|
||
caption {
|
||
margin-top: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* 画像 */
|
||
|
||
img {
|
||
/* alt テキスト */
|
||
color: teal;
|
||
font-style: italic;
|
||
/* パッディング */
|
||
/* 注：背景色が白の画像が必要。 */
|
||
border-radius: 4px;
|
||
padding: 4px;
|
||
background-color: white;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
img.display {
|
||
border-width: 3px;
|
||
border-style: solid;
|
||
border-color: lightgreen;
|
||
border-radius: 8px;
|
||
max-width: 90vw;
|
||
max-height: 400px;
|
||
width: auto;
|
||
height: auto;
|
||
margin: 4px;
|
||
}
|
||
|
||
img.display:hover {
|
||
border-color: limegreen;
|
||
}
|
||
|
||
figcaption {
|
||
margin-top: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* リスト */
|
||
|
||
li {
|
||
margin-top: 0.25em;
|
||
margin-bottom: 0.25em;
|
||
}
|
||
|
||
/* 順序リストのネスト番号付け */
|
||
|
||
ol {
|
||
counter-reset: item;
|
||
}
|
||
ol > li {
|
||
counter-increment: item;
|
||
}
|
||
ol > li::marker {
|
||
content: counters(item, ".") ". \200b";
|
||
}
|
||
|
||
.footnotes ol {
|
||
counter-reset: foot;
|
||
}
|
||
.footnotes ol > li {
|
||
counter-increment: foot;
|
||
}
|
||
.footnotes ol > li::marker {
|
||
content: counter(foot) ". \200b";
|
||
}
|
||
|
||
/* main 内の h1〜h4 見出しの番号付け */
|
||
|
||
main h1::before, main h2::before, main h3::before, main h4::before {
|
||
font-size: 80%;
|
||
color: green;
|
||
}
|
||
|
||
main h1 {
|
||
counter-increment: section1;
|
||
counter-reset: section2 section3 section4;
|
||
}
|
||
|
||
main h1::before {
|
||
content: counter(section1) ". ";
|
||
}
|
||
|
||
main h2 {
|
||
counter-increment: section2;
|
||
counter-reset: section3 section4;
|
||
}
|
||
|
||
main h2::before {
|
||
content: counter(section1) "." counter(section2) ". ";
|
||
}
|
||
|
||
main h3 {
|
||
counter-increment: section3;
|
||
counter-reset: section4;
|
||
}
|
||
|
||
main h3::before {
|
||
content: counter(section1) "." counter(section2) "." counter(section3) ". ";
|
||
}
|
||
|
||
main h4 {
|
||
counter-increment: section4;
|
||
}
|
||
|
||
main h4::before {
|
||
content: counter(section1) "." counter(section2) "." counter(section3) "." counter(section4) ". ";
|
||
}
|
||
|
||
/* 用語集 */
|
||
|
||
dt {
|
||
font-weight: bold;
|
||
margin-top: 2.0em;
|
||
}
|
||
|
||
dd > p:not(:first-child) {
|
||
color: darkslategray;
|
||
font-size: 90%;
|
||
}
|
||
|
||
/* 脚注 */
|
||
|
||
.footnotes {
|
||
font-size: 85%;
|
||
}
|
||
|
||
/* その他 */
|
||
|
||
/* QR コード */
|
||
.qr {
|
||
image-rendering: crisp-edges;
|
||
}
|
||
|
||
/* 上付き（例：「要確認」） */
|
||
sup > em {
|
||
color: fuchsia;
|
||
}
|
||
|