本日のテーマ
webページ制作実践で作成したページをRWD対応させましょう。
webページ制作制作実践 ⑤
webページ制作実践を作成したページをレスポンシブwebデザインを対応させましょう。
1、メディアクエリの記述 2、レスポンシブwebデザインの対応
@charset “UTF-8”;
html {
scroll-behavior: smooth;
}
body {
background-color: #fff;
color: #333;
font-family: YuMincho, “Yu Mincho”,”MS PMincho”,”ＭＳ Ｐ明朝”, “Hiragino Mincho ProN”,”ヒラギノ明朝 ProN”,”serif”;
}
h1,h2,h3,h4,h5,h6 {
text-align: center;
}
h2 {
margin: 0 0 40px;
font-size: 2em;
}
h3 {
margin: 0 0 20px;
font-size: 1.5em;
}
ul {
list-style: none;
}
a {
display: block;
}
/===============header===============/
header {
width: 100%;
height: 100vh;
margin: 0 0 100px;/本来150pxだが、イベント日時のアイキャッチが50px食い込んできてるので/
background-image: url(“images/hero.jpg”);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
text-shadow: 0 0 5px #333, 0 0 5px #333;
}
@media screen and (max-width: 760px) {
header {
height: 50vh;
}
}
header nav.globalNavi {
width: 100%;
height: 60px;
padding: 0;
background-color: rgba(66,66,66,0.8);
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
header nav.globalNavi h1 {
}
header nav.globalNavi h1 a {
padding: 5px 10px;
}
header nav.globalNavi h1 a img {
width: 130px;
}
header nav.globalNavi ul.pcMenu {
width: 700px;
margin: 0 5px 0 0;
display: flex;
justify-content: space-between;
font-size: 18px;
}
@media screen and (max-width: 760px) {
header nav.globalNavi ul.pcMenu{
display: none;
}
}
header nav.globalNavi ul li {
}
header nav.globalNavi ul li a{
padding: 15px 5px;
}
/== スマホ用メニュー(ハンバーガーメニュー)==/
/* PC版では非表示、ブレイクポイント(今回は760px)以下で表示 */
div.hamburgerMenu {
display: none;
}
@media screen and (max-width: 760px) {
div.hamburgerMenu {
display: block;
}
}
/* 三ボタンの領域を右上に作成、背景色設定、top/rightでボタンの位置を調整、z-indexで最前面に*/
div.hamburgerMenu .menuBtn {
width: 60px;
height: 60px;
background-color: rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 0;
z-index: 90;
cursor: pointer;
}
/* ボタンの3本線を作成、線の幅、線の太さ、線の色を設定 */
div.hamburgerMenu .menuBtn span,
div.hamburgerMenu .menuBtn span:before,
div.hamburgerMenu .menuBtn span:after {
content: ”;
width: 35px;
height: 3px;
border-radius: 3px;
background-color: #fff;
display: block;
position: absolute;
}
/* 上の線は上方向に10pxずらす */
div.hamburgerMenu .menuBtn span:before {
bottom: 10px;
}
/* 下の線は下方向に10pxずらす */
div.hamburgerMenu .menuBtn span:after {
top: 10px;
}
/* ボタンクリック時：真ん中の線は透明に */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span {
background-color: rgba(255, 255, 255, 0);
}
/* ボタンクリック時：上の線を斜めに（／） */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span::before {
bottom: 0;
transform: rotate(45deg);
}
/* ボタンクリック時：下の線を斜めに（＼） */
div.hamburgerMenu #menuBtnCheck:checked ~ .menuBtn span::after {
top: 0;
transform: rotate(-45deg);
}
/* メニューの状態を保持するチェックボックスは非表示 */
div.hamburgerMenu #menuBtnCheck {
display: none;
}
/* メニューの領域を作成、背景の大きさ、背景色、表示位置、アニメーション（スピードの調整） / div.hamburgerMenu .menuContent { width: 100%; height: auto;/ ★100%にするとコンテンツ領域をウィンドウの下までに / padding: 0 10px;/ ★メニュー領域の左右の隙間 */
background-color: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 100%;
z-index: 80;
transition: all 0.5s;
}
/* メニューの領域を作成、横幅を設定。メニューリストの表示位置を×ボタンの大きさぶん下げる / div.hamburgerMenu .menuContent ul { width: 180px;/ ★100%にすると横幅いっぱい */
padding: 80px 0 0;
display: block;
}
/* メニュー項目間の線を追加 */
div.hamburgerMenu .menuContent ul li {
border-top: solid 1px #fff;
}
/* ☆最初のメニュー項目の上線なくす */
div.hamburgerMenu .menuContent ul li:first-child {
border-top: none;
}
/* メニューのリンク実体。クリックできる余白を作る、文字色、表示位置 */
div.hamburgerMenu .menuContent ul li a {
padding: 10px 0px;
display: block;
font-size: 16px;
color: #fff;
text-align: center;
}
/* ボタンクリック時：メニュー領域の引き出し位置 / div.hamburgerMenu #menuBtnCheck:checked ~ .menuContent { left: calc(100% – 200px);/ ★0にすると左端まで */
}
header address {
padding: 70px 10px 0 0;
text-align: right;
}
header address em {
font-size: 1.5em;
}
/===============main===============/
/ページ内リンクでジャンプした時、ナビゲーションで見出しが隠れないようにするため、 padding-topでナビゲーションの高さを確保、その分下に下がるので同じ高さ分をネガティブマージンで指定する/
main {
max-width: 960px;
padding: 110px 0 0;
margin: -60px auto 0;
}
@media screen and (max-width: 760px) {
main {
width: 90%;
}
}
/=====main section.event=====/
main section.event {
padding: 100px 30px 0;
border: #333 1px solid;
margin: 0 0 150px;
}
@media screen and (max-width: 760px) {
main section.event {
padding: 100px 20px 0;
}
}
/margin-top=(飛び出す分）50px+(section.eventのpadding-top)100px/
main section.event div.eventEyecatch {
width: 150px;
height: 150px;
margin: -150px 0 0 auto;
}
main section.event div.eventEyecatch img {
}
main section.event h2 {
}
main section.event p {
margin: 0 0 60px;
}
main section.event div.eventFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
main section.event div.eventFlex img {
width: calc((100% – 60px)/3);
margin: 0 0 30px;
}
@media screen and (max-width: 760px) {
main section.event div.eventFlex img {
width: calc((100% – 20px)/2);
}
}
/=====main section.purpuse=====/
/ページ内リンクでジャンプした時、ナビゲーションで見出しが隠れないようにするため、 padding-topでナビゲーションの高さを確保、その分下に下がるので同じ高さ分をネガティブマージンで指定する/
main section.purpose {
padding: 60px 0 0 ;
margin: -60px 0 150px;
}
main section.purpose h2 {
}
main section.purpose div.purposeWraper {
margin: 0 0 50px;
display: flex;
flex-wrap: wrap;
}
main section.purpose div.purposeWraper div.purposeInner {
width: 50%;
padding: 20px 30px;
}
@media screen and (max-width: 760px) {
main section.purpose div.purposeWraper div.purposeInner {
width: 100%;
padding: 0;
margin:0 0 10px;
}
}
main section.purpose div.purposeWraper div.purposeInner h3 {
}
main section.purpose div.purposeWraper div.purposeInner p {
}
main section.purpose div.purposeWraper div.purposeImg {
width: 50%;
}
@media screen and (max-width: 760px) {
main section.purpose div.purposeWraper div.purposeImg {
width: 100%;
}
}
main section.purpose div.daily {
}
main section.purpose div.daily .purposeInner {
}
main section.purpose div.daily .purposeImg {
}
main section.purpose div.gift {
flex-direction: row;
}
main section.purpose div.gift .purposeInner {
}
main section.purpose div.gift .purposeImg {
}
main section.purpose div.wedding {
}
main section.purpose div.wedding .purposeInner {
}
main section.purpose div.wedding .purposeImg {
}
main section.purpose div:nth-of-type(odd) {
flex-direction: row-reverse;
}
/=====main section.access=====/
/ページ内リンクでジャンプした時、ナビゲーションで見出しが隠れないようにするため、 padding-topでナビゲーションの高さを確保、その分下に下がるので同じ高さ分をネガティブマージンで指定する/
main section.access {
padding: 60px 0 0 ;
margin: -60px 0 150px;
}
main section.access h2 {
}
main section.access h3 {
}
main section.access dl {
max-width: 26em;
margin: 0 auto 50px;
}
main section.access dl dt {
width: 8em;
margin: 0 1em 0 0;
text-align: right;
float: left;
}
@media screen and (max-width: 760px) {
main section.access dl dt {
width: 100%;
margin: 0;
text-align: center;
float: none;
}
}
main section.access dl dd {
width: 17em;
margin: 0 0 0 9em;
text-align: left;
}
@media screen and (max-width: 760px) {
main section.access dl dd {
width: 100%;
margin: 0 0 20px;
text-align: center;
}
}
main section.access div {
max-width: 500px;
margin: 0 auto 100px;
}
main section.access div img {
}
main section.access p {
width: 250px;
height: 50px;
border: 1px solid #333;
margin: 0 auto;
line-height: 2;
text-align: center;
font-size: 1.5em;
}
main section.access p a {
}
/===============footer===============/
footer {
padding: 40px 0 10px;
background-color: #555353;
text-align: center;
color: #fff;
}
footer nav {
}
footer nav ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer nav ul.primaryLinks {
max-width: 960px;
margin: 0 auto 40px;
font-size: 1.5em;
}
footer nav ul.primaryLinks li {
width: 20%;
text-align: center;
}
@media screen and (max-width: 760px) {
footer nav ul.primaryLinks li {
width: 100%;
line-height: 2;
}
}
footer nav ul.secondaryLinks {
max-width: 960px;
margin: 0 auto 50px;
font-size: 1.2em;
}
footer nav ul.secondaryLinks li {
width: 50%;
text-align: center;
}
@media screen and (max-width: 760px) {
footer nav ul.secondaryLinks li {
width: 100%;
line-height: 2;
}
}
footer nav ul.socialLinks {
width: 320px;
margin: 0 auto 50px;
}
footer nav ul.socialLinks li {
width: 50px;
}
footer address {
margin: 0 0 50px;
font-size: 1.2em;
}
footer address em {
font-size: 1.5em;
}
footer p {
}
footer p small {
}
footer div.toTop {
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
}
footer div.toTop img {
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
コメントを残す