UNPKG

6.93 kBCSSView Raw
1/*! Neo's Normalize v1.0.13 : Neo (@Neos21) http://neo.s21.xrea.com/ */
2
3
4/* ==================================================
5 * ページ全体
6 * ================================================== */
7
8/* 変数定義 */
9:root {
10 --nn-grey-bg: #f2f4f6;
11 --nn-grey-border: #d2d4d6;
12 --nn-green-bg: #ddffee;
13 --nn-green-border: #00ddaa;
14 --nn-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
15 --nn-serif: Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
16 --nn-monospace: MeiryoKe_Gothic, "Ricty Diminished", Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
17}
18
19/* 全ての要素のボックスサイズの計算方法を border-box にする */
20*,
21::before,
22::after {
23 box-sizing: border-box;
24}
25
26/* ページ全体のスタイルを設定する */
27html {
28 /* var(--nn-sans-serif) */
29 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
30 /* 常に縦スクロールバーを表示する */
31 overflow-y: scroll;
32 cursor: default;
33 /* Chrome で下線部の文字切れを調整する */
34 text-decoration-skip-ink: none;
35 /* iOS でフォントサイズの調整を避ける */
36 -webkit-text-size-adjust: 100%;
37 /* iOS で下線部の文字切れを調整する */
38 -webkit-text-decoration-skip: objects;
39 /* iOS で慣性スクロールを有効にする */
40 -webkit-overflow-scrolling: touch;
41}
42
43/* ページの基準となるスタイルを設定する */
44body {
45 margin: 0;
46 line-height: 1.7;
47 overflow-wrap: break-word;
48 /* IE で overflow-wrap が効かないため指定する */
49 word-wrap: break-word;
50}
51
52/* IE でブロック要素として扱われない要素を設定しておく */
53details, main {
54 display: block;
55}
56
57
58/* ==================================================
59 * マージン関連
60 * ================================================== */
61
62/* 上下のマージンを設定する */
63h1, h2, h3, h4, h5, h6, p, hr,
64dl, dt, dd, ol, ul,
65address, details, figcaption, fieldset, form, pre, summary, table {
66 margin-top: 0;
67 margin-bottom: 1rem;
68}
69
70/* 下マージンをなくす : 入れ子のリスト・子要素のマージンと親要素のパディングとの衝突回避 */
71ol ol, ol ul,
72ul ol, ul ul,
73blockquote > :last-child,
74fieldset > :last-child,
75pre > :last-child {
76 margin-bottom: 0;
77}
78
79/* 左マージンを付ける */
80dd, li {
81 margin-left: 2.5em;
82}
83
84/* 引用ブロック・図表はまとめて調整する */
85blockquote, figure {
86 margin: 0 0 1rem 2.5em;
87}
88
89/* リストの左パディングをなくす */
90ol, ul {
91 padding-left: 0;
92}
93
94
95/* ==================================================
96 * フォント関連
97 * ================================================== */
98
99/* 見出しサイズを調整する */
100h1 {
101 font-size: 2em;
102}
103
104h2 {
105 font-size: 1.7em;
106}
107
108h3 {
109 font-size: 1.5em;
110}
111
112h4 {
113 font-size: 1.2em;
114}
115
116h5, h6 {
117 font-size: 1em;
118}
119
120/* 太字にする */
121caption, dt, em, th {
122 font-weight: bold;
123}
124
125/* 斜体にしない */
126address, dfn, em, var {
127 font-style: normal;
128}
129
130/* 等幅フォントにする */
131pre, code, kbd, samp, var, textarea {
132 /* var(--nn-monospace) */
133 font-family: MeiryoKe_Gothic, "Ricty Diminished", Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
134}
135
136/* IE でフォントサイズが小さくなるのを直す */
137code, kbd, samp, var {
138 font-size: 1em;
139}
140
141/* フォーム部品のフォントは親要素から継承させる */
142button, input, optgroup, select {
143 /* 要素の余白をなくす */
144 margin: 0;
145 font-family: inherit;
146 font-size: inherit;
147}
148
149/* テキストエリアはフォントサイズのみ親要素から継承させる */
150textarea {
151 margin: 0;
152 font-size: inherit;
153}
154
155/* 注釈のサイズを調整する */
156small {
157 font-size: .8em;
158}
159
160/* 下付き文字・上付き文字のサイズ・位置を調整する */
161sub, sup {
162 position: relative;
163 font-size: .75em;
164 vertical-align: baseline;
165}
166
167sub {
168 bottom: -.25em;
169}
170
171sup {
172 top: -.5em;
173}
174
175
176/* ==================================================
177 * 個別スタイル設定
178 * ================================================== */
179
180/* 引用ブロック */
181blockquote {
182 /* var(--nn-green-border) */
183 border: 1px solid #00ddaa;
184 border-radius: 4px;
185 padding: 1em;
186 /* var(--nn-green-bg) */
187 background: #ddffee;
188}
189
190/* 等幅ブロック */
191pre {
192 /* var(--nn-grey-border) */
193 border: 1px solid #d2d4d6;
194 border-radius: 4px;
195 padding: 1em;
196 /* var(--nn-grey-bg) */
197 background: #f2f4f6;
198 overflow: auto;
199 overflow-wrap: normal;
200 /* IE・Edge 向け */
201 word-wrap: normal;
202 word-break: keep-all;
203 white-space: pre;
204}
205
206/* テーブル */
207table {
208 border-collapse: collapse;
209}
210
211/* テーブルセル */
212td, th {
213 /* var(--nn-grey-border) */
214 border: 1px solid #d2d4d6;
215 padding: .25em .5em;
216}
217
218/* テーブル見出し */
219th {
220 text-align: center;
221 /* var(--nn-grey-bg) */
222 background: #f2f4f6;
223}
224
225/* 水平線 */
226hr {
227 border: 0;
228 /* var(--nn-grey-border) */
229 border-bottom: 1px solid #d2d4d6;
230}
231
232/* フォームグループ */
233fieldset {
234 /* var(--nn-grey-border) */
235 border: 1px solid #d2d4d6;
236 border-radius: 4px;
237}
238
239/* 図表 */
240figure {
241 /* var(--nn-grey-border) */
242 border-left: .5em solid #d2d4d6;
243 padding-left: 1em;
244}
245
246/* 要約 */
247summary {
248 cursor: pointer;
249}
250
251/* 略語・定義 */
252abbr[title], dfn[title] {
253 /* IE・Edge 向け */
254 text-decoration: underline;
255 text-decoration: underline dotted;
256 cursor: help;
257}
258
259/* コード */
260:not(pre) > code,
261:not(pre) > samp,
262:not(pre) > kbd,
263:not(pre) > var {
264 margin: 0 .25em;
265 /* var(--nn-grey-border) */
266 border: 1px solid #d2d4d6;
267 border-radius: 4px;
268 padding: .1em .25em;
269 /* var(--nn-grey-bg) */
270 background: #f2f4f6;
271}
272
273/* 引用 */
274q {
275 quotes: "“" "”" "‘" "’";
276}
277
278q::before {
279 content: open-quote;
280}
281
282q::after {
283 content: close-quote;
284}
285
286/* 隣接するテキストを上揃えにする */
287button, input, select, textarea {
288 vertical-align: top;
289}
290
291/* チェックボックスとラジオボタンは隣接するテキストを垂直中央揃えにする */
292[type="checkbox"], [type="radio"] {
293 vertical-align: middle;
294}
295
296/* Mac でのボタン類の表示仕様を揃える */
297button, [type="button"], [type="reset"], [type="submit"] {
298 -webkit-appearance: button;
299}