| 1 | <!DOCTYPE html>
|
| 2 | <html lang="ja">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8">
|
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
| 7 | <meta name="robots" content="index, follow">
|
| 8 | <title>Neo's Normalize : @neos21/neos-normalize</title>
|
| 9 | <link rel="stylesheet" href="neos-normalize.css">
|
| 10 | <link rel="icon" href="/favicon.ico">
|
| 11 | <link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">
|
| 12 | <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png" sizes="152x152">
|
| 13 | <style>
|
| 14 |
|
| 15 | #header,
|
| 16 | #main,
|
| 17 | #footer {
|
| 18 | margin: 2rem;
|
| 19 | overflow-y: auto;
|
| 20 | }
|
| 21 |
|
| 22 | #header {
|
| 23 | border-bottom: 1px solid #c7cbcf;
|
| 24 | padding-bottom: 2rem;
|
| 25 | font-size: 2em;
|
| 26 | font-weight: bold;
|
| 27 | text-align: center;
|
| 28 | }
|
| 29 |
|
| 30 | #header a {
|
| 31 | color: inherit;
|
| 32 | text-decoration: none;
|
| 33 | }
|
| 34 |
|
| 35 | #header a:hover {
|
| 36 | text-decoration: underline;
|
| 37 | }
|
| 38 |
|
| 39 | #aside {
|
| 40 | position: fixed;
|
| 41 | top: 0;
|
| 42 | right: 0;
|
| 43 | text-align: right;
|
| 44 | line-height: 1;
|
| 45 | }
|
| 46 |
|
| 47 | #aside input {
|
| 48 | margin-bottom: 4px;
|
| 49 | border: 1px solid #c7cbcf;
|
| 50 | border-radius: 4px;
|
| 51 | padding: 4px 8px;
|
| 52 | font: 100%/1 monospace;
|
| 53 | background: #fff;
|
| 54 | }
|
| 55 |
|
| 56 | .nn-serif {
|
| 57 | font-family: var(--nn-serif);
|
| 58 | }
|
| 59 |
|
| 60 | #footer {
|
| 61 | border-top: 1px solid #c7cbcf;
|
| 62 | padding-top: 2rem;
|
| 63 | text-align: center;
|
| 64 | }
|
| 65 |
|
| 66 | </style>
|
| 67 | <script>
|
| 68 |
|
| 69 | document.addEventListener('DOMContentLoaded', function() {
|
| 70 | const link = document.getElementsByTagName('link')[0];
|
| 71 | const toggleBtn = document.getElementById('toggle');
|
| 72 | const switchBtn = document.getElementById('switch');
|
| 73 | let isEnabled = true;
|
| 74 | let isBeautifyVer = true;
|
| 75 |
|
| 76 |
|
| 77 | toggleBtn.addEventListener('click', function() {
|
| 78 | link.href = isEnabled ? '' : isBeautifyVer ? 'neos-normalize.css' : 'neos-normalize.min.css';
|
| 79 | isEnabled = !isEnabled;
|
| 80 | toggleBtn.value = '[' + (isEnabled ? 'ON' : 'OFF') + '] Toggle Neo\'s Normalize';
|
| 81 | switchBtn.value = (isEnabled ? ('[' + (isBeautifyVer ? 'Beautify' : 'Minify') + '] ') : '') + 'Switch Neo\'s Normalize';
|
| 82 | });
|
| 83 |
|
| 84 |
|
| 85 | switchBtn.addEventListener('click', function() {
|
| 86 | link.href = isBeautifyVer ? 'neos-normalize.min.css' : 'neos-normalize.css';
|
| 87 | isEnabled = true;
|
| 88 | isBeautifyVer = !isBeautifyVer;
|
| 89 | toggleBtn.value = '[ON] Toggle Neo\'s Normalize';
|
| 90 | switchBtn.value = '[' + (isBeautifyVer ? 'Beautify' : 'Minify') + '] Switch Neo\'s Normalize';
|
| 91 | });
|
| 92 | });
|
| 93 |
|
| 94 | </script>
|
| 95 | </head>
|
| 96 | <body>
|
| 97 | <header id="header">
|
| 98 | <a href="https://github.com/Neos21/neos-normalize">Neo's Normalize</a>
|
| 99 | </header>
|
| 100 | <aside id="aside">
|
| 101 | <input type="button" id="toggle" value="[ON] Toggle Neo's Normalize"><br>
|
| 102 | <input type="button" id="switch" value="[Beautify] Switch Neo's Normalize">
|
| 103 | </aside>
|
| 104 | <main id="main">
|
| 105 | <section id="main-section">
|
| 106 | <h1>Neo's Normalize : @neos21/neos-normalize</h1>
|
| 107 | <p>Normalize.css・Bootstrap 4 Reboot の思想を基に、Windows・Mac・iOS の最新ブラウザで必要最小限のノーマライズスタイルを策定する。全ての要素に対するスタイリングを完璧に統一するのではなく、使用頻度の高い要素に限り最低限のスタイリングを行う。</p>
|
| 108 | <p><a href="https://www.npmjs.com/package/@neos21/neos-normalize"><img src="https://img.shields.io/npm/v/@neos21/neos-normalize.svg" alt="NPM Version" title="NPM Version"></a></p>
|
| 109 | <ul>
|
| 110 | <li><a href="neos-normalize.scss">neos-normalize.scss</a></li>
|
| 111 | <li><a href="neos-normalize.css">neos-normalize.css</a> … <code>neos-normalize.scss</code> からトランスパイルしたもの</li>
|
| 112 | <li><a href="neos-normalize.min.css">neos-normalize.min.css</a> … <code>neos-normalize.css</code> を Minify したもの</li>
|
| 113 | </ul>
|
| 114 | <p>本サンプルページはヘッダとフッタをスタイリングし、メイン部分に <code>margin</code> を設定している程度で、それ以外は Neo's Normalize が適用されている。</p>
|
| 115 | <p>CDN は以下。</p>
|
| 116 | <ul>
|
| 117 | <li>
|
| 118 | <a href="https://www.jsdelivr.com/package/npm/@neos21/neos-normalize">jsDelivr</a>
|
| 119 | <ul>
|
| 120 | <li><a href="https://cdn.jsdelivr.net/npm/@neos21/neos-normalize@1.0.15/neos-normalize.min.css">https://cdn.jsdelivr.net/npm/@neos21/neos-normalize@1.0.15/neos-normalize.min.css</a></li>
|
| 121 | </ul>
|
| 122 | </li>
|
| 123 | <li>
|
| 124 | <a href="https://unpkg.com/browse/@neos21/neos-normalize@1.0.15/">unpkg.org</a>
|
| 125 | <ul>
|
| 126 | <li><a href="https://unpkg.com/@neos21/neos-normalize@1.0.15/neos-normalize.min.css">https://unpkg.com/@neos21/neos-normalize@1.0.15/neos-normalize.min.css</a></li>
|
| 127 | </ul>
|
| 128 | </li>
|
| 129 | <li>
|
| 130 | <a href="https://neos21.github.io/neos-normalize/">GitHub Pages</a>
|
| 131 | <ul>
|
| 132 | <li><a href="https://neos21.github.io/neos-normalize/neos-normalize.min.css">https://neos21.github.io/neos-normalize/neos-normalize.min.css</a></li>
|
| 133 | </ul>
|
| 134 | </li>
|
| 135 | <li>
|
| 136 | <a href="https://github.com/Neos21/neos-normalize">Raw GitHub</a>
|
| 137 | <ul>
|
| 138 | <li><a href="https://raw.githubusercontent.com/Neos21/neos-normalize/master/neos-normalize.min.css">https://raw.githubusercontent.com/Neos21/neos-normalize/master/neos-normalize.min.css</a></li>
|
| 139 | </ul>
|
| 140 | </li>
|
| 141 | </ul>
|
| 142 | <section id="supports">
|
| 143 | <h2>検証ブラウザ</h2>
|
| 144 | <ul>
|
| 145 | <li>Chrome (Windows・MacOS)</li>
|
| 146 | <li>Firefox Quantum (Windows・MacOS)</li>
|
| 147 | <li>Edge (Windows)</li>
|
| 148 | <li>IE (Windows)</li>
|
| 149 | <li>Safari (MacOS・iOS)</li>
|
| 150 | </ul>
|
| 151 | </section>
|
| 152 | <section id="toc">
|
| 153 | <h2>Table of Contents</h2>
|
| 154 | <ul>
|
| 155 | <li><a href="#section">Section Elements</a></li>
|
| 156 | <li><a href="#inline">Inline Elements</a></li>
|
| 157 | <li><a href="#block">Block Elements</a></li>
|
| 158 | <li><a href="#list">List Elements</a></li>
|
| 159 | <li><a href="#form">Form Elements</a></li>
|
| 160 | </ul>
|
| 161 | </section>
|
| 162 | <section id="section">
|
| 163 | <h2>Section Elements : Section 2</h2>
|
| 164 | <p>Section 2 Paragraph.</p>
|
| 165 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
| 166 | <p>lorem ipsum (ロレム・イプサム、略してリプサム lipsum ともいう) とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。</p>
|
| 167 | <p>http://www.toolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtexttoolongtext.com/</p>
|
| 168 | <p><b>Lorem ipsum</b> dolor sit amet, <i>consectetur adipiscing elit,</i> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
| 169 | <p>lorem ipsum (ロレム・イプサム、略して<b>リプサム lipsum</b> ともいう) とは、<i>出版、ウェブデザイン、グラフィックデザインなどの諸分野</i>において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。</p>
|
| 170 | <section>
|
| 171 | <h3>Section 3</h3>
|
| 172 | <p>Section 3 Paragraph.</p>
|
| 173 | <p>以下セリフ (明朝) 体。</p>
|
| 174 | <p class="nn-serif"><b>Lorem ipsum</b> dolor sit amet, <i>consectetur adipiscing elit,</i> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
| 175 | <p class="nn-serif">lorem ipsum (ロレム・イプサム、略して<b>リプサム lipsum</b> ともいう) とは、<i>出版、ウェブデザイン、グラフィックデザインなどの諸分野</i>において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。</p>
|
| 176 | <p>以上セリフ (明朝) 体。</p>
|
| 177 | <section>
|
| 178 | <h4>Section 4</h4>
|
| 179 | <p>Section 4 Paragraph.</p>
|
| 180 | <section>
|
| 181 | <h5>Section 5</h5>
|
| 182 | <p>Section 5 Paragrah.</p>
|
| 183 | <section>
|
| 184 | <h6>Section 6</h6>
|
| 185 | <p>Section 6 Paragraph.</p>
|
| 186 | </section>
|
| 187 | <p>Section 5 Paragraph.</p>
|
| 188 | </section>
|
| 189 | <p>Section 4 Paragraph.</p>
|
| 190 | </section>
|
| 191 | <p>Section 3 Paragraph.</p>
|
| 192 | </section>
|
| 193 | <p>Section 2 Paragraph.</p>
|
| 194 | </section>
|
| 195 | <section id="inline">
|
| 196 | <h2>Inline Elements</h2>
|
| 197 | <p>[pgq] : for text-decoration</p>
|
| 198 | <p>
|
| 199 | This is <a href="#">Anchor Text [pgq]</a>.
|
| 200 | This is <em>Emphasis Text</em>.
|
| 201 | This is <strong>Strong Text</strong>.
|
| 202 | This is <dfn title="Definition">Definition Text [pgq]</dfn>.
|
| 203 | This is <abbr title="Abbr">Abbr Text [pgq]</abbr>.
|
| 204 | This is <del>Deleted Text</del>.
|
| 205 | This is <ins>Inserted Text [pgq]</ins>.
|
| 206 | This is <q>Quote Text <q>Inline Quote Text</q> Quote Text</q>.
|
| 207 | This is <small>Small Text</small>.
|
| 208 | </p>
|
| 209 | <p>
|
| 210 | This is <sub>Sub Text</sub>.
|
| 211 | This is <sup>Sup Text</sup>.
|
| 212 | </p>
|
| 213 | <p>
|
| 214 | This is <b>Bold Text</b>.
|
| 215 | This is <i>Italic Text</i>.
|
| 216 | This is <u>Underline Text [pgq]</u>.
|
| 217 | This is <s>Strike Text</s>.
|
| 218 | This is <mark>Marked Text</mark>.
|
| 219 | </p>
|
| 220 | <p>
|
| 221 | This is <code>Code Text</code>.
|
| 222 | This is <var>Variable Text</var>.
|
| 223 | This is <samp>Sample Text</samp>.
|
| 224 | This is <kbd>Keyboard Text</kbd>.
|
| 225 | </p>
|
| 226 | <p>
|
| 227 | This is Time : <time>2018-01-23</time>.
|
| 228 | </p>
|
| 229 | <p>
|
| 230 | This is Ruby :
|
| 231 | <ruby>
|
| 232 | 漢<rp>(</rp><rt>かん</rt><rp>)</rp>
|
| 233 | 字<rp>(</rp><rt>じ</rt><rp>)</rp>
|
| 234 | </ruby>
|
| 235 | </p>
|
| 236 | <p><img src="https://dummyimage.com/100x100/f09/fff.png"> Image</p>
|
| 237 | <p><a href="#"><img src="https://dummyimage.com/100x100/f09/fff.png"></a> Image in Link</p>
|
| 238 | <p>
|
| 239 | <progress>Progress (Alternative)</progress>
|
| 240 | Progress
|
| 241 | </p>
|
| 242 | <figure>
|
| 243 | <figcaption>Fig Caption</figcaption>
|
| 244 | <p><img src="https://dummyimage.com/100x100/09f/fff.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
| 245 | <p>lorem ipsum (ロレム・イプサム、略してリプサム lipsum ともいう) とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。</p>
|
| 246 | <p>Figure Paragraph</p>
|
| 247 | </figure>
|
| 248 | <p>Paragraph</p>
|
| 249 | </section>
|
| 250 | <section id="block">
|
| 251 | <h2>Block Elements</h2>
|
| 252 | <p>Paragraph</p>
|
| 253 | <pre>Pre</pre>
|
| 254 | <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
| 255 | <b>Lorem ipsum</b> dolor sit amet, <i>consectetur adipiscing elit,</i> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
| 256 | lorem ipsum (ロレム・イプサム、略してリプサム lipsum ともいう) とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。
|
| 257 | lorem ipsum (ロレム・イプサム、略して<b>リプサム lipsum</b> ともいう) とは、<i>出版、ウェブデザイン、グラフィックデザインなどの諸分野</i>において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。</pre>
|
| 258 | <pre><code>Pre Code</code></pre>
|
| 259 | <blockquote>
|
| 260 | <p>Blockquote</p>
|
| 261 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
| 262 | <p>lorem ipsum (ロレム・イプサム、略してリプサム lipsum ともいう) とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体 (フォント)、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。</p>
|
| 263 | <p><cite>Cite</cite></p>
|
| 264 | </blockquote>
|
| 265 | <table>
|
| 266 | <caption>Table Caption</caption>
|
| 267 | <thead>
|
| 268 | <tr>
|
| 269 | <th>Header 1</th>
|
| 270 | <th>Header 2</th>
|
| 271 | <th>Header 3</th>
|
| 272 | <th>Header 4</th>
|
| 273 | </tr>
|
| 274 | </thead>
|
| 275 | <tbody>
|
| 276 | <tr>
|
| 277 | <td>Body 1</td>
|
| 278 | <td>Body 2</td>
|
| 279 | <td>Body 3</td>
|
| 280 | <td>Body 4</td>
|
| 281 | </tr>
|
| 282 | <tr>
|
| 283 | <td>Body 1</td>
|
| 284 | <td colspan="2">Colspan</td>
|
| 285 | <td>Body 4</td>
|
| 286 | </tr>
|
| 287 | <tr>
|
| 288 | <td>Body 1</td>
|
| 289 | <td rowspan="2">Rowspan</td>
|
| 290 | <td>Body 3</td>
|
| 291 | <td>Body 4</td>
|
| 292 | </tr>
|
| 293 | <tr>
|
| 294 | <td>Body 1</td>
|
| 295 | <td>Body 3</td>
|
| 296 | <td>Body 4</td>
|
| 297 | </tr>
|
| 298 | <tr>
|
| 299 | <td>Body 1</td>
|
| 300 | <td>Body 2</td>
|
| 301 | <td>Body 3</td>
|
| 302 | <td>Body 4</td>
|
| 303 | </tr>
|
| 304 | </tbody>
|
| 305 | <tfoot>
|
| 306 | <tr>
|
| 307 | <th>Footer 1</th>
|
| 308 | <th>Footer 2</th>
|
| 309 | <th>Footer 3</th>
|
| 310 | <th>Footer 4</th>
|
| 311 | </tr>
|
| 312 | </tfoot>
|
| 313 | </table>
|
| 314 | <p>Horizontal Line</p>
|
| 315 | <hr>
|
| 316 | <p>Horizontal Line</p>
|
| 317 | <details>
|
| 318 | <summary>Summary</summary>
|
| 319 | <p>Details Text</p>
|
| 320 | </details>
|
| 321 | </section>
|
| 322 | <section id="list">
|
| 323 | <h2>List Elements</h2>
|
| 324 | <ul>
|
| 325 | <li>Unordered List 1</li>
|
| 326 | <li>
|
| 327 | Unordered List 2
|
| 328 | <ul>
|
| 329 | <li>Child List 1</li>
|
| 330 | <li>
|
| 331 | Child List 2
|
| 332 | <ul>
|
| 333 | <li>Grand Child List 1</li>
|
| 334 | <li>
|
| 335 | Grand Child List 2
|
| 336 | <ul>
|
| 337 | <li>Great Grand Child List 1</li>
|
| 338 | <li>Great Grand Child List 2</li>
|
| 339 | <li>Great Grand Child List 3</li>
|
| 340 | </ul>
|
| 341 | </li>
|
| 342 | <li>Grand Child List 3</li>
|
| 343 | </ul>
|
| 344 | </li>
|
| 345 | <li>Child List 3</li>
|
| 346 | </ul>
|
| 347 | </li>
|
| 348 | <li>Unordered List 3</li>
|
| 349 | </ul>
|
| 350 | <ol>
|
| 351 | <li>Ordered List 1</li>
|
| 352 | <li>
|
| 353 | Ordered List 2
|
| 354 | <ol>
|
| 355 | <li>Child List 1</li>
|
| 356 | <li>
|
| 357 | Child List 2
|
| 358 | <ol>
|
| 359 | <li>Grand Child List 1</li>
|
| 360 | <li>
|
| 361 | Grand Child List 2
|
| 362 | <ol>
|
| 363 | <li>Great Grand Child List 1</li>
|
| 364 | <li>Great Grand Child List 2</li>
|
| 365 | <li>Great Grand Child List 3</li>
|
| 366 | </ol>
|
| 367 | </li>
|
| 368 | <li>Grand Child List 3</li>
|
| 369 | </ol>
|
| 370 | </li>
|
| 371 | <li>Child List 3</li>
|
| 372 | <li>Child List 4</li>
|
| 373 | </ol>
|
| 374 | </li>
|
| 375 | <li>Ordered List 3</li>
|
| 376 | <li value="10">Ordered List 10</li>
|
| 377 | <li value="100">Ordered List 100</li>
|
| 378 | </ol>
|
| 379 | <dl>
|
| 380 | <dt>Description Term 1</dt>
|
| 381 | <dd>
|
| 382 | <p>Description Definition 1</p>
|
| 383 | </dd>
|
| 384 | <dt>Description Term 2</dt>
|
| 385 | <dd>
|
| 386 | <p>Description Definition 2</p>
|
| 387 | <ul>
|
| 388 | <li>Unordered List
|
| 389 | <ul>
|
| 390 | <li>Child List</li>
|
| 391 | </ul>
|
| 392 | </li>
|
| 393 | </ul>
|
| 394 | <ol>
|
| 395 | <li>Ordered List
|
| 396 | <ol>
|
| 397 | <li>Child List</li>
|
| 398 | </ol>
|
| 399 | </li>
|
| 400 | </ol>
|
| 401 | </dd>
|
| 402 | <dt>Description Term 3</dt>
|
| 403 | <dd>
|
| 404 | <p>Description Definition 3</p>
|
| 405 | </dd>
|
| 406 | </dl>
|
| 407 | </section>
|
| 408 | <section id="form">
|
| 409 | <h2>Form Elements</h2>
|
| 410 | <form>
|
| 411 | <table>
|
| 412 | <caption>Input Elements</caption>
|
| 413 | <thead>
|
| 414 | <tr>
|
| 415 | <th>Type</th>
|
| 416 | <th>Example</th>
|
| 417 | </tr>
|
| 418 | </thead>
|
| 419 | <tbody>
|
| 420 | <tr>
|
| 421 | <td>Text</td>
|
| 422 | <td><input type="text" value="Text" placeholder="Placeholder"> Text</td>
|
| 423 | </tr>
|
| 424 | <tr>
|
| 425 | <td>Password</td>
|
| 426 | <td><input type="password" value="Password" placeholder="Placeholder"></td>
|
| 427 | </tr>
|
| 428 | <tr>
|
| 429 | <td>File</td>
|
| 430 | <td><input type="file"></td>
|
| 431 | </tr>
|
| 432 | <tr>
|
| 433 | <td>Image</td>
|
| 434 | <td><input type="image" src="https://dummyimage.com/200x50/09f/fff.png" alt="Image"></td>
|
| 435 | </tr>
|
| 436 | <tr>
|
| 437 | <td>Button</td>
|
| 438 | <td><input type="button" value="Button"> Text</td>
|
| 439 | </tr>
|
| 440 | <tr>
|
| 441 | <td>Reset</td>
|
| 442 | <td><input type="reset" value="Reset"></td>
|
| 443 | </tr>
|
| 444 | <tr>
|
| 445 | <td>Submit</td>
|
| 446 | <td><input type="submit" value="Submit"></td>
|
| 447 | </tr>
|
| 448 | <tr>
|
| 449 | <td>Hidden</td>
|
| 450 | <td><input type="hidden" value="Hidden"> Hidden</td>
|
| 451 | </tr>
|
| 452 | <tr>
|
| 453 | <td>Checkbox</td>
|
| 454 | <td>
|
| 455 | <label><input type="checkbox" name="checkbox" value="1" checked> Checkbox 1</label><br>
|
| 456 | <label><input type="checkbox" name="checkbox" value="2"> Checkbox 2</label>
|
| 457 | </td>
|
| 458 | </tr>
|
| 459 | <tr>
|
| 460 | <td>Radio</td>
|
| 461 | <td>
|
| 462 | <label><input type="radio" name="radio" value="1" checked> Radio 1</label><br>
|
| 463 | <label><input type="radio" name="radio" value="2"> Radio 2</label>
|
| 464 | </td>
|
| 465 | </tr>
|
| 466 | <tr>
|
| 467 | <td>Number</td>
|
| 468 | <td><input type="number" value="10"></td>
|
| 469 | </tr>
|
| 470 | <tr>
|
| 471 | <td>Search</td>
|
| 472 | <td><input type="search" value="Search"></td>
|
| 473 | </tr>
|
| 474 | <tr>
|
| 475 | <td>Tel</td>
|
| 476 | <td><input type="tel" value="0120999999"></td>
|
| 477 | </tr>
|
| 478 | <tr>
|
| 479 | <td>URL</td>
|
| 480 | <td><input type="url" value="http://example.com/"></td>
|
| 481 | </tr>
|
| 482 | <tr>
|
| 483 | <td>E-Mail</td>
|
| 484 | <td><input type="email" value="test@example.com"></td>
|
| 485 | </tr>
|
| 486 | <tr>
|
| 487 | <td>DateTime Local</td>
|
| 488 | <td><input type="datetime-local" value="2018-01-23T20:40"></td>
|
| 489 | </tr>
|
| 490 | <tr>
|
| 491 | <td>Date</td>
|
| 492 | <td><input type="date" value="2018-01-23"></td>
|
| 493 | </tr>
|
| 494 | <tr>
|
| 495 | <td>Time</td>
|
| 496 | <td><input type="time" value="20:40:30"></td>
|
| 497 | </tr>
|
| 498 | <tr>
|
| 499 | <td>Month</td>
|
| 500 | <td><input type="month" value="2018-01"></td>
|
| 501 | </tr>
|
| 502 | <tr>
|
| 503 | <td>Week</td>
|
| 504 | <td><input type="week" value="2018-W01"></td>
|
| 505 | </tr>
|
| 506 | <tr>
|
| 507 | <td>Range</td>
|
| 508 | <td><input type="range" value="20"></td>
|
| 509 | </tr>
|
| 510 | <tr>
|
| 511 | <td>Color</td>
|
| 512 | <td><input type="color" value="#ff0099"></td>
|
| 513 | </tr>
|
| 514 | </tbody>
|
| 515 | <tfoot>
|
| 516 | <tr>
|
| 517 | <th>Type</th>
|
| 518 | <th>Example</th>
|
| 519 | </tr>
|
| 520 | </tfoot>
|
| 521 | </table>
|
| 522 | <p>
|
| 523 | <select>
|
| 524 | <option>Option 1</option>
|
| 525 | <option>Option 2</option>
|
| 526 | <optgroup label="Option Group">
|
| 527 | <option>Group Option 1</option>
|
| 528 | <option>Group Option 2</option>
|
| 529 | <option>Group Option 3</option>
|
| 530 | </optgroup>
|
| 531 | <option>Option 3</option>
|
| 532 | </select>
|
| 533 | <select size="5">
|
| 534 | <option>Option 1</option>
|
| 535 | <option>Option 2</option>
|
| 536 | <optgroup label="Option Group">
|
| 537 | <option>Group Option 1</option>
|
| 538 | <option>Group Option 2</option>
|
| 539 | <option>Group Option 3</option>
|
| 540 | </optgroup>
|
| 541 | <option>Option 3</option>
|
| 542 | </select>
|
| 543 | <textarea cols="20" rows="5">Textarea
|
| 544 | テキストエリア</textarea>
|
| 545 | Text
|
| 546 | </p>
|
| 547 | <fieldset>
|
| 548 | <legend>Legend</legend>
|
| 549 | <p>
|
| 550 | Button Elements
|
| 551 | <button type="button">Button</button>
|
| 552 | <button type="reset">Reset</button>
|
| 553 | <button type="submit">Submit</button>
|
| 554 | </p>
|
| 555 | </fieldset>
|
| 556 | <p>End of Form</p>
|
| 557 | </form>
|
| 558 | <p>End.</p>
|
| 559 | </section>
|
| 560 | <section>
|
| 561 | <h2>Author</h2>
|
| 562 | <p><a href="http://neo.s21.xrea.com/">Neo</a> (<a href="https://twitter.com/Neos21">@Neos21</a>)</p>
|
| 563 | <ul>
|
| 564 | <li><a href="https://github.com/Neos21/neos-normalize">GitHub - neos-normalize</a></li>
|
| 565 | <li><a href="https://neos21.github.io/neos-normalize/">GitHub Pages - Neo's Normalize : @neos21/neos-normalize</a></li>
|
| 566 | <li><a href="https://www.npmjs.com/package/@neos21/neos-normalize">npm - @neos21/neos-normalize</a></li>
|
| 567 | </ul>
|
| 568 | </section>
|
| 569 | <section>
|
| 570 | <h2>Links</h2>
|
| 571 | <ul>
|
| 572 | <li><a href="http://neo.s21.xrea.com/">Neo's World</a></li>
|
| 573 | <li><a href="http://neos21.hatenablog.com/">Corredor</a></li>
|
| 574 | <li><a href="http://neos21.hatenablog.jp/">Murga</a></li>
|
| 575 | <li><a href="http://neos21.hateblo.jp/">El Mylar</a></li>
|
| 576 | <li><a href="https://neos21.github.io/">Neo's GitHub Pages</a></li>
|
| 577 | <li><a href="https://github.com/Neos21">GitHub - Neos21</a></li>
|
| 578 | </ul>
|
| 579 | </section>
|
| 580 | </section>
|
| 581 | </main>
|
| 582 | <footer id="footer">
|
| 583 | <small>Copyright © 2018-2020 <a href="http://neo.s21.xrea.com/">Neo</a>, All rights reserved.</small>
|
| 584 | </footer>
|
| 585 | </body>
|
| 586 | </html>
|