実現したいこと
・paddingの周囲では無く、padding内で文字の周りに線で囲いたい
・ヘッダー部分の上と左右に少し白い余白があるので、余白をなくし綺麗に画像を表示したい
発生している問題・分からないこと
・paddingの周囲では無く、padding内で文字の周りに線で囲いたい
・ヘッダー部分の上と左右に少し白い余白があるので、余白をなくし綺麗に画像を表示したい
該当のソースコード
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">News</p> 32 <p class="text-3">お知らせ</p> 33 <p><span class="text-4">2024.00.00<br></span><span class="text-5">テキストテキスト</span></p> 34 <p><span class="text-4">2024.00.00<br></span><span class="text-5">テキストテキスト</span></p> 35 <p><span class="text-4">2024.00.00<br></span><span class="text-5">テキストテキスト</span></p> 36 <p><span class="text-4">2024.00.00<br></span><span class="text-5">テキストテキスト</span></p> 37 <p><span class="text-4">2024.00.00<br></span><span class="text-5">テキストテキスト</span></p> 38 </div> 39 40 <div id="text-6"> 41 <p class="text-6">新しい価値の創造</p> 42 <img src="img/products1.jpg"> 43 <p id="text-7">テキストテキスト<br>テキストテキスト</p> 44 </div> 45 46 <div id="text-8"> 47 <p id="text-9">科学と技術の調和</p> 48 <img src="img/products2.jpg"> 49 <p id="text-10">テキストテキスト<br>テキストテキスト</p> 50 </div> 51 52 <iframe 53 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"> 54 </iframe> 55 </main> 56 57 <!-- フッター --> 58 <footer> 59 <div id="text-11"> 60 <h2>創作</h2> 61 <p class="text-11">〒604-0925 京都府京都市中京区寺町通御池上る上本能寺前町488番地</p> 62 <P class="text-11">電話番号:075-222-3111</P> 63 <p class="text-12">お知らせ</p> 64 <p class="text-12">商品のご紹介</p> 65 <p class="text-12">店舗のご案内</p> 66 </div> 67 <span id="text-13">©SOUSAKU</span> 68 </footer> 69 </body> 70</html>
CSS
12h1, h2, p,a {3 writing-mode: vertical-rl;4 text-orientation: upright;5}6 7#text {8 width: 100%;9 position: relative;10 padding: 0px 10px;11}12 13#text img {14 width: 100%;15}16 17#text-1 {18 position: absolute;19 top: 10px;20 right: 20px;21 display: flex;22 align-items: flex-start;23 color: white;24}25 26h1.text-1 {27 margin-right: 40px; /* 適当に調整可能 */28}29 30.menu {31 display: flex;32 flex-direction: row; /* 横並びに表示 */33 gap: 20px; /* 要素間の余白、適宜調整可能 */34}35 36 37.text-2{38 position: absolute;39 left:50px;40 bottom:50px;41 border: solid 2px white;42 padding: 30px 18px;43 background-color:gray;44 color:white;45 text-decoration: none;46}47 48 49
試したこと・調べたこと
上記の詳細・結果
コードを書いたが分からない
補足
特になし
0 コメント