UNPKG

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