No.1ベストアンサー
- 回答日時:
border-radius: を使ってると思うケド、角丸にした部分の背景は透明。
元々のbodyの背景が白じゃ無いですか?
又は、角丸を使ってる要素の親要素の背景が白。
No.2
- 回答日時:
たぶん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>
この回答へのお礼
お礼日時:2016/06/30 22:17
回答ありがとうございます。
まだまだ始めたばかりですが、難しいですけど面白いですね。
確かに余計なものがあり、問題をボやけさせてしまってました。
見た目だけでなく、最低限の知識は必要ですね。
もう少し頑張ってみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
safariでの横並びリスト(List...
-
画像と一緒にスライドするリン...
-
widthやheightの数値に単位(px...
-
hpビルダー 複数の表の罫線を...
-
<div>と<div>の間の10px程の...
-
ディスプレイのサイズに合わせ...
-
html5 2段組で行頭を揃える方法
-
divで囲まれたpaddingの指定を...
-
cssで投稿した画像を中央に表示...
-
embed タグを用いると表示が遅い
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報