すみません。
もう一度別な、サイトでレスポンシブしてみましたが、
メイン画像(クラス:__mainphoto__です。)のみ消えて1カラムになります。
2カラムから、1カラムレイアウトにしたいです。
解決策を教えて下さい。
※通常サイズのcssも追記します。
html
1コード 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <link href="base.css" rel="stylesheet" type="text/css"> 7 <title>作</title> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 10 </head> 11 <body> 12 <div class="header"> 13 <h1>道</h1> 14 </div> 15 <div id="main"> 16 <!-- グローバルナビゲーション部分 --> 17 <div id="gnav"> 18 <ul> 19 <li> 20 <a href="top.html" target=”_blank”>first</a> 21 </li>>> 22 <li> 23 <a href="ocean.html" target=”_blank”>second</a> 24 </li>>> 25 <li> 26 <a href="memo.html">third</a> 27 </li>>> 28 <li> 29 <a href="favorite.html">fourth</a> 30 </li> 31 </ul> 32 </div> 33 <div class="clear"></div> 34 <div class="main"> 35 ** <div class="mainphoto"></div>** 36 <p>このサイトは 37 </p> 38 <p class="relax">ごゆっくり、ご覧ください。</p> 39 </div> 40 </div> 41 <div class="clear"></div> 42 <hr> 43 <footer> 44 <p class="last">Copyright© 2019 All Rights Reserved.</p> 45 </footer> 46 </body> 47</html>
css
1コード 2@charset "utf-8"; 3* { 4 margin: 0; 5 padding: 0; 6} 7@media screen and (max-width:330px) { 8 body { 9 width: 100%; 10 margin: auto; 11 background: #EEFFFF; 12 font-family: avenir, sans-serif; 13} 14h1 { 15 color: #00ff00; 16 background: #FFFFCC; 17 font-style: italic; 18 text-align: center; 19 border-top: 1px dashed #9933ff; 20 border-bottom: 1px dashed #9933ff; 21 padding: 10px; 22 margin: 10px; 23 text-shadow: 2px 2px 3px #999; 24} 25h2 { 26 margin-top: 10px; 27} 28ul { 29 width: 40%; 30 padding-bottom: 20px; 31} 32/* デフォルトリンク色の設定 */ 33a { 34 color: #000080; 35 text-decoration: none; 36} 37a:hover { 38 color: #cce739; 39 text-decoration: underline; 40} 41/* グローバルナビゲーション 42---------------------------*/ 43#gnav{ 44 text-align: center; 45} 46#gnav li { 47 display: inline; 48 padding-right: 10px; 49 font-weight: bold; 50} 51 .mainphoto { 52 width:100%; 53 height: 400px; 54 background: #ff0000; 55} 56hr{ 57 width:330px; 58 margin-top: 10px; 59} 60.last { 61 font-weight: bold; 62 margin-top: 30px; 63 text-align: center; 64 text-shadow: -1px -1px 0 #fff, 1px 1px 0 #aaa; 65}
css
1コード 2@media screen and (min-width:1000px) { 3body { 4 width: 800px; 5 margin: auto; 6 background: #EEFFFF; 7 font-family: avenir, sans-serif; 8} 9h1 { 10 color: #00ff00; 11 background: #FFFFCC; 12 font-style: italic; 13 text-align: center; 14 border-top: 1px dashed #9933ff; 15 border-bottom: 1px dashed #9933ff; 16 padding: 10px; 17 margin: 10px; 18 text-shadow: 2px 2px 3px #999; 19} 20h2 { 21 margin-top: 10px; 22} 23 24ul { 25 padding-bottom: 20px; 26} 27/* デフォルトリンク色の設定 */ 28a { 29 color: #000080; 30 text-decoration: none; 31} 32a:hover { 33 color: #cce739; 34 text-decoration: underline; 35} 36/* グローバルナビゲーション 37---------------------------*/ 38#gnav{ 39 text-align: center; 40} 41#gnav li { 42 display: inline; 43 padding-right: 10px; 44 font-weight: bold; 45} 46.mainphoto { 47 width: 400px; 48 height: 400px; 49 margin-right: 20px; 50 background: #ff0000; 51 float: left; 52} 53.clear { 54 clear: both; 55} 56.main { 57 overflow: hidden; 58 /* 追記 */ 59}
typoです。
@media screen and (max-width:330px) {
が閉じてないです。
回答1件
あなたの回答
tips
プレビュー