シンプルなHTMLの雛形を公開します。ちょっとした動作確認にどうぞ。

フロントサイドの人はHTMLの雛形なんて当たり前のように持っていると思うのですが、エンジニアがCSSやJavaScriptの確認をしようとすると、HTMLを用意するところから始めるという人が多いと思います。

そんな人のため(自分のため)にコピペで動くHTMLテンプレートを公開していきます。

[スポンサーリンク]

目次

CSSもJavaScriptもHTML内に書くパターン

CSSの指定ですが、idとclass指定の両方ができるサンプルにしています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<script>
let func = function(x){
    console.log("値は、" + x + " です。");
}
</script>
<style>
    #id {
        color: red;
    }
    .class {
        color: blue;
    }
</style>
</head>
    <body>
        <div id="id">これはidで装飾を指定しています。</div>
        <div class="class">これはclassで装飾を指定しています。</div>
        <input type="button" value="Click" onclick="func(100)" />
    </body>
</html>

CSSとJavaScriptは外部ファイルへ定義するパターン

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<script type="text/javascript" src="example.js"></script>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
    <body>
        <div id="id">これはidで装飾を指定しています。</div>
        <div class="class">これはclassで装飾を指定しています。</div>
        <input type="button" value="Click" onclick="func(100)" />
    </body>
</html>

example.css

#id {
    color: red;
}
.class {
    color: blue;
}

example.js

let func = function(x){
    console.log("値は、" + x + " です。");
}

HTMLタグにCSSを指定するパターン

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
</head>
    <body>
        <div style="color:red; font-size:30px;">CSSをエレメントに直接書いています。</div>
    </body>
</html>

さいごに

いずれも簡単なHTMLコードですが、とっさに必要となった時にコピペできると便利ですよね。

なので、自分のメモ用にこの記事を用意しました。

自分と同じ境遇のエンジニアの方はぜひこのページのHTML雛形を使ってやってください。

それでは!