詳しい人求む！

HTML&CSS メディアクエリについて。

解決済

質問者：メラゾーム
質問日時：2025/01/09 18:06
回答数：4件

修正版htmlとcssは下記の通り
/* PC用のデフォルトスタイル */
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Campus Art</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Campus Art</h1>
</header>
<cont>
<aside>
<p>サイドバーの内容がここに入ります。</p>
</aside>
<main>
<p class="visual"><img src="art.jpg" alt="バラのアート"></p>
<h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2>
<p>
世界各国で現在活動中のアーティストたちからお預かりした原画から、
あなたの好みに合うアート作品を定期的にお届けします。
</p>
</main>
</cont>
<footer>
<small>© Campus Art.</small>
</footer>
</body>
</html>

次がcss
body {
margin: 0;
}

header {
background-color: #505050;
color: white;
padding: 20px;
text-align: center;
width:100%;
}

cont{display: flex;}

aside {
width: 300px; /* サイドバーの幅 */
background-color: #f0f0f0;
padding: 20px;
}

main {
/* flex: 1; メインコンテンツが余った幅を使用 */
padding: 20px;
width:700px;
}

footer {background-color: #505050;
color: white;
text-align: center;
padding: 10px;
width::100%;
}

/* スマホ用メディアクエリ */
@media (max-width: 599px) {
body {
display: block; /* 縦並び */
}

aside {
display: none; /* サイドバー非表示 */
}

main {
width: 90%; /* メインコンテンツの幅を調整 */
margin: 0 auto;
}

main img {
width: 100%; /* 画像を画面幅いっぱいに */
}
}
以上が、チャットGPTの回答ですが、contタグを調べてもネットにも載ってなくて。どういう意味なのか教えていただけると幸いです。

すみません。実はというと、大元はチャットGPTで、それをアレンジしたのは、この掲示板の回答です。

補足日時：2025/01/09 18:08
通報する
つまり、<aside>
<p>サイドバーの内容がここに入ります。</p>
・
・
</main>
の所を横並びにしたい為に、contという名前を勝手に付けて、cssで、contに囲まれた部分にdisplay:flexを適用したという事ですね?教えて頂けると幸いです。

No.2の回答に寄せられた補足コメントです。補足日時：2025/01/10 15:06
通報する
疑問点が、2つあって、
①<p class="visual"><img src="art.jpg" alt="バラのアート"></p>の所は、入れ子構造で、imgの画像にvisualクラスと名付けたという事でしょうか?
②<small>© Campus Art.</small>の所は、キャンパスアートをコピーして、小さく注釈書きをするという事でしょうか?
教えて頂けると幸いです。
追記
迅速な回答ありがとうございます!

No.3の回答に寄せられた補足コメントです。補足日時：2025/01/11 13:40
通報する
迅速な回答ありがとうございます。改めて聞きますが、質問文に挙げたHTML＆CSSで記述された物は、課題のメディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるはクリアしているのでしょうか?教えて頂けると幸いです。

No.4の回答に寄せられた補足コメントです。補足日時：2025/01/12 15:12
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ssawatake
回答日時：2025/01/11 14:31

>>imgの画像にvisualクラスと名付けたという事でしょうか?

そうです。本来のクラスセレクタ名がvisualで、自分で好きな名前に出来ます。
その場合はcssで「.visual」と言う名前が出て来ないとイケナイのですが、サンプには有りません。
無い場合は、無視されます。

②
そうです。
smallはhtmlでの規約で小さく表示と言う意味です。
cssは参照しません。

- 0
- 件

通報する

No.3

回答者： ssawatake
回答日時：2025/01/10 19:48

No.2の回答への補足。

その通りです。
例は相当簡単なものですが、やり方は色々有って実際はモット複雑です。
考え方は同じです。

- 0
- 件

通報する

No.2

回答者： ssawatake
回答日時：2025/01/10 14:47

>>contとは何なのでしょうか？

cssに認識させる為のセレクタ。自分で勝手に付けた名前。

<aside>
<p>サイドバーの内容がここに入ります。</p>
・
・
</main>

これ全体を囲み、囲んだ範囲をcssで{display: flex;}指定して、横並びにしてるだけ。

htmlとcssの基礎を全く知ってないから意味が解らないんだよ。
質問繰り返す前に、基礎の基礎を手を動かしてサイトを作りながら実際に学ぶ事。

- 0
- 件

通報する

No.1

回答者： ssawatake
回答日時：2025/01/09 19:01

先ず、チャットGPTが間違ってるだけです。

所詮は嘘800のネット情報を使ってるだけだから、真偽なんかあてになりません。

contは、いくら調べても載ってません。
html5は、自分で勝手に書けます。
それがcssに出現すれば、cssで設定した内容で動くだけです。

ヘッダー、フッターを、上段下段に横一杯に配置し、サイドとメインを間に挟んで横並びに配置する為です。

サイドとメインをcontで囲み、cont内を横並び指定してます。