メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？マンガでわかるHTML＆CSSです。赤松公太郎著です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。 respon.html 〈!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〉 style.css @media (maxーwidth: 599px){ main{ width: 90%; } main img width: 100%; } } です。メディアクエリに関するのは。教えて頂けると幸いです。スマートフォンの幅は、400〜600pxと書いてあるのですが、画面幅が、最小600pxと仮定し、ブレークポイントを599pxにしているで、なぜ、最小になっているのでしょうか?最大の間違いだと思うのですが。あなた様はどう思いますか?すみません。話がズレました。ですが、追加で書かれていたのです。で、チャットgptに聞いて以下の回答が合っているかどうか教えて頂けると幸いです。すみません。修正版のrespon.htmlです。教えて頂けると幸いです。 Campus Art Campus Art サイドバーの内容がここに入ります。あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け世界各国で現在活動中のアーティストたちからお預かりした原画から、あなたの好みに合うアート作品を定期的にお届けします。 © Campus Art. 次は、style.cssの修正版を載せます。 @charset "UTF-8"; /* PC用のデフォルトスタイル */ body { margin: 0; display: flex; /* 横並び */ } header { background-color: #505050; color: white; padding: 20px; text-align: center; } aside { width: 300px; /* サイドバーの幅 */ background-color: #f0f0f0; padding: 20px; } main { flex: 1; /* メインコンテンツが余った幅を使用 */ padding: 20px; } footer {background-color: #505050; color: white; text-align: center; padding: 10px; } /* スマホ用メディアクエリ */ @media (max-width: 599px) { body { display: block; /* 縦並び */ } aside { display: none; /* サイドバー非表示 */ } main { width: 90%; /* メインコンテンツの幅を調整 */ margin: 0 auto; } main img { width: 100%; /* 画像を画面幅いっぱいに */ } } 教えて頂けると幸いです。これで、いいのでしょうか?アドバイス頂けると幸いです。

>>1カラムにすることもできるの課題はクリア出来たという事ですね? そうです。 >>cssファイルがなぜ外部ファイルになっていると分かったのでしょうか? の記述があるから。 >>上図では、ないのでしょうか? 上図はpcでそのまま表示したもの。下図は、ブラウザの幅を狭めて表示したもの。 (スマホで無くても確認できます）

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

解決済

質問者：メラゾーム
質問日時：2025/01/05 17:31
回答数：4件

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？
マンガでわかるHTML＆CSSです。
赤松公太郎著
です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。
respon.html
〈!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〉
style.css
@media (maxーwidth: 599px){

main{
width: 90%;
}
main img
width: 100%;
}
}
です。メディアクエリに関するのは。教えて頂けると幸いです。スマートフォンの幅は、400〜600pxと書いてあるのですが、画面幅が、最小600pxと仮定し、ブレークポイントを599pxにしているで、なぜ、最小になっているのでしょうか?最大の間違いだと思うのですが。あなた様はどう思いますか?すみません。話がズレました。ですが、追加で書かれていたのです。
で、チャットgptに聞いて以下の回答が合っているかどうか教えて頂けると幸いです。
すみません。修正版のrespon.htmlです。教えて頂けると幸いです。
<!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>
<aside>
<p>サイドバーの内容がここに入ります。</p>
</aside>
<main>
<p class="visual"><img src="art.jpg" alt="バラのアート"></p>
<h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2>
<p>
世界各国で現在活動中のアーティストたちからお預かりした原画から、
あなたの好みに合うアート作品を定期的にお届けします。
</p>
</main>
<footer>
<small>© Campus Art.</small>
</footer>
</body>
</html>
次は、style.cssの修正版を載せます。
@charset "UTF-8";

/* PC用のデフォルトスタイル */
body {
margin: 0;
display: flex; /* 横並び */
}

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

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

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

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

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

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

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

main img {
width: 100%; /* 画像を画面幅いっぱいに */
}
}
教えて頂けると幸いです。これで、いいのでしょうか?アドバイス頂けると幸いです。

とすると、メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるの課題はクリア出来たという事ですね?それと、cssファイルがなぜ外部ファイルになっていると分かったのでしょうか?まだ疑問があって、なぜ、そのまま表示した結果が、下図になるのでしょうか?上図では、ないのでしょうか?とすると、下図は、PC版で、ブラウザの幅を狭めると言う事でしょうか?

No.1の回答に寄せられた補足コメントです。補足日時：2025/01/05 22:52
通報する
すみません。なぜ、〈cont〉と〈/cont〉、cont{display: flex;}を付け加えたのでしょうか?教えて頂けると幸いです。

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

通報する

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

質問の本文を隠す

回答 (4件)

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

No.4ベストアンサー

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

>>なぜ、〈cont〉と〈/cont〉、cont{display: flex;}を付け加えたのでしょうか?

ヘッダ～フッタまで横並びでpc画面らしく無いから。
こんなpc画面にする人は居ません。

これが最後です、幾ら漫画本やサイトを眺めていても自分でサイトを組まない限り、解りませんよ。
(レッスンブックを買って、実際手を動かして作って見る)

- 1
- 件

通報する

No.3

回答者： ssawatake
回答日時：2025/01/06 14:48

元々のhtmlとcssのままだと、pc画面では、ヘッダ、サイド、メイン、フッタの順に横並びになります。

普通は、ヘッダとフッタが横一杯になり、その間にサイド、メインが横並びになります。

チョコット修正した図が添付図です。
上がpc、下がスマホ。

修正版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%; /* 画像を画面幅いっぱいに */
}
}

- 0
- 件

通報する

No.2

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

>>1カラムにすることもできるの課題はクリア出来たという事ですね?

そうです。

>>cssファイルがなぜ外部ファイルになっていると分かったのでしょうか?
<link rel="stylesheet" href="style.css">の記述があるから。

>>上図では、ないのでしょうか?
上図はpcでそのまま表示したもの。
下図は、ブラウザの幅を狭めて表示したもの。
(スマホで無くても確認できます）