CSSの角丸での質問です。今、CSSを勉強中なんですが、CSSを角丸にした時、角丸にした部分

解決済

質問者：くんこば
質問日時：2016/06/30 08:50
回答数：2件

CSSの角丸での質問です。

今、CSSを勉強中なんですが、CSSを角丸にした時、角丸にした部分の背景色が白色になっているのですが、透明にすることは可能なんでしょうか？
調べたのですが、なかなか見つけられず…
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： t_fumiaki
回答日時：2016/06/30 12:59

border-radius: を使ってると思うケド、角丸にした部分の背景は透明。

元々のbodyの背景が白じゃ無いですか？
又は、角丸を使ってる要素の親要素の背景が白。

- 1
- 件

通報する

この回答へのお礼

あ、そうなんですか！
帰宅してから確認してみます！
回答ありがとうございます。

通報する

お礼日時：2016/06/30 15:15

No.2

回答者： ORUKA1951
回答日時：2016/06/30 16:19

たぶんHTMLがめちゃくちゃなんじゃないかと。

HTMLには、文書構造以外書きません。デザインのために余計なもの書いてるとそれが邪魔する典型じゃないかと・・
　スタイルシートを使う最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ですからね。
　
ですから、CSSを勉強する前にHTMLを勉強しなければならない。

メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
　 http://jigsaw.w3.org/css-validator/#validate_by_ …

★タブは＿に置換してあるので戻してください。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　で検証（右上のDATAから）済みのHTML5
★文字コードはUTF-8

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<section>
＿＿＿<h3>項目</h3>
＿＿＿<p>
＿＿＿＿今、CSSを勉強中なんですが、CSSを角丸にした時、角丸にした部分の背景色が白色になっているのですが、透明にすることは可能なんでしょうか？
調べたのですが、なかなか見つけられず…
＿＿＿</p>
＿＿＿<p>
＿＿＿＿よろしくお願いします。
＿＿＿</p>
＿＿</section>
＿＿<section>
＿＿＿<h3>項目</h3>
＿＿＿<p>
＿＿＿＿角丸にしたからと言ってその余白が白くなるということはありません。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿その下に白い四角なブロックがあるためとしか考えられません。すなわち、余計な構造がある。
＿＿＿</p>
＿＿＿<p>
＿＿＿＿透明にするのではなく、ずらしたり影をつけて背景を隠すことになる。<strong>CSSのコメントを外す</strong>
＿＿＿</p>
＿＿＿<p>
＿＿＿＿このサンプルのように、HTMLはひたすら文書構造だけを記述して、スタイルシートはその文書構造に従ってセレクタを記述して指定していくのがセオリーです。そうすることで、著者はメンテナンスが容易になるし、読者のアクセシビリティは向上するし、検索エンジン最適化もできる。
＿＿＿</p>
＿＿</section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>