前提
以下のような良さげなHPを見つけたので真似してみましたが、画像のように3つの画像の右側に「News」がくっついて、
「instagram」ボタンの幅もおかしくなりました。
最後の方まで来たら、「instagram」ボタンが画像に被るように成ってしまいました。
ソースも公表していないので、どこが悪いのかわかりません。
分かる方教えて下さい。
これをなんとか作って、ポートフォリオに付け加えたいので、よろしくお願い致します。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
- ▲▲機能を動作するようにする
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>CHILLOUT - COFFEE & FOOD</title> 9 <!--25.36~ https://www.youtube.com/watch?v=XlNPebwSCpo&ab_channel=KawaiShotaro%2F%E6%B2%B3%E7%9B%B8%E5%8B%9D%E5%A4%AA%E9%83%8E --> 10 <meta name="discription" content="おしゃれなカフェのサイトです"> 11 <link rel="stylesheet" href="css/format.css"> 12 <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'> 13 14 15 </head> 16 17 <body> 18 <h1>CHILLOUT<br><span>COFFEE & FOOD</span></h1> 19 20 <ul class="globalNavi"> 21 <li>HOME</li> 22 <li>NEWS</li> 23 <li>CONCEPT</li> 24 <li>MENU</li> 25 <li>ACCESS</li> 26 <li>RESERVE</li> 27 </ul> 28 29 <div class="mainImage"> 30 <img src="images/main.jpg"> 31 </div> 32 33 <div class="aboutSection"> 34 <h2 class="hStyle">お店について<br><span>ABOUT</span></h2> 35 <ul> 36 <li> 37 <img src="images/about01.jpg"> 38 <h3>CAFE</h3> 39 <p>ゆったりとした時間の流れるカフェテリア</p> 40 </li> 41 <li> 42 <img src="images/about02.jpg"> 43 <h3>SWEETS</h3> 44 <p>パティシエ特性のオリジナルスイーツ</p> 45 </li> 46 <li> 47 <img src="images/about03.jpg"> 48 <h3>BOOK</h3> 49 <p>洋書専門のブックストアを併設</p> 50 </li> 51 </ul> 52 </div> 53 54 <div class="newsSection"> 55 <h2 class="hStyle">お知らせ<br><span>NEWS</span></h2> 56 <table> 57 <tr> 58 <th>2020.02.15</th> 59 <td>4/1はお休みさせていただきます</td> 60 </tr> 61 <tr> 62 <th>2020.02.10</th> 63 <td>新しい本を入荷しました</td> 64 </tr> 65 <tr> 66 <th>2020.02.01</th> 67 <td>リニューアルオープンしました</td> 68 </tr> 69 </table> 70 </div> 71 72 <div class="instagramBt"> 73 <a href="#">INSTAGRAM</a> 74 </div> 75 76 <div class="copyright"> 77 <p>2020 CHILLOUT COFFEE & FOOD</p> 78 </div> 79 <body> 80</html>
該当のソースコード
css
1body { 2 padding-top: 50px; 3 padding-bottom: 50px ; 4} 5 6h1 { 7 text-align: center; 8 font-size: 40px; 9 font-family: 'Oswald', sans-serif; 10 font-weight: normal; 11 letter-spacing: 1px; 12 line-height: 25px; 13} 14h1 span { 15 font-size: 15px; 16} 17.globalNavi { 18 text-align: center; 19 margin-bottom: 10px; 20} 21 22 23 24.globalNavi li { 25 display: inline-block; 26 margin-right:40px ; 27 font-family: 'Oswald', sans-serif; 28 font-size: 19px; 29 letter-spacing: 1px; 30} 31 32.globalNavi li:last-child { 33 margin-right: 0; 34} 35 36.mainImage { 37 width: 1000px; 38 margin-right: auto; 39 margin-left: auto; 40 margin-bottom: 50px; 41} 42 43.mainImage img { 44 width: 100%; 45 height: auto; 46} 47 48.aboutSection, 49.newSection { 50 width: 1000px; 51 margin-right: auto; 52 margin-left: auto; 53 margin-bottom: 50px; 54} 55 56.hStyle { 57 text-align: center; 58 font-size: 11px; 59 margin-bottom: 40px; 60 line-height: 25px; 61} 62 63.hStyle span { 64 font-size: 35px; 65 font-family: 'Oswald', sans-serif; 66 border-bottom: 2px solid #000000; 67} 68 69.aboutSection ul { 70 overflow: hiddden; 71 padding: 0; 72} 73 74.aboutSection li { 75 float: left; 76 list-style: none; 77 width: 32%; 78 margin-right: 2%; 79} 80 81.aboutSection li:last-child { 82 margin-right: 0; 83} 84 85.aboutSection li img { 86 width: 100%; 87 height: auto; 88} 89 90.aboutSection h3 { 91 font-size: 25px; 92 font-family: 'Oswald', sans-serif; 93 font-weight: nomal; 94 margin: 0; 95 letter-spacing: 1px; 96} 97 98.aboutSection p { 99 font-size: 14px; 100 margin: 0; 101 letter-spacing: 1px; 102} 103 104.newSection table { 105 width: 100%; 106 border-top: 10px; 107} 108 109.newSection th { 110 font-family: 'Oswald', sans-serif; 111 font-weight: nomal; 112 font-size: 14px; 113 border-bottom: 1px; solid #dddddd; 114 padding-bottom: 15px; 115 padding-top: 15px; 116 width: 10%; 117 118} 119 120.newSection td { 121 font-size: 14px; 122 border-bottom: 1px; solid #dddddd; 123 padding-bottom: 15px; 124 padding-top: 15px; 125 width: 90%; 126} 127 128.instagramBt { 129 width="200px"; 130 margin-right: auto; 131 margin-left: auto; 132 margin-bottom: 30px; 133} 134 135.instagramBt a { 136 background: #000000; 137 color: #ffffff; 138 display: block; 139 text-align: center; 140 padding-top: 15px; 141 padding-bottom: 15px; 142 text-decoration: none; 143 border-radius: 4px; 144 font-family: 'Oswald', sans-serif; 145 font-weight: nomal; 146} 147 148.copyright { 149 text-align: center; 150 font-size: 11px; 151}
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。