下記ようなホームページを自作しているのですがスマホの普及も考えレスポンシブデザインも取り入れようと思っております。
そこでなのですが648pxのスマホサイズにも対応させるために以下のコードの<div class="mix">の中に3つ<div>属性が書いてあります。<div>のsub属性はdisplay:none;見えなくする予定なのですがsurport属性の下にmain属性がくるようなcssによる書き方を教えてほしいのです。
質問内容
0. cssの@media screen のところにどのようなコードを書き込めば<div>のsurport属性の下に<div>のmain属性がくるようなcssが作成できますか。
0. そしてレスポンシブデザインを取り入れる前のcssはどこに書き込むのがベストなのでしょうか。
回答をよろしくお願いします。
理由も付けてくださいますと自分で見返したときに助かります。
html
1<!Doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="keywords"content=""> 6<meta name="description"content=""> 7<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> 8<link rel="stylesheet" type="text/css" href="./table.css"> 9<title>一覧</title> 10</head> 11<body> 12<div class="header"> 13 <a href="../index.html">トップ</a>><span class="sr">一覧</span> 14 </div> 15<div class="mix"> 16<div class="surport"> 17 <h1>目次</h1> 18 <ul> 19 <li><a href="#11_m"></a></li> 20 <li><a href="#12_r"></a></li> 21 </ul> 22</div> 23<div class="main"> 24<h1>一覧</h1> 25<p>並び順です。</p> 26<p>色がオレンジのボタンは他にリンクします。</p> 27<table border="1"> 28<tr> 29 <th>レベル分け</th> 30 <th>LV20</th> 31 <th>LV40</th> 32 <th>LV60</th> 33 <th>LV80</th> 34 <th>LV100</th> 35 </tr> 36 <tr> 37 <td colspan="6"id="e5_11_m"></td> 38 </tr> 39 <tr> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 </tr> 47 <tr> 48 <td></td> 49 <td></td> 50 <td></td> 51 <td></td> 52 <td></td> 53 <td></td> 54 </tr> 55 <tr> 56 <td colspan="6"id="12_r"></td> 57 </tr> 58 <tr> 59 <td></td> 60 <td></td> 61 <td></td> 62 <td></td> 63 <td></td> 64 <td></td> 65 </tr> 66 <tr> 67 <td></td> 68 <td></td> 69 <td></td> 70 <td></td> 71 <td></td> 72 <td></td> 73 </tr> 74</table> 75</div> 76<div class="sub"> 77 <div class="koukoku"> 78 <p class="koukoku">スポンサーリンク</p> 79 </div> 80</div> 81</div> 82<p></p> 83<div class="footer"> 84<a href="#">このページの一番上に</a> 85</div> 86</body> 87</html>
css
1/*ヘッダーの部分*/ 2div.header{ 3 padding-bottom: 20px 4} 5div.header > a{ 6background-color:#FFA500; 7padding: 10px; 8margin:10px; 9text-decoration: none; 10color:#FFFFFF; 11margin: 20px; 12} 13span.sr{ 14margin: 10px; 15} 16/*3つのdivを囲むdiv*/ 17div.mix{ 18 display: table; 19 margin: 0px; 20 padding: 0px; 21 width: 100%; 22 border-top: medium solid #000000; 23 border-bottom: medium solid #000000; 24} 25/*本文*/ 26div.mix div.main{ 27background-color:#FFA500; 28border-left-style: groove; 29border-right-style: groove; 30display:table-cell; 31width:60% 32} 33/*題名*/ 34h1{ 35margin: 10px 10px 10px 10px; 36padding: 10px; 37border-bottom: solid #0000FF; 38} 39/*区切りの線*/ 40p.surasshu_senn{ 41margin-left: 10px; 42margin-right: 10px; 43border-bottom: solid #0000FF; 44} 45/*値の書いてある場所*/ 46table{ 47background-color:#F8F8FF; 48margin-left: 20px; 49margin-right: 10px; 50padding: 10px; 51} 52th{ 53background-color:#E0FFFF; 54margin: 30px 30px; 55padding: 10px; 56} 57p{ 58margin-left: 20px; 59margin-right: 10px; 60} 61/*一覧からお探しのところへ*/ 62div.mix div.surport{ 63display:table-cell; 64width: 20%; 65} 66ul{ 67margin: 10px; 68list-style-type:decimal-leading-zero; 69} 70li{ 71border: medium solid #fffff0; 72background-color:#FFA500; 73} 74li > a{ 75color:#FFFFFF; 76text-decoration: none; 77} 78div.footer{ 79clear:both; 80text-align: center; 81margin: 10px; 82padding: 10px; 83height : auto; 84} 85/*フッターの書き込み*/ 86div.footer > a{ 87background-color:#FFA500; 88color:#FFFFFF; 89padding: 10px; 90text-decoration: none; 91} 92 93/*=============================================== 94●style.css 画面の横幅が769px以上 95===============================================*/ 96@media screen and (min-width: 769px){ 97} 98/*769pxまでの内容 終わり*/ 99 100 101 102/*=============================================== 103●tablet.css 画面の横幅が768pxまで 104===============================================*/ 105@media screen and (max-width: 768px){ 106div.sub{ 107display:none; 108} 109} 110/*768pxまでの内容 終わり*/ 111 112 113 114/*=============================================== 115●smart.css 画面の横幅が640pxまで 116===============================================*/ 117@media screen and (max-width:640px){ 118div.sub{ 119display:none; 120} 121} 122/*648pxまでの内容 終わり*/
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/25 06:55
2016/11/25 07:11