2017/07/24

CSS備忘録　レスポンシブ　タイルデザインから1カラムデザインに切り替える

CSSの勉強を続けていく中で苦手意識が少し取れてきた気がします。
レスポンシブデザインにも挑戦しています。

とはいえ1から書いてと言われたらいささか辛いかもしれません。

というわけで備忘録です。 今回はレスポンシブ！

目的

画面の横幅があるときにはタイルデザインに、
狭いときには1カラムデザインに切り替えるレスポンシブなCSS！！

sample.html


<!DOCTYPE html>
<html>
    <head>
        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
        <link href="./samplecss.css" rel="stylesheet" type="text/css" />
        <title>sumple</title>
        </head>
        <body>
        <div id="container">
            <header>ヘッダーだよ</header>
            <main>メインだよ
                <div>
                <div id="topic-1">
                    <label>タイトルA</label>
                    <div id="m">aaaaaa<br>あいうえお</div>
                </div>
                <div id="topic-2">
                    <label>タイトルB</label>
                    <div id="m">bbbbbb<br>あいうえお</div>
                </div>
                <div id="topic-3">
                    <label>タイトルC</label>
                    <div id="m">cccccc<br>あいうえお</div>
                </div>
                <div id="topic-4">
                    <label>タイトルD</label>
                    <div id="m">dddddd<br>あいうえお</div> 
               </div>
                <div id="topic-5">
                    <label>タイトルE</label>
                    <div id="m">eeeeee<br>あいうえお</div>
                </div>
                <div id="topic-6">
                    <label>タイトルF</label>
                    <div id="m">ffffff<br>あいうえお</div>
                </div>
                <div id="topic-7">
                    <label>タイトルG</label>
                    <div id="m">gggggg<br>あいうえお</div>
                </div>
                <div id="topic-8">
                    <label>タイトルH</label>
                    <div id="m">hhhhhh<br>あいうえお</div>
                    </div>
                </div>
            </main>
            <footer>フッターだよ</footer>
        </div>
    </body>
</html>


samplecss.css

/*横幅500px以上の時のスタイル*/
@media screen and (min-width: 500px){
    * { 
       margin: 0px;
        padding: 0px; 
    } 
    html {
        height: 100%;
        background-color: #AACCCC; 
   } 
   body {
        height: 100%;
    } 
   #container{
        /* container以下の要素を横方向中央寄せする */ 
      margin: 0 auto;
      position: relative;
      height: auto;
      min-height: 100%;
      width:570px;
      /* containerの背景色とmainの背景色は合わせておく */
      background-color: #FFAAAA;
    }
    header{
        width:570px;
        background-color: #9999CC;
      }
    main{
        display: block;
        width:570px;
        min-height: 600px;
        /* footerの高さ分padding-bottomを設定する */
        padding-bottom: 30px;
        /* containerの背景色とmainの背景色は合わせておく */
        background-color: #FFAAAA;
    }
    footer {
        /* meinで設定したpadding-bottom分の高さを設定する */
        height: 30px;
        position: absolute;
        bottom: 0;
        width: 570px;
        background-color: #AAFFAA;
    }
    div[id*="topic"]{
        width: 150px;
        height: 150px;
        padding: 10px;
        margin: 10px;
        float: left;
        background-color: #AAFFAA;
    }
    div[id*="topic"]:first-child{
        width: 340px;
        float: left;
        }
    div[id*="topic"]:nth-child(2n){
        background-color: #EE99EE;
    }
    div[id*="topic"] label{
        font-size: 30px;
    }
    div[id*="topic"]:first-child label{
        font-size: 40px;
    }
}

 /*横幅500px未満の時のスタイル*/
@media screen and (max-width: 499px){
    * {
        margin: 0px;
        padding: 0px;
     }
     html {
        height: 100%;
        background-color: #AACCCC;
    }
    body {
        height: 100%;
    }
    #container{
        position: relative;
            height: auto;
        min-height: 100%;
         width:auto;
        /* containerの背景色とmainの背景色は合わせておく */
        background-color: #FFAA00;
    }
    header{
        width:auto;
        background-color: #9999CC;
      }
    main{
        display: block;
        width:auto;
        /* footerの高さ分padding-bottomを設定する */
        padding-bottom: 30px;
            /* containerの背景色とmainの背景色は合わせておく */
        background-color: #FFAA00;
    }
    footer {
        /* meinで設定したpadding-bottom分の高さを設定する */
        height: 30px;
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #AAFFAA;
    }
    div[id*="topic"]{
        width: auto;
        padding: 5px;
        margin: 5px;
        background-color: #AAFFAA;
    }
    div[id*="topic"] #m{
        display: none;
        /*visibility:hidden;*/
    }
    div[id*="topic"] label{
        font-size: 40px;
    }
    div[id*="topic"]:nth-child(2n){ 
       background-color: #EE99EE;
    }
}

表示例１

画面の幅が広いときはこんなタイルデザインになります。

解説

  • 一つ一つはdivタグで囲み、float: left;を指定する。
    ⇒要素が右に連なるようになる！
  • div[id*="topic"]:first-child{
        width: 340px;
        float: left;
    }
    を指定してidがtopicを含むものの中で1番目のものだけ、横に長くしている。

表示例２

画面の幅が狭いときは、1カラムデザインになります。
画面の幅が狭いので、タイトルだけを表示します。

ポイント！

メディアクエリを指定すること！
@media screen and (min-width: 500px){
    [各要素を書いていく]
}

@media screen and (max-width: 499px){
    [各要素を書いていく]
｝
メディアクエリで画面の幅で適用スタイルを切り替えることができる！

ご参考になれば幸いです。

適用は自己責任です。
時刻:
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

AWSに手を出してフレームワークも使ってみたが・・・。

サイトを作り直しました。 AWS上に構築した Content created by AXY を作り直しました。 具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。 特別何か問題点があったというわけで...

  • HTML5とJavascriptとPythonでファイルをアップロードしてみた。
    前回 HTML5とJavascriptとファイルビュアーを作ってみた。 で ローカル上にあるファイルの表示をしてみました。 今回はそのファイルをサーバーにアップロードして、アップロード先のURLを返してもらう ファイルアップローダーを作ってみようと思います。 ...
  • SVGで印鑑作ってみた。
    SVGで印鑑ポイ画像ツール を公開してから一か月ぐらいたってしましました。 本体はこちら Seal editer made with SVG です。 そろそろ何を作ったのか解説したいところです。 それでは本編です。