CSSのクラス選択子についての質問
- CSSのクラス選択子について質問です。具体的には、.photoBoxLと.photoSpace、.photoBoxRと.photoSpaceに対して設定する方法を知りたいです。
- CSSの書籍で見かけた以下のコードについて質問です。.photoBoxLの中の.photoSpaceと、.photoBoxRの中の.photoSpaceに対してどのような設定を行っているのか教えてください。
- CSSのクラス選択子に関する質問です。.photoBoxLと.photoSpace、.photoBoxRと.photoSpaceの2つのクラスに対してどのようなスタイルを適用するのか教えてください。
- ベストアンサー
css
こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか？ 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか？ 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- norinori1
- お礼率67% (674/994)
- その他(業務ソフトウェア)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
おっしゃる通りで間違いありません。複数のクラスに対して同じ指定をする際に使われます。 以下をご覧ください。
関連するQ&A
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- CSSでドロップシャドウ
CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }
- 締切済み
- HTML
- フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- cssで枠の中に複数の罫線を引く方法
よろしくお願いします。 枠を作成するためにcssに以下の記述をしました。 【css】 border-top:3px solid #339900; border-left:3px solid #339900; border-right:3px solid #339900; border-bottom:3px solid #339900; padding: 0px; background-color:#ffff00; これにより外枠のみに罫線が引かれましたが、枠の中に縦線や横線 その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- cssでのレイアウトの仕方
次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。
- ベストアンサー
- CSS
お礼
返信ありがとうございます。非常に参考になりました。