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

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

ただいまの
回答率

88.93%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 713

yousuke-masa

score 12

下記ようなホームページを自作しているのですがスマホの普及も考えレスポンシブデザインも取り入れようと思っております。
そこでなのですが648pxのスマホサイズにも対応させるために以下のコードの<div class="mix">の中に3つ<div>属性が書いてあります。<div>のsub属性はdisplay:none;見えなくする予定なのですがsurport属性の下にmain属性がくるようなcssによる書き方を教えてほしいのです。

質問内容

  1. cssの@media screen のところにどのようなコードを書き込めば<div>のsurport属性の下に<div>のmain属性がくるようなcssが作成できますか。
  2. そしてレスポンシブデザインを取り入れる前のcssはどこに書き込むのがベストなのでしょうか。

回答をよろしくお願いします。
理由も付けてくださいますと自分で見返したときに助かります。

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords"content="">
<meta name="description"content="">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="./table.css">
<title>一覧</title>
</head>
<body>
<div class="header">
  <a href="../index.html">トップ</a><span class="sr">一覧</span>
  </div>
<div class="mix">
<div class="surport">
  <h1>目次</h1>
  <ul>
  <li><a href="#11_m"></a></li>
  <li><a href="#12_r"></a></li>
  </ul>
</div>
<div class="main">
<h1>一覧</h1>
<p>並び順です。</p>
<p>色がオレンジのボタンは他にリンクします。</p>
<table border="1">
<tr>
 <th>レベル分け</th>
 <th>LV20</th>
 <th>LV40</th>
 <th>LV60</th>
 <th>LV80</th>
 <th>LV100</th>
 </tr>
  <tr>
 <td colspan="6"id="e5_11_m"></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td colspan="6"id="12_r"></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
</table>
</div>
<div class="sub">
  <div class="koukoku">
       <p class="koukoku">スポンサーリンク</p>
       </div>
</div>
</div>
<p></p>
<div class="footer">
<a href="#">このページの一番上に</a>
</div>
</body>
</html>
/*ヘッダーの部分*/
div.header{
 padding-bottom: 20px
}
div.header > a{
background-color:#FFA500;
padding: 10px;
margin:10px;
text-decoration: none;
color:#FFFFFF;
margin: 20px;
}
span.sr{
margin: 10px;
}
/*3つのdivを囲むdiv*/
div.mix{
   display: table;
   margin: 0px;
   padding: 0px;
   width: 100%;
  border-top: medium solid #000000;
  border-bottom: medium solid #000000;
}
/*本文*/
div.mix div.main{
background-color:#FFA500;
border-left-style: groove;
border-right-style: groove;
display:table-cell;
width:60%
}
/*題名*/
h1{
margin: 10px 10px 10px 10px;
padding: 10px;
border-bottom: solid #0000FF;
}
/*区切りの線*/
p.surasshu_senn{
margin-left: 10px;
margin-right: 10px;
border-bottom:  solid #0000FF;
}
/*値の書いてある場所*/
table{
background-color:#F8F8FF;
margin-left: 20px;
margin-right: 10px;
padding: 10px;
}
th{
background-color:#E0FFFF;
margin: 30px 30px;
padding: 10px;
}
p{
margin-left: 20px;
margin-right: 10px;
}
/*一覧からお探しのところへ*/
div.mix div.surport{
display:table-cell;
width: 20%;
}
ul{
margin: 10px;
list-style-type:decimal-leading-zero;
}
li{
border: medium solid #fffff0;
background-color:#FFA500;
}
li > a{
color:#FFFFFF;
text-decoration: none;
}
div.footer{
clear:both;
text-align: center;
margin: 10px;
padding: 10px;
height : auto;
}
/*フッターの書き込み*/
div.footer > a{
background-color:#FFA500;
color:#FFFFFF;
padding: 10px;
text-decoration: none;
}

/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
}
/*769pxまでの内容 終わり*/



/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
div.sub{
display:none;
}
}
/*768pxまでの内容 終わり*/



/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
div.sub{
display:none;
}
}
/*648pxまでの内容 終わり*/
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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

@media screen and (max-width:640px){
    div.sub{
        display:none;
    }
    div.mix div.surport,
    div.mix div.main {
        display: block;
        width: 100%;
    }
}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/25 15:55

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

    キャンセル

  • 2016/11/25 16:11

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

    キャンセル

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

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る