実現したいこと
下記の質問は全て768以下の時の表示についてです
① .text-4の表示で768以下の時に5つでは無く3つだけ表示したい
② .img-1の表示場所を現在の位置から<p class="text-6">新しい価値の創造</p>の左側に表示させたい
③ <p class="text-7">テキストテキスト<br>テキストテキスト</p>部分の背景を正方形にしたい
発生している問題・分からないこと
下記の質問は全て768以下の時の表示についてです
① .text-4の表示で768以下の時に5つでは無く3つだけ表示したい
② .img-1の表示場所を現在の位置から<p class="text-6">新しい価値の創造</p>の左側に表示させたい
③ <p class="text-7">テキストテキスト<br>テキストテキスト</p>部分の背景を正方形にしたい
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta name="description" content="京都の創作料理"> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>京都の創作料理</title> 9 </head> 10 11 <body> 12 <!-- ヘッダー --> 13 <header> 14 <div id="text"> 15 <img src="img/mainvisual-pc.jpg"> 16 <div id="text-1"> 17 <nav class="menu"> 18 <p class="text-1">お知らせ</p> 19 <p class="text-1">商品のご紹介</p> 20 <p class="text-1">店舗のご案内</p> 21 </nav> 22 <h1 class="text-1">創作</h1> 23 </div> 24 <a class="text-2" href="index.html">オンラインストアを見る</a> 25 </div> 26 </header> 27 28 <!-- メイン --> 29 <main> 30 <div id="text-3"> 31 <p class="text-3">お知らせ</p> 32 <div id="text-4"> 33 </div> 34 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 35 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 36 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 37 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 38 <p><span class="text-4">2024.00.00<br>テキストテキスト</span></p> 39 </div> 40 </div> 41 </div> 42 43 <div id="text-6"> 44 <div class="text-10"> 45 <p class="text-6">新しい価値の創造</p> 46 <img class="img-1" src="img/products1.jpg"> 47 </div> 48 <p class="text-7">テキストテキスト<br>テキストテキスト</p> 49 </div> 50 51 <div id="text-8"> 52 <div class="text-11"> 53 <p class="text-9">科学と技術の調和</p> 54 <img class="img-2" src="img/products2.jpg"> 55 </div> 56 <p class="text-12">テキストテキスト<br>テキストテキスト</p> 57 </div> 58 59 </main> 60 61 <!-- フッター --> 62 <footer> 63 <iframe 64 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.7862945114157!2d135.76534951061075!3d35.012054366331135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6001088d901efcc1%3A0x3a3362a1bd150594!2z5Lqs6YO95biC5b255omA!5e0!3m2!1sja!2sjp!4v1717659037773!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> 65 </iframe> 66 <div id="text-13"> 67 <h2>創作</h2> 68 <div id="text-15"> 69 <p class="text-13">〒604-0925 京都府京都市中京区</p> 70 <P class="text-13">電話番号:075-222-3111</P> 71 </div> 72 <div id="text-16"> 73 <p class="text-14">お知らせ</p> 74 <p class="text-14">商品のご紹介</p> 75 <p class="text-14">店舗のご案内</p> 76 </div> 77 <p class="text-16">©SOUSAKU</p> 78 </div> 79 </footer> 80 </body> 81</html>
CSS
1body, html {2 margin: 0;3 padding: 0;4 width: 100%;5}6 7.text-1,.text-2,.text-3,.text-4,.text-5,.text-6,.text-9,.text-13,.text-14,h2{8 writing-mode: vertical-rl;9 text-orientation: upright;10}11 12#text {13 width: 100%;14 position: relative;15}16 17#text img {18 width: 100%;19}20 21#text-1 {22 position: absolute;23 top: 10px;24 right: 20px;25 display: flex;26 align-items: flex-start;27 color: white;28}29 30h1,.text-1 {31 margin-right: 40px; /* 適当に調整可能 */32 margin-top:20px;33}34 35.menu {36 display: flex;37 flex-direction: row; /* 横並びに表示 */38 gap: 1px; /* 要素間の余白、適宜調整可能 */39 40}41 42 43.text-2{44 position: absolute;45 left:50px;46 bottom:50px;47 border: solid 2px white;48 padding: 30px 18px;49 background-color:gray;50 color:white;51 text-decoration: none;52}53 54/* メイン */55main {56 background-color: beige;57 text-align: center; /* テキストを中央揃えにする */58 width: 100%; /* 必要に応じて幅を調整 */59}60 61#text-3{62 position: relative;63 display: flex;64 justify-content: center; /* 水平方向に中央揃え */65 text-align: center; 66 padding: 100px ;67}68 69.text-3{70 font-size:35px;71 position: absolute;72 top:50px;73 right:150px;74}75 76.text-4{77 margin:20px;78 border: solid 1px black;79 padding:20px;80 border-top:0px;81 border-bottom:0px;82}83 84 85#text-6{86 width: 100%;87 position: relative;88}89 90.text-6{91 position: absolute;92 top:0px;93 right:100px;94 font-size:20px;95}96 97#text-6 img{98 width: 50%;99 height:30%;100 margin-top:50px;101 margin-left:300px;102}103 104 105.text-7{106 position: absolute;107 bottom:10px;108 left:280px;109 background-color:yellow;110 opacity: 0.9;111 padding: 60px 70px;112 color:white;113}114 115#text-8{116 position: relative;117 width: 100%;118}119 120.img-2{121 width:50%;122 margin:150px 50px 100px auto;123}124 125.text-9 {126 font-size: 20px;127 position: absolute; /* 追加 */128 top:50px;129 left: 210px; /* 左からの位置を調整 */130}131 132 133.text-12{134 position: absolute;135 bottom:100px;136 right:160px;137 background-color:red;138 opacity: 0.5;139 padding: 60px 70px;140 color:white;141}142 143iframe {144 width:100%;145}146 147#text-13{148 position: relative;149 background-color: black;150 width:100%;151 height:600px;152}153 154h2{155 position: absolute;156 top:60px;157 right:30px;158 color:white;159}160 161.text-13,.text-14{162 color:white;163 font-size:15px;164}165 166#text-15{167 position: absolute;168 top:60px;169 right:100px;170}171 172#text-16{173 position: absolute;174 top:60px;175 right:200px;176}177 178.text-13,.text-14{179 display: inline;180 padding:0px;181 vertical-align: top; /* 上揃えに変更 */182}183 184.text-16{185 position: absolute;186 bottom: 0;187 left: 0;188 right: 0;189 margin:auto;190 color:white;191 text-align: center; /* 文字を中央揃えにする */192 193}194 195@media screen and (max-width: 767px){196 /* ヘッダー */197 #text img {198 content: url('img/mainvisual-sp.jpg'); /* スマホ用の画像のパスに変更 */199 }200 201 header h1 {202 font-size: 24px; /* 任意のフォントサイズ */203 margin-right: 10px; /* 適切なマージンに調整 */204 }205 206 .text-1 {207 margin-right: 1px; /* 適切なマージンに調整 */208 margin-left:10px;209 }210 211 .text-2{212 font-size:13px;213 padding: 15px;214 margin:10px 10px 0px 0px215 }216 217 /* メイン */218 #text-3{219 position: relative;220 }221 222 .text-3{223 font-size:25px;224 position: absolute;225 top:50px;226 right:50px;227 }228 229 #text-4 .text-4 {230 display: none;231 }232 233 .text-4{234 margin-top:100px;235 }236 237 #text-6{238 position: relative;239 }240 241 .text-6{242 position: absolute;243 top:20px;244 right:30px;245 }246 247 }
試したこと・調べたこと
上記の詳細・結果
コードを色々と試したが分からない
補足
特になし
0 コメント