Q&A
前提・実現したいこと
#service h1にborder-radiusで角丸を作成したいです。
発生している問題・エラーメッセージ
border-radius: 30px;で設定していますが反映されません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Forest town</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet"> 8 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet"> 9 <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet"> 10</head> 11<body> 12 <header> 13 <h1>Forest town</h1> 14 <nav> 15 <ul> 16 <li class="li-1">会社概要</li> 17 <li class="li-2">サービス</li> 18 <li class="li-3">採用</li> 19 <li class="li-4">お問い合せ</li> 20 </ul> 21 </nav> 22 </header> 23 24 <main> 25 <section id="main-visual"> 26 <img src="eha0037-003.jpg"> 27 <h1>Clean in the city</h1> 28 <h2>クリーンな空気で快適な生活を</h2> 29 </section> 30 31 <section id="service"> 32 <h1>サービス</h1> 33 <p>ハウスクリーニング</p> 34 <ul> 35 <li>エアコン</li> 36 <li>浴室</li> 37 <li>洗面所</li> 38 <li>キッチン</li> 39 </ul> 40 <p>etc</p> 41 <p>テナント</p> 42 <ul> 43 <li>オフィスの床面清掃</li> 44 <li>飲食店の店内清掃</li> 45 </ul> 46 <p>etc</p> 47 </section> 48 49 </main> 50 51</body> 52</html>
CSS
1html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-weight: normal; 6 font-size: 100%; 7 vertical-align:baseline; 8 -webkit-box-sizing: border-box; 9 -moz-box-sizing: border-box; 10 box-sizing: border-box; 11 } 12 article, header, footer, aside, figure, figcaption, nav, section { 13 display:block; 14 } 15 body { 16 line-height: 1; 17 -ms-text-size-adjust: 100%; 18 -webkit-text-size-adjust: 100%; 19 } 20 ol, ul { 21 list-style: none; 22 list-style-type: none; 23 } 24 25/*ALL*/ 26* { 27 font-family: 'Noto Serif JP', serif; 28} 29 30/*ヘッダー*/ 31header { 32 display: flex; 33 justify-content: space-between; 34 align-items: center; 35} 36 37header h1 { 38 font-family: 'Orbitron', sans-serif; 39 font-size: 50px; 40} 41 42header ul { 43 display: flex; 44 align-items: center; 45 text-align: center; 46 width: auto; 47 height: 40px; 48} 49 50header ul .li-1{ 51 display: flex; 52 justify-content: space-between; 53 border-bottom: 1px solid #b0c4de; 54 margin: 37px; 55} 56 57header ul .li-2{ 58 display: flex; 59 justify-content: center; 60 border-bottom: 1px solid #b0c4de; 61 margin: 37px; 62} 63 64header ul .li-3{ 65 display: flex; 66 justify-content: space-between; 67 border-bottom: 1px solid #b0c4de; 68 margin: 37px; 69} 70 71header ul .li-4{ 72 display: flex; 73 justify-content: space-between; 74 border-bottom: 1px solid #b0c4de; 75 margin: 37px; 76} 77 78/*メイン*/ 79#main-visual { 80 position: relative; 81 font-family: 'Poiret One', cursive; 82 display: inline-block; 83} 84 85#main-visual img { 86 margin-top: 15px; 87 width: 100%; 88 height: auto; 89} 90 91#main-visual h1 { 92 position: absolute; 93 top: 50%; 94 left: 0; 95 right:0; 96 text-align: center; 97 font-size: 50px; 98 color: #006666; 99 border-bottom:3px solid #006666; 100} 101 102#main-visual h2 { 103 position: absolute; 104 top: 70%; 105 left: 0; 106 right:0; 107 text-align: center; 108 font-size: 50px; 109 color: #006666; 110} 111 112#service { 113 display: inline-block; 114} 115 116#service h1 { 117 font-size: 30px; 118 border-radius: 30px; 119}
試したこと
h1がblock要素なので行けないのかと思い、inline-blockで設定しましたが変化ありませんでした。
px指定なので%指定にしてみましたが、こちらも変化ありませんでした。
回答1件
0
ベストアンサー
提示のコードには背景色やborderが設定されていないので、追加して確認しましたが、ちゃんと角丸になってますよ。
css
1#service h1 { 2 font-size: 30px; 3 border-radius: 30px; 4 background-color: aqua; 5 border: 1px solid; 6}
提示されていない部分のコードが影響しているのでは。
検証ツールで適用されているCSSを確認してみては。
投稿2020/10/25 11:27
編集2020/10/25 11:29
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/25 14:40
2020/10/26 01:00