UNPKG

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