実現したいこと
2つのシングルカラムを作成中、デスクトップ版とモバイル版で背景の大きさが変わってしまい直そうとしたらCSSが一部読み込まれなくなったのを直したい。
発生している問題・分からないこと
Webデザインを学び始めたばかりのド初心者です。デスクトップ版とモバイル版で同じ背景を使って作成をしましたがモバイル版で確認すると画像の位置がズレてしまいました。それを直そうとCSSをいじっていたら作成していた2つのシングルカラムがどちらも一部でCSSを読み込まなくなってしまいました。原因は確実にCSSの書き方の問題だと思うのですがごちゃごちゃになってしまい何が何だか分からなくなってしまいました。HTLMとCSSをどこまでこのサイトに載せて良いのか分かっていないので不足があるかと思いますがご教授頂けますと幸いです。
該当のソースコード
HTML(シングルカラム1つ目)
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>WCBC Cafe</title> 6 <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> 7 <meta name="viewport" content="width=device-width, initial-scale=1" 8 9<!-- ファビコン --> 10 <link rel="icon" type="image/png" href="images/WCBCafe/images/favicon.png"> 11 12 <!--リセット CSS--> 13 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 14 15 <!--Google フォント--> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 18 <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet"> 19 20<!--オリジナルCSS--> 21<link rel="stylesheet" href="singlcoloum.css"> 22 23</head> 24<body> 25 <div class="cover cover-home"> 26 <header class="page-header wrapper"> 27 <h1 class="align-center"> 28 <a href="singlcoloum.html"><img class="logo" src="images/WCBCafe/images/logo.svg" alt="WCBカフェホーム"</a> 29 </h1> 30 <nav> 31 <ul class="main-nav font-english"> 32 <li><a href="images/WCBCafe/news.html">News</a></li> 33 <li><a href="images/WCBCafe/menu.html">Menu</a></li> 34 <li><a href="images/WCBCafe/contact.html">Contact</a></li> 35 </ul> 36 </nav> 37 </header> 38 <h2 class="page-title font-english">We'll Make Your Day</h2> 39 </div> 40 41 <section class="about"> 42 <h3 class="heading-large font-english">about Cafe</h3> 43 <p> 44 Wcb Cafeは無添加の厳選素材とおしゃれな店内が魅力のカフェです。心と体に優しい、それでいて飽きのこない空間をご用意しております。 45 素材本来の美味しさを引き出したメニューを楽しみながら、癒しの時間をお過ごしください。 46 </p> 47 <div class="align-center"> 48 <a class="btn" href="images/WCBCafe/menu.html">メニューを見る</a> 49 </div> 50 </section> 51 52 <footer class="page-footer"> 53 <h3 class="heading-large font-english">Information</h3> 54 <table class="info"> 55 <tr> 56 <th>住所</th> 57 <td>東京都杉並区六本木0-0○◯○</td> 58 </tr> 59 <tr> 60 <th>電話</th> 61 <td>03-1111-xxxx</td> 62 </tr> 63 <tr> 64 <th>営業時間</th> 65 <td>10:00~22:00</td> 66 </tr> 67 <tr> 68 <th>店休日</th> 69 <td>水曜日</td> 70 </tr> 71 </table> 72 <div class="copyright"> 73 <small>© 2010 WCBCafe</small> 74 </div> 75 </footer> 76</body> 77</html>
HTML(シングルカラム2つ目)
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>WCBC Cafe-News</title> 6 <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 9<!-- ファビコン --> 10 <link rel="icon" type="image/png" href="images/WCBCafe/images/favicon.png"> 11 12 <!--リセット CSS--> 13 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 14 15 <!--Google フォント--> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 18 <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet"> 19 20<!--オリジナルCSS--> 21<link rel="stylesheet" href="singlcoloum.css"> 22 23</head> 24<body> 25 <div class="sub-cover cover-news"><!--クラス名変更--> 26 <header class="page-header wrapper"> 27 <h1 class="align-center"> 28 <a href="singlcoloum.html"><img class="logo" src="images/WCBCafe/images/logo.svg" alt="WCBカフェホーム"</a> 29 </h1> 30 <nav> 31 <ul class="main-nav font-english"> 32 <li><a href="images/WCBCafe/news.html">News</a></li> 33 <li><a href="images/WCBCafe/menu.html">Menu</a></li> 34 <li><a href="images/WCBCafe/contact.html">Contact</a></li> 35 </ul> 36 </nav> 37 </header> 38 <h2 class="page-title font-english">News</h2> 39 </div> 40 <footer class="page-footer"> 41 <h3 class="heading-large font-english">Information</h3> 42 <table class="info"> 43 <tr> 44 <th>住所</th> 45 <td>東京都杉並区六本木0-0○◯○</td> 46 </tr> 47 <tr> 48 <th>電話</th> 49 <td>03-1111-xxxx</td> 50 </tr> 51 <tr> 52 <th>営業時間</th> 53 <td>10:00~22:00</td> 54 </tr> 55 <tr> 56 <th>店休日</th> 57 <td>水曜日</td> 58 </tr> 59 </table> 60 <div class="copyright"> 61 <small>© 2010 WCBCafe</small> 62 </div> 63 </footer> 64</body> 65</html>
CSS
1@charset "UTF-8";2/*共通部分 3--------*/4html{5 font-size: 100%;6}7body{8 font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",sans-serif;9 line-height: 1.7;10 color: #432;11}12a{13 text-decoration: none;14}15img{16 max-width: 100%;17}18 19/*レイアウト 20---------*/21.wrapper{22 max-width: 1120px;23 margin: auto;24 padding: 0 1.5rem;25}26 27.align-center{28 text-align: center;29}30 31/* 見出し */32.font-english{33 font-family: 'Philosopher', sans-serif;34 font-weight: normal;35}36.page-title{37 font-size: 3rem;38 text-align: center;39 margin-top: 2rem;40 line-height: 1.4;41}42 43/*ヘッダー 44---------*/45.page-header{46 padding-top: .5rem;47}48.logo{49 width: 210px;50}51.main-nav{52 display: flex;53 justify-content: center;54 gap: 2.5rem;55 font-size: 1.5rem;56 list-style: none;57}58.main-nav a{59 color: #432;60}61.main-nav a:hover{62 color: #0db;63}64.cover{65 background-size: cover;66 background-position: center bottom;67 height: 800px; 68.cover-home{69 background-image: url(images/WCBCafe/images/cover-home-s.webp);70}71.about{72 max-width: 736px;73 padding: 0 1.5rem;74 margin: 3rem auto 4rem;75}76.about p {77 margin-bottom: 3rem;78}79.heading-large{80 font-size: 3rem;81 text-align: center;82 margin-bottom: 1rem;83}84/* ボタン */85.btn{86 display: inline-block;87 font-size: 1.5rem;88 background-color: #0db;89 color: #fff;90 border-radius: 8px;91 padding: 1rem 1.5rem;92 transition: background-color 1s ease-out 200ms;93}94.btn:hover{95 background-color: #0090aa;96 translate: 10px -20px;97}98/* フッター */99.page-footer{100 background-image: url(images/WCBCafe/images/footer-s.webp);101 background-size: cover;102 background-position: center;103 padding-top: 12rem;104}105.info{106 width: 100%;107 max-width: 544px;108 margin: auto;109 padding: 0 1.5rem;110 border-spacing: 0;111}112.info th,113.info td{114 border-bottom: 1px solid #c9c2bc;115}116.info th{117 text-align: left;118 font-weight: normal;119 padding: 1rem;120}121.info td{122 padding: 1rem 0;123}124.copyright{125 background-color: #432;126 text-align: center;127 padding: 2rem 0;128 margin-top: 6rem;129 color: #fff;130}131/* News */132.sub-cover{133 background-size: cover;134 background-position: center bottom;135 height: 528px;136 margin-bottom: 4rem;137}138.cover-news{139 background-image: url(images/WCBCafe/images/cover-news-s.webp);140}141/* デスクトップ版 142 ----------------- */143 @media (min-width: 800px) {144 /* 見出し */145 .page-title{146 font-size: 5rem;147 }148 .heading-large{149 font-size: 4rem;150 }151 152 /* ヘッダー */153 .page-header {154 display: flex;155 justify-content: space-between;156 padding-top: 1.5rem;157 }158 .main-nav {159 font-size: 2rem;160}161 162/* Home */163.cover-home{164 background-image: url(images/WCBCafe/images/cover-home-l.webp);165}166.about{167 margin: 4rem auto 0;168}169/* フッター */170.page-footer{171 background-image: url(images/WCBCafe/images/footer-l.webp);172 padding-top: 12rem;173}174.info th{175 padding-left: 2.5rem;176}
試したこと・調べたこと
上記の詳細・結果
お恥ずかしながらなぜこの様になってしまったのか理解ができておりません。
補足
特になし
0 コメント