質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1109閲覧

レスポンシブデザインについて

yousuke-masa

総合スコア12

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/25 06:26

編集2016/11/25 06:27

下記ようなホームページを自作しているのですがスマホの普及も考えレスポンシブデザインも取り入れようと思っております。
そこでなのですが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: 10px82padding: 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までの内容 終わり*/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

640をサンプルにこんな感じですかね。

css

1@media screen and (max-width:640px){ 2 div.sub{ 3 display:none; 4 } 5 div.mix div.surport, 6 div.mix div.main { 7 display: block; 8 width: 100%; 9 } 10}

順番ですが基本的には大きさの順でいいと思います。
「大→小」or「小→大」で。

投稿2016/11/25 06:43

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gin

2016/11/25 06:55

【補足】 「大→小」or「小→大」は素のCSSでまず書いて、メディアクエリで調節していくということです。 「大→小」はPC版を素で書いてスマホ版をメディアクエリで。 「小→大」はスマホ版を素で書いてPC版を。これはモバイルファーストとも言われます。
yousuke-masa

2016/11/25 07:11

連絡ありがとうございます。 ここでブロックタグでしたか。 ここで4時間位無駄にしてしまった自分が情けないです。 また質問があったら回答よろしくお願いします。 もちろんベストアンサーにさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問