見出し画像

ChatGTPによるホームページ制作

匿名希望（とくなきのぞみ）

ChatGPTは何でもできます。今回はホームページを作って（HTMLを記述）もらおうとしましたが、どうなんでしょう？

かっこいいホームページを作りたいです。HTMLコードを教えて下さい。ページ数は「会社案内」「事業内容」「製品一覧」「コラムページ」「問い合わせ先」の5ページです。

ChatGPT

もちろんです！以下に、基本的なHTMLコードを示します。各ページのコンテンツやスタイリングはカスタマイズしてください。

まず、基本のHTML構造を示します。それぞれのページごとに異なるコンテンツを追加してください。

htmlCopy code<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会社名 - ホームページ</title>
    <link rel="stylesheet" href="styles.css"> <!-- スタイルシートへのリンク -->
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">ホーム</a></li>
                <li><a href="business.html">事業内容</a></li>
                <li><a href="products.html">製品一覧</a></li>
                <li><a href="column.html">コラム</a></li>
                <li><a href="contact.html">問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <!-- ここに各ページのコンテンツを追加 -->
    </main>

    <footer>
        <p>&copy; 2023 会社名. All rights reserved.</p>
    </footer>
</body>
</html>

それぞれのページのコンテンツを追加してみましょう。以下は各ページの基本的な例です。

  1. 会社案内 (index.html):

htmlCopy code<section class="company-info">
    <h1>会社案内</h1>
    <p>会社の基本情報や沿革などをここに記載します。</p>
</section>

  1. 事業内容 (business.html):

htmlCopy code<section class="business-content">
    <h1>事業内容</h1>
    <p>主な事業領域や取り組みについてここに記載します。</p>
</section>

  1. 製品一覧 (products.html):

htmlCopy code<section class="product-list">
    <h1>製品一覧</h1>
    <ul>
        <li>製品1: 製品の説明</li>
        <li>製品2: 製品の説明</li>
        <!-- 他の製品も同様に追加 -->
    </ul>
</section>

  1. コラムページ (column.html):

htmlCopy code<section class="column-posts">
    <h1>コラム</h1>
    <article>
        <h2>タイトル1</h2>
        <p>コラムの内容をここに記載します。</p>
    </article>
    <article>
        <h2>タイトル2</h2>
        <p>別のコラムの内容をここに記載します。</p>
    </article>
    <!-- 他のコラムも同様に追加 -->
</section>

  1. 問い合わせ先 (contact.html):

htmlCopy code<section class="contact-info">
    <h1>問い合わせ先</h1>
    <p>問い合わせ先や連絡先をここに記載します。</p>
</section>

このコードは基本的な骨組みを提供しています。各ページのスタイリングは、別途 styles.css ファイルを作成して行うことができます。詳細なデザインやスタイルについては、CSSと合わせて調整してください。

この記事が気に入ったらサポートをしてみませんか？