HTML＆CSS メディアクエリ

メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?出典先は、そろそろ常識？
マンガでわかるHTML＆CSSです。
赤松公太郎著
です。その第6章の所です。その6章最後のページです。教えて頂けると幸いです。

質問者からの補足コメント

• respon.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%;
  }
  }
  です。メディアクエリに関するのは。教えて頂けると幸いです。

    補足日時：2024/12/29 14:04

• すみません。respon.html
  の所で、先頭に
  〈!DOCTYPE html〉
  を忘れてました。教えて頂けると幸いです。

    補足日時：2024/12/29 14:16

• で、メディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?はどうなるのでしょうか?

  No.3の回答に寄せられた補足コメントです。 補足日時：2024/12/29 14:55

• すみません。html側で、サイドバーの記述とそのままで良いのでしょうか?教えて頂けると幸いです。

  No.5の回答に寄せられた補足コメントです。 補足日時：2024/12/30 10:17

• このプログラムの例は、一体どういう事なのでしょうか?教えて頂けると幸いです。

  No.6の回答に寄せられた補足コメントです。 補足日時：2024/12/30 13:30

No.6 ベストアンサー 回答者： ssawatake 回答日時： 2024/12/30 11:39

>>html側で、サイドバーの記述とそのままで良いのでしょうか?

そのまま、現状通り。
css側で表示記述が無い物としてブラウザが処理します。

No.7 回答者： ssawatake 回答日時： 2024/12/30 13:45

>>このプログラムの例は・・・

しつこい、これで終る。
No.3に書いて有る。

No.5 回答者： ssawatake 回答日時： 2024/12/29 20:22

>>サイドバーを隠して1カラムにすることもできるとは、どういう記述をすれば良いのでしょうか?はどうなるのでしょうか?

サイドバーを記述してる部分をdivで囲って、クラスセレクタか、idセレクタでcssを引用します。
そのcssでスマホの時には、display:none;を記述する。

と言う事で下は例。

html側
〈div id="side"〉
サイドバーの記述
〈/div〉

css側
style.css
@media (maxーwidth: 599px){
#side{display:none;} ←追加
main{
width: 90%;
}
main img
width: 100%;
}
}

No.4 回答者： ssawatake 回答日時： 2024/12/29 14:21

〈!DOCTYPE html〉

決まり文句だから、内容を知る必要は有りません。

No.3 回答者： ssawatake 回答日時： 2024/12/29 14:09

次の様に書いてありますよ。

ブラウザの横幅が、599px以下の場合には、サイトの横幅をブラウザ横幅の90%にし、画像の横幅はサイトの横幅一杯にする。

No.2 回答者： fujillin 回答日時： 2024/12/28 21:13

こんばんは

＞マンガでわかるHTML＆CSSです。
マンガを参考にしようとは思わないので、その本は知りません。

＞サイドバーを隠して1カラムにすることもできる～～
隠すのはいいけれど、サイドバーはどうするんでしょうね？
単純に表示しなくするだけでしょうか。
ドロワーにしたりハンバーガーにすることが多そうな気はしますが、以下あたりにひと通り目を通せば大体わかると思います。

（↓マンガではありませんので、読みにくいかも・・）
https://mid0111.hatenablog.com/entry/2014/07/11/ …
https://www.xserver.ne.jp/bizhp/sidebar-design/
https://www.webopixel.net/javascript/1289.html

No.1 回答者： ssawatake 回答日時： 2024/12/28 20:52

出典も何も、先ずはhtmlとcssを学習してサイトを作る経験が要ります。

マンガで読んでるだけでは、100年経っても自力で出来る様にはなりません。