スマートフォンとハンバーガーメニュー

    一番下の”メディアクエリ”注目して、（Media Query）は、CSSの機能の一つで、異なるデバイスや画面サイズに対して異なるスタイルを適用するために使用されます
    　　　
    
            @charset "utf-8";
    
            body {
           
                margin: auto;      /*: 中央に配置*/
                width: 800px;      /*固定幅800px*/
                min-height: 100vh;    /*最小高さをビュー高さの100%に設定*/
                display: flex;        /*フレックスボックスレイアウト。*/
                flex-direction: column;    /*フレックスアイテムを縦方向に配置*/
                background-image: url(http://masumo10.web.fc2.coexm/tile-g.gif);
                background-repeat: repeat-x;
                background-position: right;
                background-attachment: scroll; /* 背景画像固定はfixed */
                background-color: lightblue;   /* 淡い青 背景色 */
            }
            
            header {
                height: auto;     /*height: auto;: 自動高さ*/
                width: 800px;
                background-color: #D3D3D3;
                margin: auto; 　　　　/* 中央配置 position: center;は無効なプロパティです。中央配置はmargin: auto;で行います）。*/
            }
            
            .nav li {
                float: left;
                margin: 8px 4px 2px 0;
                border-radius: 0.5em;
                color: lightblue;
                background-color: lightblue;
            }
            
            .nav a {
                display: block;
                color: #00008B;
                border: 1px solid #999;
                padding: 0 7px;
                border-radius: 0.5em;
            }
            
            .nav a:hover {
                color: #FEF !important;
                border: 1px solid white;
            }
            
            .top li {
                padding: 2px 0;
            }
            
            div {
                display: flex;   /*フレックスボックスレイアウト*/
                flex: 1;          /*親コンテナ内で均等にスペースを取る*/
            }
            
            main {
                flex: 1;                   /*親コンテナ内で均等にスペースを取る*/
                float: left;
                padding: 0 0 15px 20px;
                background-color: #8A2BE2;
                width: 700px;
                margin: 0 auto;
                text-align: left;
            }
            
            nav {
                width: 250px;
            }
            
            li {
                list-style-type: none;
                line-height: 4rem;
                padding: 5px 10px;
                background-image: url("bss_1.png");
                background-repeat: no-repeat;
                background-position: 2px 8px;
                border-bottom: 1px dotted #666;
            }
            
            ul {
                list-style-type: none;
                margin: 0 0 20px 0;
                line-height: 4rem;
            }
            
            a:hover {
                color: coral;
            }
            
            aside {
                width: 250px;
            }
            
            footer {
                height: 200px;
            }
            
            #memo {
                background-color: #D8D8D8;
                padding: 0 0 30px 0;
            }
            
            .translate-rotate {
                margin-top: 35px;
                width: 470px;
                height: 2px;
                background-color: gold;                         /*背景色ゴールド*/
                transform: translateX(180px) rotate(13deg);     /*X軸方向に180px移動し、13度回転。*/
            }
            
            #welcome {
                border-radius: 16px;　　　　　　　　　　　　　　 /*  角を16px丸める*/
            }
            
            .top li {
                list-style-image: url('https://canape2020.stars.ne.jp/img/c.png'); /* 頭にCSSで画像挿入 */
            }
             メディアクエリ
            @media screen and (max-width: 900px) {　　/*画面幅が900px以下の場合に適用されるスタイル*/　
                body, nav, aside {
                    width: 100%;                     /*幅を100%に設定*/　
                }
                div {
                    flex-direction: column;          /*フレックスアイテムを縦方向に配置*/
                }
                main {
                    order: -1;                        /*フレックスアイテムの順序を変更。通常の順序より前に配置*/
                }
            }
            
    

• Top Page