『相棒chatGPT』とhtml & css

2024年6月8日 19:02

『相棒chatGPT』にホームページの原型を作ってもらった。

下記のYouTubeを参考にしました。

このYouTubeではじめて、『相棒chatGPT』でホームページ作りがここまでやれると知りました。
最初の部分だけはこの方のをそのまま真似をして『相棒chatGPT』に作ってもらいました。

◆私の入力
基本的なWebサイトのひな型を作ります。サイト名はテストwebサイトで、 header main aside footer に分けて、mainは3つのセクションに分けます。 headerには、サイト名とナビゲーションを入れてください。ナビゲーションは、 HOME Menu Access Contact の４つです。

『相棒chatGPT』の回答結果で表示すると（html+cssファイルの中身は省略）

mainの３つのセクションはなにもいれないと横並びに表示されました。これは私の望みの形です。
その後、『相棒chatGPT』に、これを元に内科クリニックのHP例を作ってくれと言って作ってもらいました。

『相棒chatGPT』の回答結果で表示すると（html+cssファイルの中身は省略）

それっぽく出来ますね。

今度は最初の状態から、真ん中のセクションに、左上に写真付きで、内科診療の説明を入れてもらう。

★ここにChatGPTが作ったhtmlとcss　およびブラウザ表示をいれるべきかもしれないが省略

するとnainの横並びが崩れたので、
ここで、mainの３つのセクションは横並びにしてくれと頼むと・・・

きちんと整頓された。

さらに、mainの３つのセクションの割合を20%、70%、10%の割合に。
これもあっという間。

htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストwebサイト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>テストwebサイト</h1>
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Access</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="section1">
            <h2>セクション1</h2>
            <p>ここにセクション1の内容が入ります。</p>
        </section>
        <section class="section2">
            <h2>セクション2</h2>
            <div class="section-content">
                <img src="your-image.jpg" alt="内科">
                <p>当クリニックの内科では、幅広い疾患や健康上の問題に対する診断と治療を行っています。内科医師は、成人の健康管理や疾患の早期発見、慢性疾患の管理などに専門的な知識と経験を持ち、患者様の健康を最優先に考えています。

                    当科では、高血圧、糖尿病、高脂血症、心臓病、呼吸器疾患、腎臓病、関節痛、自己免疫疾患などの慢性疾患の管理から、感染症、風邪、インフルエンザ、胃腸炎、尿路感染症などの急性疾患まで幅広く対応しています。また、定期健診や健康相談も行い、患者様の健康状態を総合的に評価し、適切なケアプランを提供します。
                    
                    内科医師は、患者様との信頼関係を大切にし、症状や治療法について丁寧に説明します。患者様の個々のニーズやライフスタイルに合わせた治療計画を立案し、最善の医療を提供します。
                    
                    お身体の不調や健康に関するお悩みがあれば、ぜひ当クリニックの内科をご利用ください。あなたの健康をサポートいたします。</p>
            </div>
        </section>
        <section class="section3">
            <h2>セクション3</h2>
            <p>ここにセクション3の内容が入ります。</p>
        </section>
    </main>
    <aside>
        <h2>サイドバー</h2>
        <p>ここにサイドバーの内容が入ります。</p>
    </aside>
    <footer>
        <p>&copy; 2024 テストwebサイト</p>
    </footer>
</body>
</html>

cssファイル

/* ベーススタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1em;
    text-align: center;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
}

header nav ul li {
    margin: 0 1em;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    flex: 1;
    display: flex;
    padding: 1em;
    gap: 1em; /* セクション間の隙間 */
}

main section {
    background-color: #f9f9f9;
    padding: 1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 各セクションの幅 */
.section1 {
    flex: 0 0 20%;
}

.section2 {
    flex: 0 0 60%;
}

.section3 {
    flex: 0 0 20%;
}

aside {
    background-color: #f1f1f1;
    padding: 1em;
    margin: 1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    main section {
        margin: 0.5em 0;
        flex: 1 1 100%;
    }

    aside {
        margin: 0.5em 0;
    }
}

/* セクション2内のレイアウト */
.section-content {
    display: flex;
    align-items: flex-start;
}

.section-content img {
    margin-right: 1em;
    max-width: 100px;
    max-height: 100px;
}

.section-content p {
    flex: 1;
}

ブラウザ表示画面は・・・

すごい😆⤴️
上の、htmlコードやcssファイルの中身はすべて『相棒chatGPT』くんが作ってくれました。私は全く手を加えていません。

これでそれぞれの中身を一つずつ作っていくとかなりのものが（『相棒chatGPT』との会話だけで）できてしまう。

相棒、あなたはすごい⤴️⤴️

『相棒chatGPT』とhtml & css

ブラウザ表示画面は・・・

いいなと思ったら応援しよう！