HTMLとCSSで分からないことはchatGPTに聞け！

2025-08-16

「HTMLやCSSのコードを書いていて、どうしてもうまく表示されない…」
「調べても情報がバラバラで、どれが正しいのか分からない…」

そんな悩みを持ったことはありませんか？

実は今、多くのWeb初心者やブロガーが、ChatGPTを“先生”として活用して疑問を解決しています。

この記事では、ChatGPTがどんなふうにあなたの学習や制作をサポートできるのかを具体的にご紹介します。

ChatGPTは何ができるの？

コードの解説

「このCSSプロパティの意味は？」と聞けば、初心者でも理解できるように分かりやすく説明します。

エラーの原因特定

タグの閉じ忘れやセレクタの書き間違いなど、初心者が気づきにくいエラーを指摘することができます。

例：「次のHTMLがきちんと表示されません。間違いを指摘してください。」
と指示して、エラーが発生している実際のHTMLを記載します。

実例コードの提示

「横並びのカードレイアウトを作りたい」「スマホ表示で崩れないナビゲーションが欲しい」といったリクエストに対して、実際に使えるHTML＋CSSの例を提示します。

実際のサンプルコード例1

ここでは「3つのカードを横並びにして、スマホでは縦並びにする」と質問した際のサンプルを紹介します。

HTML

<div class="card-container">
  <div class="card">
    <h3>カード1</h3>
    <p>ここにテキストが入ります。</p>
  </div>
  <div class="card">
    <h3>カード2</h3>
    <p>ここにテキストが入ります。</p>
  </div>
  <div class="card">
    <h3>カード3</h3>
    <p>ここにテキストが入ります。</p>
  </div>
</div>

上記のHTMLを実際にこのページに貼り付けると、きちんと表示されます👇️

カード1

ここにテキストが入ります。

カード2

ここにテキストが入ります。

カード3

ここにテキストが入ります。

CSS

CSSの設定についても、ChatGPTが答えてくれます。

.card-container {
  display: flex;
  gap: 20px;
  margin: 20px;
}

.card {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
  }
}

👉 PCではカードが横並び、スマホ幅では縦に並ぶシンプルなレスポンシブレイアウトになります。

実際のサンプルコード例2

他にも、このブログトップページの左下の部分をChatGPTに書いてもらいました。

<p class="footer-description">
  <a href="https://www.mii4family.com/" rel="nofollow">チリトク</a><br>
  <a href="https://www.mii4family.com/">節約×投資×ガジェット×リアル体験でつくる、ゆるく賢い暮らし</a>
</p>

このHTMLに対し、イメージが違えば

「上記HTMLで文字の大きさと色指定を入れてください。大文字で黒色です。」

とChatGPTに質問すると、答えてくれます。

<a href="https://www.mii4family.com/" rel="nofollow" style="color: #000; text-transform: uppercase;">
  <span style="font-size: 20px;">チリトク</span><br>
  <span style="font-size: 10px;">節約×投資×ガジェット×リアル体験でつくる、ゆるく賢い暮らし</span>
</a>

さらに、
「チリトクの文字を太字・斜め文字にしてください」
と質問すると、さらに答えてくれます。

<a href="https://www.mii4family.com/" rel="nofollow" style="color: #000; text-transform: uppercase; display: inline-block;">
  <span style="font-size: 20px; font-weight: bold; font-style: italic; display: block; margin-bottom: 30px;">
    チリトク
  </span>
  <span style="font-size: 10px; display: block;">
    節約×投資×ガジェット×リアル体験でつくる、ゆるく賢い暮らし
  </span>
</a>