レスポンシブデザインを実装したい！

前提・実現したいこと

PC用WEBサイトを作成中ですが、スマートフォでも見れるようにレスポンシブ化しようとしています。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ガーディアン</title>
  <link rel="stylesheet" type="text/css" href="base.css"　/>
  <!-- media="screen and (max-width: 480px)" -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
</head>
<body>
  <div id="top">
    <p>WEB戦略、CMS構築、ホームページ制作・効果アップなら東京のガーディアン</p>
  </div>

  <div class="logo">
    <img src="images/logo.jpg" alt="ロゴ">
  </div>

  <div id="header">
    <ul>
      <li>ナビ１</li>
      <li>ナビ２</li>
      <li>ナビ３</li>
      <li>ナビ４</li>
    </ul>
  </div>


    <div class="main_side">
      <div class="main">
        <div class="contents">

          <h1 class="title">サービス</h1>

          <div class="service">
              <div class="image_1">
                <img src="images/freely.jpg" alt="画像">
                <h1>Freely</h1>
                <p>Freelyとは(株)ガーディアンが提供するCMS付WEBサイト構築、運営サービスです。</p>
              </div>

              <div class="image_1">
                <img src="images/darwin.jpg" alt="画像">
                <h1>Darwin</h1>
                <p>Darwinは株式会社ガーディアンが誇る最高級のCMS付ホームページ構築・運営サービスです。</p>
              </div>

              <div class="image_1">
                <img src="images/owlet.jpg" alt="画像">
                <h1>OWLet</h1>
                <p>4年で1000サイト越のオーダーメイド＆スクラッチ構築を実現した魔法のようなコアテクノロジー</p>
              </div>
          </div>
        </div>

        <div class="contents">
          <h1 class="title">求める人物像</h1>
          <ul>
            <li>『ウォーム・ハート』＆『クール・ヘッド』</li>
            <li>ミスを恐れないチャレンジ精神</li>
            <li>勇気を持って行動できる若者</li>
          </ul>

          <div class="sub">
            <h1>『ウォーム・ハート』＆『クール・ヘッド』</h1>
            <h2>株式会社ガーディアンの<span>経営原則です。</span></h2>
            <p>仕事におけるいかなる場合でも上の言葉を決して忘れないでください。</p>
            <p>ガーディアンでは、温かい心情（Warm heart）を冷静な頭脳（Cool head）をとても大事に考えています。</p>
            <p>これは、ケンブリッジ大学の初代経営学部巨教授の言葉を引用したものです。</p>
          </div>
        </div>

        <div class="contents">
          <h1 class="title">HPを成功に導く３つのWEBノウハウ</h1>
          <ol>
            <li>デザインをどう考えるか！？</li>
            <li>コンテンツをどう考えるか！？</li>
            <li>運営をどう考えるか！？</li>
          </ol>
        </div>


        <div class="logo">
          <img src="images/logo.jpg" alt="ロゴ">
        </div>
    </div>

      <div class="side">
        <img src="images/bannr.gif">
        <img src="images/bannr.gif">
        <img src="images/bannr.gif">
      </div>
    </div>

  <div class="under_line"></div>

  <div id="footer">
    <p>Copyright&copy;2012-2015 GUARDIAN.INC.All rights reserved</p>
  </div>

</body>
</html>

@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	border-collapse: collapse;
}


textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}

html {
	width: 100%;
}

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* 上の部分は気にせずここから書く */
@media screen and (min-width: 481px){

#top p {
	width: 980px;
	margin: auto;
}

.logo {
	width: 980px;
	margin: auto;
}

.logo img {
	width: 260px;
}

#header {
	margin-top: 20px;
}

#header ul{
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #001754;
	color: #fff;
	font-size: 15px;
	list-style-type: none;
}

#header ul li {
	width: 245px;
	text-align: center;
	border-left: 1px solid #fff;
}

#header li + li {
	border-left: 1px solid #fff;
}

#header li:last-child {
	border-right: 1px solid #fff;
}

.main_side {
	display: flex;
	justify-content: center;
}

.main {
	width: 700px;

}

.title {
	margin: 20px 0 10px 0;
	font-size: 20px;
	color: #fff;
	background-color: #001754;
}

.service {
	width: 700px;
	display: flex;
	justify-content: space-between;
}

.image_1 {
	width: 203px;
}

.image_1 img {
	width: 203px;
}

.image_1 h1 {
	font-size: 18px;
	margin:10px;
	text-align: center;
}

.image_1 p {
	font-size: 15px;
	margin-bottom: 30px;
}

.contents ul {
	list-style-type: disc;
	margin-left: 24px;
	margin-bottom: 30px;
}

.sub {
	margin-bottom: 40px;
}

.sub h1 {
	color: #001754;
	font-size: 18px;
	border-bottom: solid 2px #000;
}

.sub h2 {
	margin: 20px 0 30px 0;
}

.sub h2 span {
	font-weight: bold;
}

.contents ol {
	list-style-type: disc;
	margin-left: 24px;
	margin-bottom: 60px;
}

.side {
	float: right;
	margin-top: 10px;
}

.side img {
	width: 260px;
	height: 100px;
	margin: 10px;
}

#footer {
	background-color: #001754;
	font-size: 13px;
	color: #fff;
	margin-top: 10px;
}

#footer p {
	text-align: center;
	padding: 5px;
}

.under_line {
	position: absolute;
	top: 1090px;
	border-top: solid 2px #000;
	z-index: 1;
	width: 100%;
}

}

@media screen and (max-width: 480px)　{

	.logo {
		width: 100%;
	}

	#header ul{
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #001754;
		color: #fff;
		font-size: 15px;
		list-style-type: none;
	}



}

試したこと

headにviewportを追加したり、@mediaをcssに追加したりしましたが、反映されません。
プログラミング初心者ですが、どうしても実現したいため、ご教示お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

全角スペースが随所に入ってますが、そこは問題ないのでしょうか。

html
1
2  <link rel="stylesheet" type="text/css" href="base.css"[　]/>

css
1
2@media screen and (max-width: 480px)[　]{

「おかしいな」とおもったら構文チェックを。
ネット上にサービスもありますが、構文チェックサービス、プラグインの入れられる
エディタ、IDEを使用してください。

以下、eclipseの例

「警告」と「エラー」もわかりやすいように指摘してくれています。

やはり全角スペースも可視化されているもののほうが良いです。

投稿2021/01/24 09:13

編集2021/01/24 09:48

m.ts10806

総合スコア80875

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

レスポンシブデザインを実装したい！

前提・実現したいこと

該当のソースコード

試したこと

関連した質問