なにこれ

備忘録として私が残しているもの。
なにかとでもサイトを作ったりするときのやり方を残しておく。

テスト的にサイトを作るやり方

その1 「CSSをHTMLに直接書く」

index.html

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

<head>
    <meta charset="UTF-8">
    <title>cssをhtmlに直接書く</title>
    <style>
        @charset "UTF-8";

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(pattern.png);
        }

        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70vw;
            border-width: 8px;
            border-style: ridge;
            border-color: #ded000;
            padding: 50px 80px;
            background-color: #00005c;
        }
    </style>
</head>

<body>
    <img src="title.svg" alt="">
</body>

</html>

その2 「JavaScriptをHTMLに直接書く」

デモを確認する

index.html

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

<head>
    <meta charset="UTF-8">
    <title>jsを直接htmlに書く</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:700" rel="stylesheet">
</head>

<body>

    <h1>Sample</h1>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('h1').text('Hello, World!');
        });
    </script>
</body>

</html>

終わり

参考にさせていただきました
HTML5&CSS3 デザインレシピ集