重要なお知らせ

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

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：メラゾーム
  • 質問日時：
  • 回答数：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>
<div class="container">
<aside>
<p>サイドバーの内容がここに入ります。</p>
</aside>
<main>
<p class="visual"><img src="art.jpg" alt="バラのアート"></p>
<h2>あなたの好みに合わせたキャンバスアートを3ヶ月ごとにお届け</h2>
<p>
世界各国で現在活動中のアーティストたちからお預かりした原画から、
あなたの好みに合うアート作品を定期的にお届けします。
</p>
</main>
</div>
<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%;
}

/* コンテナのスタイル（修正済み） */
div.container {
display: flex; /* フレックスボックスで横並びに */
}

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

/* メインコンテンツのスタイル */
main {
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%; /* 画像を画面幅いっぱいに */
}
}
以上のコードで、課題のメディアクエリ内にレイアウト用の記述を追加すればスマートフォンで見たときだけサイドバーを隠して1カラムにすることもできるはクリアしているのでしょうか?教えて頂けると幸いです。ちなみに、チャットGPTに聞きました。

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

  • 確かめる方法を教えて頂けると幸いです。

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

  • すみません。このコードをどうすれば実行出来るのでしょうか?教えて頂けると幸いです。

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

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

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

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

合ってますよ。



下図の通りの表示。
「HTML＆CSS メディアクエリについて」の回答画像2
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.4

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

pcで投稿してる様なので、pcでの方法を。



①htmlファイルを作る
メモ帳を開いて、<!DOCTYPE html>～</html>まで全部をコピーし、名前を付けて保存で、どこかのフォルダへ保存する。
名前は、○○○.html （○○○は半角英字。.htmlは拡張子)

②cssファイルを作る
メモ帳を開いてcssをコピーする。
この質問の場合はbody～}}まで全部。
名前を付けて保存で、①と同じフォルダへ保存する。
名前はstyle.css（styleがファイル名、.cssは拡張子)

③
フォルダに格納された①のファイルをマウスダブルクリックすれば画面が表示される。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： Wr5
  • 回答日時：

>確かめる方法を教えて頂けると



https://ja.stackoverflow.com/questions/100661/ht …
ブラウザの横幅変えればいいんじゃないか？
という回答ついてますよ。

ちなみに、PCのブラウザです。
EDGEやChromeなど。
1)マウスカーソルをブラウザの横の縁まで移動させます。
2)マウスカーソルの形が矢印から別の形に変わります。
3)マウスの左ボタンを押したまま、マウスカーソルを移動させることでサイズが変更できます。
4)希望のサイズ（今回は横幅を狭くした位置）までマウスカーソルを移動したら左ボタンを離します。
マウスのボタンを押したまま、マウスカーソルを動かす操作を「ドラッグ」といいます。
詳しいことはWindowsの入門書とか読んでください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません。この方法と、質問文のHTML &CSSのプログラムの実行と何の関係があるのでしょうか？教えて頂けると幸いです。

通報する
お礼日時：2025/01/21 14:45

No.1

  • 回答者： fujillin
  • 回答日時：

自分で表示して確かめてみればわかることでは？



いちいち人に聞かないと分からない様では、毎回人にチェックしてもらわないとならないことになって、一人では何もできない人になっちゃいますよ。
この回答への補足あり
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

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

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

Q質問する（無料）

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

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

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

おすすめ情報