重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：くんこば
  • 質問日時：
  • 回答数：2件

CSSの角丸での質問です。



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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： t_fumiaki
  • 回答日時：

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


元々のbodyの背景が白じゃ無いですか？
又は、角丸を使ってる要素の親要素の背景が白。
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2016/06/30 15:15

No.2

  • 回答者： ORUKA1951
  • 回答日時：

たぶん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">
<!--
h1,h2,h3,h4,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
html,body{margin:0;padding:0;}
header,section,footer{
＿width:100%;max-width:1000px;min-width:640px;
＿margin:0 auto;
＿padding:10px;
}
section{
＿position:relative;
＿padding-left:10px;
}
section h2{
＿margin-right:230px;
}
section section{
＿width:auto;min-width:0;
＿margin:10px 230px 10px 10px;
＿padding:5px;
}
section section,section aside{
＿border:solid 2px red;
＿border-radius:20px;
}
section aside{
＿position:absolute;
＿top:0;right:5px;
＿width:200px;height:100%;
＿padding:5px;
/* 背景を隠す(下記のコメントアウトを外す) */

＿box-shadow:10px 10px 10px rgba(0,0,0,0.4);
＿right:-10px;
＿top:-5px;
*/
}
/* 色付け */
body{background-color:gray;}
header{background-color:aqua;}
section{background-color:white;}
section section{background-color:silver;}
section aside{background-color:lime;}
footer{background-color:yellow;}
-->
</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>
    • good
    • 1
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
まだまだ始めたばかりですが、難しいですけど面白いですね。
確かに余計なものがあり、問題をボやけさせてしまってました。
見た目だけでなく、最低限の知識は必要ですね。
もう少し頑張ってみます。

通報する
お礼日時：2016/06/30 22:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報