@charset "UTF-8"; body{ /*--HTMLやCSSにおいて、要素にwidth（幅）とheight（高さ）を指定する必要性は一般的にはありません。要素は通常、ブラウザウィンドウ全体に自動的に広がります。--*/ border:solid px red; padding-top: 20px; font-size: 1.1rem;/*--要素に対してfont-sizeを指定することは一般的であり、推奨される方法です。デフォルトでは16px。65.4%にすれば10pxになる。remは2で20px--*/ } /*ヘッダーの始まり*/ header{border:solid px blue; width:100%; height:auto;} h1{/*--このサイトの紹介--*/ font-size:2rem; text-align:center; color:forestgreen ; margin-bottom: 10px; background-color:white; margin-top: 80px; } section.mokuteki{ width:70%; height: auto; margin-right: auto; margin-left: auto; } nav{/*--PCメニュー６つの大枠--*/ border:solid px red; } ul.global-menu{/*--PC横並びメニュー６つのフォントサイズなど--*/ border:solid px yellowgreen; text-align: center;/*--メニュー内の文字がセンタリング--*/ font-size: 1.5rem; font-weight: bold; padding: 0 ; margin-bottom: 0px; display:flex ;/* flexで横並びにする */ align-items: center; /* 垂直方向の中央揃え */ justify-content: center; /* 横方向の中央揃えこのプロパティはブロック要素、インライン要素どちらもセンタリングできる*/ } nav ul li{ background-color: ; border:solid px brown; list-style: none; /* リストのマーカー（点）を削除 */ height:3rem; display:flex ; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 10px; margin-right: 3%; } nav ul a li#home {/* メニューのホームの文字色が赤にする */ color: red; font-weight: bold; background-color: white;/* PCメニューのそれぞれの背景色 */ width:8rem;/* PCメニューそれぞれの幅 */ margin-right: 2rem; } nav ul a li#birdname{ color:black; font-size: 1.3rem; font-weight: bolder; background-color: white; width:8rem; margin-right: 2rem; } nav ul a li#media{ color:black; font-size: 1.3rem; font-weight: bolder; background-color: white; width:8rem; margin-right: 2rem; } nav ul a li#zukan{ color:black; font-size: 1.3rem; font-weight: bolder; background-color: white; width:8rem; margin-right: 2rem; } nav ul a li#keijiban{ color:black; font-size: 1.3rem; font-weight: bolder; background-color: white; width:8rem; margin-right: 2rem; } nav ul a li#toiawase{ color:black; font-size: 1.3rem; font-weight: bolder; background-color: white; width:8rem; margin-right: 2rem; } a { text-decoration: none;/* メニューをリンクにした際にできる下線を消去 */ } nav ul li#home:hover{/* マウスが通るとメニューの色がwhiteに変わる */ background-color: lightcyan; } nav ul li#birdname:hover{/* マウスが通るとメニューの色がwhiteに変わる */ background-color: lightcyan; } nav ul li#media:hover{/* マウスが通るとメニューの色がwhiteに変わる */ background-color: lightcyan; } nav ul li#zukan:hover{/* マウスが通るとメニューの色がwhiteに変わる */ background-color: lightcyan; } nav ul li#keijiban:hover{/* マウスが通るとメニューの色がwhiteに変わる */ background-color: lightcyan; } nav ul li#toiawase:hover{/* マウスが通るとメニューの色がwhiteに変わる */ background-color: lightcyan; } /* ハンバーガーメニューについてのCSS */ /* ハンバーガーボタンを押してチェックがONの時だけスマホ用メニューを画面左端に移動する */ #sp-menu__check:checked ~ .sp-menu__content {/*#sp-menu__check:checkedはハンバーガーメニューが開いた状態のときに、.sp-menu__content 要素にスタイルを適用します。さらに"~"は指定した要素の後にある要素全てに適用されます。*/ left: 0;/* 0以外では画面から出てしまうので通常は0で使う */ } .sp-menu__box {/* ハンバーガーメニューボタンに関するCSS */ position: fixed;/*fixed」を使うと横から出てきたメニューは固定され、後ろの画面をマウスでスクロールしても出てきたメニューはスクロールしません。*/ top: 2rem;/* ハンバーガーメニューボタンの位置で増やすと下に下がる */ right: 3rem;/* ハンバーガーメニューボタンの位置で増やすと左に移動する */ display: flex; height: 4rem;/* ハンバーガーメニューボタンの高さ 60px*/ width: 4rem;/* ハンバーガーメニューボタンの幅 60px*/ justify-content: center; align-items: center; z-index: 100; background: transparent;/* ハンバーガーメニューボタンの色 */ } .sp-menu__box span, .sp-menu__box span:before, .sp-menu__box span:after { content: ""; display: none;/* 三本線を表示させる。消す場合は"none" */ height: 3px;/* ハンバーガーメニューの三本線の太さ */ width: 3rem;/* ハンバーガーメニューの三本線の長さ */ border-radius: 3px; background: black;/* ハンバーガーメニューの三本線の色 */ position: absolute;/* positionは、指定した要素の配置方法を決められるプロパティであり、 absoluteは左上角の起点である絶対配置からどれだけ離れているかが指定できます。 */ } .sp-menu__box span:before { bottom: 8px; } .sp-menu__box span:after { top: 8px; } #sp-menu__check { display: none;/*チェックボックスを表示させるかさせないか。表示させたい場合はblockにする */ } #sp-menu__check:checked ~ .sp-menu__box span { background: rgba(255, 255, 255, 0);/* この数字を変えるとHBメニューをクリックした時の✖の形が変わった。 */ } #sp-menu__check:checked ~ .sp-menu__box span::before { bottom: 0; transform: rotate(45deg);/*HBボタンを押したとき線を45度回転させ✖にする。*/ } #sp-menu__check:checked ~ .sp-menu__box span::after {/*HBボタンを押したとき線が 45度元に戻り横線になる。*/ top: 0; transform: rotate(-45deg); } /*HBメニューがスライドして出てくる時のCSS */ .sp-menu__content { border:solid px pink; width: 15%;/* 出てくるHBメニューの幅 */ height:auto;/* 出てくるHBメニューの高さ */ position: fixed;/*fixed」を使うと横から出てきたメニューは固定され、後ろの画面をマウスでスクロールしても出てきたメニューはスクロールしません。*/ top: 0;/* 出てくるメニューの上のmarginが0ということ。数を増やしていけば下に下がる */ /* 普段は画面外にするために左端を画面右端の位置にする */ left: 100%;/* 100%にすればHBメニューは隠れる。50％なら半分しか隠れない。 */ z-index: 90;/*z-indexは要素の重なり順を指定するプロパティである。指定した値が大きい要素ほど順位が上に表示されます。数字には整数を入れます。*/ background-color: white;/*出てくるHBメニューの色 */ /* transitionは、ある要素の状態の変化をアニメーションとして動作させることができる。横にスライドし、スピードも変更できる */ transition: all 0.5s; display: none; } ul.sp-menu__list {/*出てくるメニューの位置を調整する。top,left,bottom*/ border: solid px red; width:95%;/*出てくるメニューの全体枠の幅*/ height:auto;/*出てくるメニューの全体枠の高さ*/ padding-left:3%;/*出てくるメニューそれぞれの左の余白を小さくする*/ } .sp-menu__item {/*出てくるメニューそれぞれの枠の幅を調整できる。*/ border-bottom: solid 1px white; list-style: none; width:83%; } .sp-menu__link {/*出てくるメニューの文字の並びや大きさなど。*/ display: block; color: black; border: solid 1px silver; width: 100%;/*出てくるメニューのそれぞれの枠*/ font-size: 1.3rem;/*出てくるメニューの文字の大きさ。*/ /*box-sizing: border-box;*/ white-space: nowrap; text-decoration: none; padding: 5% 5% 5% 5%; background-color: white; text-align: center; } /*エラーメッセージ*/ .errme{font-size: 30px;color:red;} /*「お問い合わせ」というタイトル*/ .taitolu{border:solid px;font-size: 30px; width:740px;height:50px; color:green; text-align: center;float:left;margin-bottom: 50px; margin-left:130px;margin-right: 130px; } /*「お電話」の見出し*/ .denwa{border-top:solid 1px silver; border-bottom:solid 1px silver; font-size: 20px;padding-top: 15px; width:740px;height:40px; text-align: center;float:left;margin-bottom: 0px; margin-left:130px;margin-right: 130px;} /*番号*/ .bangou{border:solid px;font-size: 35px; width:740px;height:50px;font-weight: bold; text-align: center;float:left;margin-bottom: 0px; margin-left:130px;margin-right: 130px;margin-top: 30px;} /*営業時間*/ .jikan{border:solid px red;font-size: 25px; width:740px;height:50px;font-weight: normal; text-align: center;float:left;margin-bottom: 20px; margin-left:130px;margin-right: 130px;margin-top: 20px;} /*フォームで送信*/ .form{border-top:solid 1px silver; border-bottom:solid 1px silver; font-size: 20px;padding-top: 15px; width:740px;height:40px; text-align: center;float:left;margin-bottom: 30px; margin-left:130px;margin-right: 130px;} .kudasai{border:solid px silver; font-size: 20px;padding-top: 15px; width:740px;height:35px; float:left;margin-bottom: 30px; margin-left:130px;margin-right: 130px;} /*フォーム全体の枠の大きさ*/ .nyuulyoku{border:solid px orange; width:800px;height:400px;float:left; margin-left:130px;margin-right: 130px;} .hissu{color:red;} .form-name{width:560px;height:25px;margin-bottom: 30px;}/*お名前フォーム枠の大きさ*/ .form-mail{width:560px;height:25px;margin-bottom: 30px;}/*メールフォーム枠の大きさ*/ .form-jyuusyo{width:560px;height:25px;margin-bottom: 30px;}/*住所フォーム枠の大きさ*/ .form-denwa{width:560px;height:25px;margin-bottom: 30px;}/*電話フォーム枠の大きさ*/ /*お問い合わせ表示の位置*/ #Qwaku{border:solid px ;margin-right: 0px; width:180px;height:130px;float:left;} /*お問い合わせ内容の枠の大きさ*/ #naiyou{width:560px;height:125px; font-size:20px; } .button{border:solid px;margin-top:40px; width:740px;height:40px; text-align: center; }