/*全体*/ *, *:before, *:after { /* *(アスタリスク)全要素に適用 */ box-sizing: border-box; /*高さ・幅 含めない*/ } body{ background-color: #f5deb3; /*背景 色指定*/ min-height: 98vh; /*高さの最小値*/ margin: 3ex; /*余白*/ } /*名前*/ header h1{ text-align: center; /*真ん中にする*/ } /*ナビゲーション*/ nav{ margin: none; text-align: center; /*真ん中にする*/ font-size: 15px; /*フォントの大きさ*/ line-height: 2em; /*行の高さを指定*/ } nav ul{ margin: 0; /*余白*/ padding: 0; /*余白*/ } nav ul li{ list-style: none; /*箇条書きの点をなくす*/ display: inline-block; /*横に並ぶ inlineとblockの中間*/ width: 10%; /*隣同士の間隔*/ min-width: 85px; /*幅の最低値*/ } nav ul li a{ text-decoration: underline; /*テキストに下線引く*/ color: #8b4513; /*テキスト 色指定*/ } nav ul li a:hover{ color: #ff8c00; /*カーソルのせたとき,テキスト 色指定*/ } /*メニュー*/ .botan .nakami { position: fixed; /*固定する スクロール反映されない*/ top: 0; /*上から0のところ*/ left: -100vw; /*画面外に設定*/ width: 200px; /*幅 200px→6cm*/ height: 100%; /*高さ 100% → 画面の高さいっぱい*/ cursor: pointer; /*マウスポインターが要素にあるときのマウスカーソルの形 指マーク*/ -webkit-transition: 0.53s transform; /*識別子 -webkit → Google、Chrome、Safari(のとき対応)*/ transition: 0.53s transform; /*変化する際の速度 transform→移動する*/ -webkit-transition-timing-function: linear; /*トランジションの効果 一定の速度(Google、Chrome、Safariのとき対応)*/ transition-timing-function: linear; /*一定の速度*/ background-color: #ffa500; /*背景 色指定*/ } .botan .nakami p{ text-align: center; /*真ん中にする*/ font-size: 15px; /*フォントの大きさ*/ color: #8b4513; /*テキスト 色指定*/ } .botan .nakami ul { margin: 7px; /*余白*/ padding: 2px; /*余白*/ } .botan .nakami li { list-style: none; /*箇条書きの点をなくす*/ color: #8b4513; /*テキスト 色指定*/ } .botan .nakami li a { display: block; /*ブロック要素を形成 縦に並ぶ*/ padding: 5px 20px; /*余白*/ text-decoration: none; /*テキストの装飾 行わない*/ color: #f5deb3; /*テキスト 色指定*/ border-bottom: 1px solid #f5deb3; /*下線を引く 実線 色指定*/ } .botan #icon { position: absolute; /* 要素の配置方法を指定 */ display: none; /*要素を非表示*/ opacity: 0; /*不透明度 0→透明*/ } .botan #icon:checked ~ .nakami{ -webkit-transform: translateX(100vw); /*Google、Chrome、Safariのとき対応*/ transform: translateX(100vw); /*要素を二次元平面上の水平方向で再配置 横いっぱい*/ } /*でてくる→とじる*/ .botan #icon ~ label{ display: block; /*ブロック要素を形成*/ padding: 0.5em; /*余白*/ cursor: pointer; /*マウスポインターが要素にあるときのマウスカーソルの形 指マーク*/ -webkit-transition: 0.5s transform; /*Google、Chrome、Safariのとき対応*/ transition: 0.5s transform; /*移動する*/ -webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); /*Google、Chrome、Safariのとき対応*/ transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27); /*一定の速度*/ text-align: left; /*左にする*/ color: #8b4513; /*テキスト 色指定*/ } label{ position: absolute; /*配置決める 絶対配置*/ top: 25px; /*上(原点)から25px*/ left: 25px; /*左(原点)から25px*/ } .botan #icon:checked ~ label{ /*:checked→一覧表示、デザイン変更*/ -webkit-transform: translateX(250px); /*Google、Chrome、Safariのとき対応*/ transform: translateX(250px); /*要素を二次元平面上の水平方向で再配置 */ } .botan #icon ~ label::before{ /*クリックした後 ::before→直前にスタイル適用*/ /*font-family: 'FontAwesome'; webアイコンフォントを表示*/ content: 'でてくる'; /*要素の前後に文字や画像を挿入*/ font-size: 15px; /*テキスト 大きさ*/ } .botan #icon:checked ~ label::before{ /*クリックした後*/ content: 'とじる'; /*要素の前後に文字や画像を挿入*/ } /*写真スライドする*/ .slide ul{ display: flex; /*横並びにする*/ overflow-x: scroll; /*overflow-x →範囲内に内容収まらないとき表示どうするか x軸 scroll →収まらないときスクロールバー表示*/ margin: 0; /*余白*/ padding: 0; /*余白*/ } .slide li{ min-width: 50%; /*ブラウザ大きさ代えたときの最小値*/ margin: 0; /*余白*/ padding: 0; /*余白*/ list-style: none; /*箇条書きの点をなくす*/ }