【HTML】HTMLコードのテンプレート（シンプル）

HTML(エイチティーエムエル)

2023.07.23

以下は、シンプルなウェブページのテンプレートの例です。このテンプレートは、ナビゲーションバー、ヘッダー、コンテンツエリア、フッターの基本的なセクションで構成されています。

コピーして使用ください。

HTMLコードのテンプレート1
テンプレート2
テンプレート3
まとめ

HTMLコードのテンプレート1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>適当なHTMLサンプル</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これは適当なHTMLサンプルです。</p>
    
    <h2>リスト</h2>
    <ul>
        <li>リスト項目1</li>
        <li>リスト項目2</li>
        <li>リスト項目3</li>
    </ul>
    
    <h2>画像</h2>
    <img src="https://via.placeholder.com/150" alt="サンプル画像">
    
    <h2>リンク</h2>
    <p>以下はGoogleのリンクです。</p>
    <a href="https://www.google.com" target="_blank">Google</a>
    
    <h2>テーブル</h2>
    <table>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
        <tr>
            <td>商品A</td>
            <td>1000円</td>
        </tr>
        <tr>
            <td>商品B</td>
            <td>1500円</td>
        </tr>
    </table>

</body>
</html>

テンプレート2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>適当なHTMLサンプル</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これは適当なHTMLサンプルです。</p>
    
    <h2>リスト</h2>
    <ul>
        <li>リスト項目1</li>
        <li>リスト項目2</li>
        <li>リスト項目3</li>
    </ul>
    
    <h2>画像</h2>
    <img src="https://via.placeholder.com/150" alt="サンプル画像">
    
    <h2>リンク</h2>
    <p>以下はGoogleのリンクです。</p>
    <a href="https://www.google.com" target="_blank">Google</a>
    
    <h2>テーブル</h2>
    <table>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
        <tr>
            <td>商品A</td>
            <td>1000円</td>
        </tr>
        <tr>
            <td>商品B</td>
            <td>1500円</td>
        </tr>
    </table>
    
    <h2>フォーム</h2>
    <form>
        <label for="name">名前：</label>
        <input type="text" id="name" name="name" required><br>
        
        <label for="email">Eメール：</label>
        <input type="email" id="email" name="email" required><br>
        
        <label for="message">メッセージ：</label><br>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
        
        <input type="submit" value="送信">
    </form>
</body>
</html>

テンプレート3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>シンプルなウェブページ</title>
    <style>
        /* スタイルを追加する場合はここに記述 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        nav {
            background-color: #444;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }
        nav a:hover {
            text-decoration: underline;
        }
        section {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>シンプルなウェブページ</h1>
    </header>
    <nav>
        <a href="#">ホーム</a>
        <a href="#">サービス</a>
        <a href="#">製品</a>
        <a href="#">お問い合わせ</a>
    </nav>
    <section>
        <h2>ようこそ！</h2>
        <p>これはシンプルなウェブページのテンプレートです。</p>
    </section>
    <footer>
        <p>&copy; 2023 サンプルウェブサイト</p>
    </footer>
</body>
</html>