メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して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%; /* 画像を画面幅いっぱいに */
}
}
教えて頂けると幸いです。これで、いいのでしょうか?アドバイス頂けると幸いです。
No.4ベストアンサー
- 回答日時:
>>なぜ、〈cont〉と〈/cont〉、cont{display: flex;}を付け加えたのでしょうか?
ヘッダ~フッタまで横並びでpc画面らしく無いから。
こんなpc画面にする人は居ません。
これが最後です、幾ら漫画本やサイトを眺めていても自分でサイトを組まない限り、解りませんよ。
(レッスンブックを買って、実際手を動かして作って見る)

No.3
- 回答日時:
元々の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%; /* 画像を画面幅いっぱいに */
}
}

No.2
- 回答日時:
>>1カラムにすることもできるの課題はクリア出来たという事ですね?
そうです。
>>cssファイルがなぜ外部ファイルになっていると分かったのでしょうか?
<link rel="stylesheet" href="style.css">の記述があるから。
>>上図では、ないのでしょうか?
上図はpcでそのまま表示したもの。
下図は、ブラウザの幅を狭めて表示したもの。
(スマホで無くても確認できます)
No.1
- 回答日時:
合ってますよ。
今回のは、cssファイルを外部ファイルにして、style.cssと言う名前になっています。
そのまま表示した結果が下図です。
上側がpc版として表示させたもので、下側はスマホ版として表示させた内容です。
(ブラウザの幅を狭めれば、自動的に下側表示になります)

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- JavaScript Colorboxがうまく設置できません 2 2024/01/13 16:59
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- HTML・CSS HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ 3 2023/12/25 16:07
- JavaScript javascriptのエラーで質問です。 2 2024/02/03 18:52
- HTML・CSS HTMLでstyleを指定するフォームの作り方 2 2023/12/22 19:33
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- JavaScript コードレビューをお願いします。 3 2023/12/17 01:07
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS CSSでつくったメニューのアニメーションがうまく動かない・変えたい 2 2024/01/21 11:48
このQ&Aを見た人はこんなQ&Aも見ています
-


HTML&CSSについて。
HTML・CSS
-


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


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

HTML&CSSとHTML5&CSS3の違いについて。
HTML・CSS
-
5

HTML &CSSとHTML5&CSS3 違い
HTML・CSS
-
6

HTML&CSS メディアクエリ
HTML・CSS
-
7

HTML&CSSとHTML5&CSS3の違いについて。
HTML・CSS
-
8

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

ExcelVBAについて。
Excel(エクセル)
-
10

excelVBAについて。
Excel(エクセル)
-
11

フォルダの中にファイルがある場合 削除
Excel(エクセル)
-
12

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

メディアクエリについて。
HTML・CSS
-
14

Ruby 引数
Ruby
-
15

officeソフト 本名変更
その他(Microsoft Office)
-
16

ruby OpenURI::Meta
Ruby
-
17

Ruby require ライブラリー
Ruby
-
18

コトリン言語について。
その他(プログラミング・Web制作)
-
19

アセンブリ言語について。
その他(プログラミング・Web制作)
-
20

excelVBAについて。
Excel(エクセル)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
HTML/CSSを使って写真のような...
-
スマホ(android)のタッチパネ...
-
初心者html・CSS ウィンドウを...
-
ホームページの制作について教...
-
CSSデータの作成方法について(...
-
メモ帳の段落の揃え方
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
css初心者 フレックスボックス...
-
テーブルタグのセルの幅の一部...
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
GoogleSearchControlにホームペ...
-
htmlの<input type=”file”>でア...
-
Webサイトの「デザインのみ(コ...
-
webディベロッパーについて詳し...
-
CSSを教えて下さい webデザイナ...
-
静止画画像をクリックすると音...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホでHTMLファイルを開いて...
-
GoogleSearchControlにホームペ...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
スマホ(android)のタッチパネ...
-
WEBページを強制的に横画面で見...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
テーブルのセルデータを自動改...
-
テーブルタグのセルの幅の一部...
-
スマホで、左右にスワイプして...
おすすめ情報














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