重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：メラゾーム
  • 質問日時：
  • 回答数：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>&copy; 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
    通報する
通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ssawatake
  • 回答日時：

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



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

これが最後です、幾ら漫画本やサイトを眺めていても自分でサイトを組まない限り、解りませんよ。
(レッスンブックを買って、実際手を動かして作って見る)
「HTML＆CSS メディアクエリについて」の回答画像4
    • good
    • 1
    • 件
通報する

No.3

  • 回答者： ssawatake
  • 回答日時：

元々の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>&copy; 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%; /* 画像を画面幅いっぱいに */
}
}
「HTML＆CSS メディアクエリについて」の回答画像3
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ssawatake
  • 回答日時：

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


そうです。

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

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

No.1

  • 回答者： ssawatake
  • 回答日時：

合ってますよ。


今回のは、cssファイルを外部ファイルにして、style.cssと言う名前になっています。

そのまま表示した結果が下図です。

上側がpc版として表示させたもので、下側はスマホ版として表示させた内容です。
(ブラウザの幅を狭めれば、自動的に下側表示になります）
「HTML＆CSS メディアクエリについて」の回答画像1
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報