- ベストアンサー
CSSについて
はじめまして、今日の質問内容は、サイト制作に使うCSSについてです。 あるサイトのコードを見ていてどうしてもわからない部分がありまして、ご質問させていただきました。 まずhtml部分で <html> (略） <body> <div id="itemCanvas"> <div class="item"> (略） </div> </div> という風にdiv itemCanvasブロックの中にdiv itemブロックを作ります。その後、CSS部分で CSS部分 #itemCanvas .item >*{ display:block; } という記述がでてきます。 この >* という意味がわかりません。 どなたか詳しい方で存知の方はいないでしょうか？よろしくお願いします。
- maebara0057
- お礼率100% (2/2)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
あまり良い説明とはいえませんね。酷いというか CSS2では、セレクタ(識別子)は基点となるセレクタから書き始めることになっています。示されたセレクタにはそれがありません。 『単純セレクタ（simple selector）とはタイプセレクタあるいは全称セレクタのことを指し、ゼロ個以上の属性セレクタ、一意セレクタ、疑似クラスが任意の順序で続く。 これらすべての構成条件がある要素の状況と一致したとき、単純セレクタは（その要素と）マッチしている。( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#q2 )』 『全称セレクタが単純セレクタの唯一の構成条件ではない時、アスタリスクを省略することができる。( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector )』 から、 #itemCanvas .item >*{} の意味は *#itemCanvas *.item >*{} の省略した書き方になります。 それぞれは * 全称セレクタ(詳細度0) #itemCanvas 一意セレクタ(詳細度 0 1 0 0) (半角スペース) 子孫セレクタ 接続詞 * 全称セレクタ(詳細度0 0 0 0) .item クラスセレクタ(詳細度 0 0 1 0) (半角スペース) 子孫セレクタ 接続詞 > 子供セレクタ 接続詞 * 全称セレクタ(詳細度0 0 0 0) ★全体の詳細度は、0 1 1 0 になりますね。 これら「セレクタ」「カスケード」「継承」などは、CSSスタイルシート(カスケーディング スタイル シート)の根幹といえる重要な部分です。スタイルシートを学ぶときは、最初に学ぶはずです。それを説明なしにスタイルシートを説明しても意味ないです。 ⇒REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) を最初に目を通しておきましょう。 ・・前略・・ 4.CSS2の構文と基本データ型 5.セレクタ 6.値の割り当て、カスケード処理、継承 7.媒体型 【ここからプロパティの説明】 8.ボックスモデル 9.視覚整形モデル 10. 視覚整形モデル詳細 最初はチンプンカンプンですが、その方が断然上達が早いです。 そもそも、HTMLにデザイン目的で<div>を入れることはおかしい。divなどは元々あるはずです。「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」とあるように、DIVはあくまで文書構造をHTMLで示しきれないときに使用するもので、デザインのために書くこと自体が誤りです。 ★本来の説明だと・・ HTML内のナビゲーションが次のようにマークアップされていると <body> <div class="header"> <div class="nav"> <h2>サイトマップ</h2> <ol> <li><a href="/">Top</a></li> (略) </ol> </div> </div> これをスタイルシートでデザインしていくとき、div.nav要素の子供(直接の子孫--孫は含まない)を青地にするときは div.header div.nav > *{color:blue;} と指定します。 のように説明すべきですよね。 なお、それぞれのセレクタについては、仕様書の ⇒5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) をお読みください。正確で確実です。
その他の回答 (1)
- play_with_you
- ベストアンサー率37% (112/301)
子セレクタ。 http://www.htmq.com/selector/child.shtml #itemCanvas .item >* なら、.itemの直下の要素のみの全てが対象になる。 「直下の要素」の子孫要素は対象外。
お礼
play_with_youさん、ご回答ありがとうございました。素人の質問に答えていただいて、感謝です。ありがとうございました。
関連するQ&A
- FlexboxのレシポンシブCSSで困ってます。
Flexboxのレシポンシブの書き方で困ってます。各クラスのitemをPC版での場合は横並びで幅は20％、20％、60％。スマホ版では各itemが100%の画面横一杯に縦並びに表示したいです。他のCSSの関係上@media screen and (max-width:567px) の書き方は変えないでおきたいのですが上手くできません。 どなたか教えて下さい。宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100% } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item3 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl-item1 { display: block; } .infofl-item2 { display: block; } .infofl-item3 { display: block; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>
- ベストアンサー
- CSS
- 「css」 と 「div」の使い方について
例えば、「CSS」でページ全体の要素をクラス「contents」で設定した場合、 HTML では次のどちらの記述が正しいのでしょうか？ １．<body class="contents">・・・ </body> ２．<body> <div="contents">・・・ </div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？ それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main { width:100px;} .main h1 { color:red;} --></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- ベストアンサー
- HTML
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- html cssで困っています
基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto"> <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか？教えていただければありがたいです。
- ベストアンサー
- HTML
- 【謎】途中でCSSがきかなくなりました（泣）
謎でもなんでもなく、まったくの技術不足なのですが、教えてください。 よろしくお願いします。 初めて、テーブルを使わずcssでデザインすることになりまして勉強中です。 CSSで指定していったものが途中できかなくなりました。 タグの記述もこれでいいのか不安です。 ページはヘッダ-メイン（左メニュー+右メインページ）-フッタ という構成です。 以下のように記述して、それぞれのエリアごとに<p>や<ul><li>などを指定しています。 ------------------------------- <body> <div id="contentBody"> <div id="headArea"> </div><!-- /#headArea --> <div id="mainContentArea"> <div id="contentMenu"> </div><!-- /#contentMenu --> <div id="pageContent"> <div class="entryBody"> </div><!-- /.entryBody --> </div><!-- /#pageContent --> <div id="footArea"> </div><!-- /#footArea --> </div><!-- /#mainContentArea --> <!-- /#contentBody --> </body> ----------------------------------- CSSで指定していって、ヘッダ-メイン（左メニュー）まではうまくいったのですが、右メインページ-フッタからCSSがきかなくなりました。 pageContent からです。 構成がおかしいからでしょうか！？？？ それともCSSの記述がおかしいからでしょうか！？？？ #pageContent { margin: 0px; width: 600px; float: right; } としか書いてないのですが。。。 うまく説明できずにすみません。 年末でお忙しいと思いますがよろしくお願いします。
- ベストアンサー
- XML
- css で背景のリピート設定についておしえてください。
css で背景のリピート設定についておしえてください。 htmlもcssも初心者で初めてホームページの制作をしています。 タグをコピーします。 <body> <div id="header"> </div> <div id="globalnavi"> <ul> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> </ul> </div> </div> <div id="haikei_repeat"> <div id="content1"> <div class="inner_top"></div> <div class="inner_repeat"> ここにテキスト </div> <div class="inner_bottom"></div> </div> <div id="body_right"> <div class="inner_top2"></div> <div class="inner_repeat2">ここにもテキスト</div> <div class="inner_bottom2"></div> </div> </div> </body> bodyにも背景画像を使い、ヘッダ以下の コンテント部分の<div id=haikei_repeat> にy方向にリピート画像を指定しました。 <div id="haikei_repeat"> の中にある、 div classにもそれぞれ背景画像をしていし、topとbottomはリピートさせず、 真ん中のinner_repeatのみ背景画像をリピートしています。 このdivにテキストやimgを挿入し、後ろのhaikei_repeatもinnerrepeatの大きさに合わせて縦に リピートしてほしいのですが、うまくできません。 <div id="haikei_repeat">と <div id="inner_repeat">のボックスサイズは 横は指定し、縦のみauto にしています。 inner_repeatはきちんと内容の量にあわせてレピート表示できていますが、 背景リピートはできていません。 どのようにしたらいいでしょうか？？？ どなたかおねがいします。
- ベストアンサー
- HTML
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- このcssが適用されない理由を教えて下さい
下のcssはaタグにcls1クラスが適用されません。 div.cls1を.cls1とすると適用されます。 要素名.クラス名で「要素以下の指定クラス」を対象に出来る筈なのですが 何か記述方法を間違えているでしょうか。 ここから<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <html> <head> <style> div.cls1 { display: block; border: 1px solid red; width: 200px; height: 100px; } </style> </head> <body> <div> <a class="cls1" href="www.google.co.jp">google</a> </div> </body> </html> ここまで<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
- ベストアンサー
- CSS
お礼
ORUKA1951さん、ご回答ありがとうございました。かなり専門的なご意見をいただいて大変勉強になります。 ご回答していただいた文章と仕様書のURLの文章はじっくり読んで一から勉強してみたいと思います。この度は、ありがとうございました。