こんにちは、aicoです。
本日は、Codejumpの「入門編/フォトサイト」Webページ制作の練習中に、トラブルに遭遇しました。
画像とテキストを横並びにしたいのに、なぜか縦に並んでしまう…。
最初は「どこがおかしいの？」とくじけそうになりました。
でも、あきらめずにいろいろ調べて試す中で、ChatGPTにサポートをお願いしながら、
最終的には<div>タグの使い方を学んで解決できました！
今回は、初心者の私が直面したWebページ制作のトラブルを簡単に書いてみます☺
問題発生
サンプルページを参考にコードを書いていたのに、全画面表示にすると画像とテキストが縦一列に並ぶ。。。
「同じように書いてるはずなのに…」と焦りました。
本来は下のようなレイアウトにしたい。。
試したこと
CSSをもう一度見直し
HTMLの構造をサンプルと比較
開発者ツール（右クリック 〉検証）を開いて、どこで崩れてるかを探す。
（書き直してみるも、同じ結果に。。。）
そしてChatGPTに「これってなんでこうなるの？」と質問もしてみました。
解決策
いろいろ試すうちに、画像部分を<div>で囲むのがポイントだとわかりました。
ChatGPTに相談したことで「<div>は“見えない箱”として大事な役割があるよ」とアドバイスをもらい、スッキリ解決！
学びとまとめ
今回の学びは、<div>タグは「見えない箱」ということ。
CSSを当てるにも、中身を整理するにも、本当に大事な存在だと実感しました。
同じように「画像とテキストの並びが崩れる！」と悩んでいる方がいたら、
まずはHTMLのコードが<div>で囲んであるのか確認をすることをおすすめします。
それでもうまくいかないときは、ChatGPTに相談するのもアリですよ！
コメント