実現したいこと
グリッドを使用して写真を配置しました。
その際にgapができているので、消したい。
発生している問題・分からないこと
写真と写真の間のgapを消したく、
row-gap: 0;
column-gap: 0;
を入力しても消えない。
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>はちみつ専門店 7 </title>8 <link rel="icon" href="img/favicon.png">9 <link rel="stylesheet" href="css/style.css">10 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">11 12</head>13<body>14 <header>15 <div class="headerlogo">16 <a href="#"><h1><img src="img/honey-logo.jpg"></h1></a>17 </div>18 <nav>19 <ul class="navilist">20 <li><a href="#">About</a></li>21 <li><a href="#">Products</a></li>22 <li><a href="#">Shop List</a></li>23 </ul>24 </nav>25 </header>26<main> <!--メイン-->27 <div class="mainvisual">28 <img src="img/mainvisual.jpg">29 </div>30<div class="contents"> 31 <div class="section">32 <div class="section-about">33 <img src="img/honeyabout.jpg">34 </div><!--セクションアバウト閉じタグ-->35 <div class="honey-about">36 <h2>はちみつの効果</h2>37 <p>はちみつには様々な効果があります。 38 美容、疲労回復、抗菌作用<br>39 又、はちみつにもたくさん種類があり、 40 はちみつごとに効果が異なります。<br>41 その代表例がマヌカハニーです。 42 マヌカハニーはニュージーランドを原産としており、 43 強い殺菌力・抗菌力を持つ、 44 “奇跡のはちみつ”として話題です。<br>45 </p>46 </div><!--ハニーアバウト閉じタグ-->47 </div> <!--セクション閉じタグ-->48</div> <!--コンテンツ閉じタグ-->49 50 <div class="section-honey1">51 <div class="honey1">52 <img src="img/honey1.png">53 <div class="honey1text">54 <h3>アルゼンチン産はちみつ</h3>55 <p>アルゼンチン産のハチミツはコクが 56 あり上品な味わいが特徴です。 57 ゆっくり時間を掛けて収集された蜜が 58 味にコクと深みを与え、 59 花の風味が香る素敵な味わいなのだそう。 60 </p>61 </div>62 </div>63 </div>64 65 66 <div class="section-honey2">67 <div class="honey2">68 <div class="honey2text">69 <h3>オーストラリア産はちみつ</h3> 70 <p>抗菌・殺菌力の強いジャラはちみつで、 71 のどのケアをしてみてください。 72 ジャラハニーは、西オーストラリアのユーカリの原生林に、 73 2年に1度咲くマルバユーカリ(ジャラ)の花から 74 採ったはちみつです。</p>75 </div>76 <img src="img/honey2.png">77 </div>78 </div>79 80 <div class="section-honey3">81 <div class="honey3">82 <img src="img/honey3.png">83 <div class="honey3text">84 <h3>ハンガリー産はちみつ</h3>85 <p>ニセアカシアの花から採れる、やさしい香りと、 86 淡い琥珀色のハンガリー産アカシア蜂蜜。 87 驚くほどクセがなくさわやかで上品な甘さです。 88 他の蜂蜜よりも結晶しにくいのも嬉しいはちみつです。 89 </p>90 </div>91 </div>92 </div>93 94 <div class="photogallery">95 <div class="item1"><img src="img/item1.jpg" alt1="養蜂場などの写真"></div>96 <div class="item2"><img src="img/item2.jpg" alt1="養蜂場などの写真"></div>97 <div class="item3"><img src="img/item3.jpg" alt1="養蜂場などの写真"></div>98 <div class="item4"><img src="img/item4.jpg" alt1="養蜂場などの写真"></div>99 <div class="item5"><img src="img/item5.jpg" alt1="養蜂場などの写真"></div>100 <div class="item6"><img src="img/item6.jpg" alt1="養蜂場などの写真"></div>101 <div class="item7"><img src="img/item7.jpg" alt1="養蜂場などの写真"></div>102 <div class="item8"><img src="img/item8.jpg" alt1="養蜂場などの写真"></div>103 </div>104 <div class="product">105 <div class="wrap">106 <p class="wrap-inner">当オンラインショップでは<br>厳選されたさまざまな国の<br>107 はちみつを取り扱っております。 108 <button class="btn"><a href="#">商品一覧へ</a></button>109 </p>110 111 </div>112 </div>113</main>114 <footer>115 <div class="footer-contents">116 <div class="sns">117 <a href="#"> <img src="img/Twitter.png" alt="X"> </a>118 <a href="#"> <img src="img/Instagram.png" alt="Instagram"> </a>119 </div>120 <div class="info">121 <ul >122 <li><a href="#">会社概要</a></li>123 <li><a href="#">採用情報</a></li>124 <li><a href="#">お問い合わせ</a></li>125 </ul>126 </div> 127 </div>128 </footer>129</body>130</html>
css
1@charset "UTF-8";2 3body{4 color: #333;5}6a{7 text-decoration: none;8 color: black;9}10 11li{12 list-style: none;13}14 15header{16 display: flex;17 width: 100%;18 height: 140px;19 padding: 20px 100px;20 justify-content: space-between;21 align-items: center;22 min-width: 500px;23}24 25.headerlogo{26 min-width: 500px;27}28 29.navilist{30 display: flex;31 min-width: 500px;32}33 34.navilist li{35 font-size: 1.5em;36 margin-right: 40px;37 38}39 40.mainvisual img{41 max-width: 100%;42 height: 100%;43 44}45 46.contents{47 display: flex;48 justify-content: center;49 /*background-image: url(../img/background.jpg);*/50 background-position: right;51 52}53 54.section{55 display: flex;56 margin-top: 156px;57 width: 1100px;58 height: 466px;59 padding: 20px 24px;60 61}62 63 64 65.section-about img{66 width: 500px;67 height: 426px;68 object-fit: cover;69 margin-right: 56px;70}71 72.honey-about{73 display: flex;74 flex-direction: column;75 justify-content: center;76 width: 500px;77 height: 426px;78}79 80.honey-about h2{81 margin-bottom: 24px;82 text-shadow: 2px 2px #FDB813;83}84 85.honey1, .honey3 {86 display: flex;87 width: 1233px;88 margin: 156px auto 0 0;89 background-color: rgb(231, 195, 127);90 border-radius: 540px;91}92 93 94.honey2{95 display: flex;96 width: 1233px;97 margin: 156px 0 0 auto;98 border-radius: 540px;99 background-color: rgb(231, 195, 127);100}101 102 103.honey1 h3, .honey2 h3, .honey3 h3 {104font-size: 1.8em;105margin-bottom: 24px;106text-shadow: 2px 4px 6px white;107}108 109.honey1 img, .honey3 img{110 object-fit: cover;111 width: 820px;112 height: 540px;113 margin-right: 28px;114}115 116 117 118.honey2 img{119 object-fit: cover;120 width: 820px;121 height: 540px;122 margin-left: 28px;123}124 125.honey1text, .honey2text, .honey3text{126 width: 820px;127 height: 540px;128 display: flex;129 flex-direction: column;130 justify-content:center;131}132 133.honey2text{134 text-align: right;135}136 137 138 139.section-honey1, .section-honey2, .section-honey3{140 display: flex;141 justify-content: center;142}143 144 145.photogallery{146 display: grid;147 grid-template-columns: 1fr / 1fr / 1fr / 1fr ;148 grid-template-rows: 1fr / 1fr / 1fr / 1fr;149 max-width: 1100px;150 height: 764px;151 margin: 156px auto 0;152 place-content: center;153 row-gap: 0;154 column-gap: 0;155}156 157.photogallery img{158 object-fit: cover;159 width: 400px;160 height: 400px;161 margin: 0;162}163 164.item1{grid-area: 1 / 1 / 2 /2;}165.item2{grid-area: 2 / 1 / 3 /2; }166.item3{grid-area: 1 / 2 / 2 /3;}167.item4{grid-area: 2 / 2 / 3 /3;}168.item5{grid-area: 1 / 3 / 2 /4;}169.item6{grid-area: 2 / 3 / 3 /4;}170.item7{grid-area: 1 / 4 / 2 /5;}171.item8{grid-area: 2 / 4 / 3 /5;}172 173.product{174 margin: 0 auto;175 height: 700px;176 max-width: 780px;177 text-align: center;178 179}180 181.wrap{182 position: relative;/* ←文字の親要素に指定 */183 display: inline-block;184 border-radius: 50%;185 margin-top: 190px;186 width: 500px;187 height: 500px;188 background-color: rgb(231, 195, 127);189 border: 1px solid #333;190 text-align: center;191}192 193.wrap-inner{194 position: absolute;195 top: 50%;196 left: 50%;197 -webkit-transform: translate(-50%, -50%);198 transform: translate(-50%, -50%);199}200 201 202.btn{203 margin-top: 5px;204 min-width: 200px;205 border: 2px solid #333;206 background-color: white;207 padding: 10px 0;208 letter-spacing: 5px;209 box-shadow: 3px 3px white;210}211 212footer{213 display: flex;214 align-items: center;215 margin-top: 190px;216 height: 200px;217 background-color: rgb(231, 195, 127);218 219}220 221.footer-contents{222 display: inline-block;223 margin: 0 auto;224 width: 100%;225 align-items: center;226 227}228 229.sns{230 text-align: center;231 margin-bottom: 10px;232}233 234.info ul{235 display: flex;236 justify-content: center; 237}238 239.info li{240 margin: 0 10px;241}
試したこと・調べたこと
上記の詳細・結果
該当のものがみつからなかった!
補足
特になし
0 コメント