素のHTMLの見た目を少し良くしてくれるヤツ、その名は「MVP.css」

# なに？
特別なことをせずとも、スタイルシート設定するだけで見た目が少し良くなるらしい
割と良さそうなのでメモ

# サイト
MVP.css
https://andybrewer.github.io/mvp/

# ライセンス
MIT License

# 使い方
mvp.cssを読み込むだけ

```html:サンプル
<head>
    <link rel="stylesheet" href="mvp.css">
</head>
```

# 適応前のサンプルHTMLのSS
![_C__Users_yamauchi_Downloads_mvp.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/0c1e4a15-77fe-44de-da06-47ad1c6b80f2.png)

# 適応後のサンプルHTMLのSS
![_C__Users_yamauchi_Downloads_mvp.html (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348583/5a3313bb-90ae-2b5d-954b-14f627b00d95.png)

# サンプルHTMLのソース
```html:ソース
<!-- MVP.css quickstart template: https://github.com/andybrewer/mvp/ -->

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="https://via.placeholder.com/70x70">
    <link rel="stylesheet" href="https://andybrewer.github.io/mvp/mvp.css">

    <meta charset="utf-8">
    <meta name="description" content="My description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My title</title>
</head>

<body>
    <header>
        <nav>
            <a href="/"><img alt="Logo" src="https://via.placeholder.com/200x70?text=Logo" height="70"></a>
            <ul>
                <li>Menu Item 1</li>
                <li><a href="#">Menu Item 2</a></li>
                <li><a href="#">Dropdown Menu Item</a>
                    <ul>
                        <li><a href="#">Sublink 1</a></li>
                        <li><a href="#">Sublink 2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <h1>Page Heading with <i>Italics</i> and <u>Underline</u></h1>
        <p>Page Subheading with <mark>highlighting</mark></p>
        <br>
        <p><a href="#"><i>Italic Link Button</i></a><a href="#"><b>Bold Link Button &rarr;</b></a></p>
    </header>
    <main>
        <hr>
        <section>
            <header>
                <h2>Section Heading</h2>
                <p>Section Subheading</p>
            </header>
            <aside>
                <h3>Card heading</h3>
                <p>Card content*</p>
                <p><small>*with small content</small></p>
            </aside>
            <aside>
                <h3>Card heading</h3>
                <p>Card content <sup>with notification</sup></p>
            </aside>
            <aside>
                <h3>Card heading</h3>
                <p>Card content</p>
            </aside>
        </section>
        <hr>
        <section>
            <blockquote>
                "Quote"
                <footer><i>- Attribution</i></footer>
            </blockquote>
        </section>
        <hr>
        <div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Col A</th>
                        <th>Col B</th>
                        <th>Col C</th>
                    </tr>
                </thead>
                <tr>
                    <td>Row 1</td>
                    <td>Cell A1</td>
                    <td>Cell B1</td>
                    <td>Cell C1</td>
                </tr>
                <tr>
                    <td>Row 2</td>
                    <td>Cell A2</td>
                    <td>Cell B2</td>
                    <td>Cell C2</td>
                </tr>
            </table>
        </div>
        <hr>
        <article>
            <h2>Left-aligned header</h2>
            <p>Left-aligned paragraph</p>
            <aside>
                <p>Article callout</p>
            </aside>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
            <figure>
                <img alt="Stock photo" src="https://via.placeholder.com/1080x500?text=Amazing+stock+photo">
                <figcaption><i>Image caption</i></figcaption>
            </figure>
        </article>
        <hr>
        <div>
            <details>
                <summary>Expanable title</summary>
                <p>Revealed content</p>
            </details>
            <details>
                <summary>Another expanable title</summary>
                <p>More revealed content</p>
            </details>
            <br>
            <pre>
                <code>
                    // code sample
                    
                </code>
            </pre>
        </div>
        <hr>
        <section>
            <form>
                <header>
                    <h2>Form title</h2>
                </header>
                <label for="input1">Input label:</label>
                <input type="text" id="input1" name="input1" size="20" placeholder="Input1">
                <label for="select1">Select label:</label>
                <select id="select1">
                    <option value="option1">option1</option>
                    <option value="option2">option2</option>
                </select>
                <label for="textarea1">Textarea label:</label>
                <textarea cols="40" rows="5" id="textarea1"></textarea>
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <hr>
        <p>
            Contact info
        </p>
    </footer>
</body>

</html>
```

# 感想
覚えておけば、いつか使い道がありそう