- 締切済み
特定の<input >タグ及び<label>タグの部分をCSSで非表示にしたい。
下記コードの<input >タグ及び<label>タグの部分をCSSで非表示にしたいのですが、 <div class="image-size-item"> <input id="image-size-thumbnail-142" type="radio" value="thumbnail" name="attachments[142][image-size]"/> <label for="image-size-thumbnail-142">サムネイル</label> <label class="help" for="image-size-thumbnail-142">(96 × 96)</label> </div> 問題はimage-size-thumbnail-142の最後の番号及び桁数が出力ごとに変化します（例：image-size-thumbnail-154、image-size-thumbnail-2223等）。このような場合、CSSはどのように記述すればよいのでしょうか？ CSSは、システムの関係上、同ページのヘッダー内に記述する必要があり、タグ内に直接記述することはできません。 以下のようなCSSコードを<head>内に記述しましたが、 <style type="text/css"> [id~="image-size-thumbnail"] { display: none; } [for~="image-size-thumbnail"] { display: none; } </style> 上記コードの<input >タグ及び<label>タグの部分を非表示にすることができません。どこが間違っているかご指摘いただけると幸いです。また、もっと良い方法があれば、教えてください。 なお、同ページには他の部分において<input >タグ及び<label>タグが使用されている箇所が複数ありますので、<input >タグ及び<label>タグ部分を全て表示にするというCSSの記述は使用できません。 参考サイト等ありましたら、教えて下さい。 よろしくお願いします。
- kitty1000
- お礼率58% (353/606)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
HTMLでのidやclassでCSSでdisplay: none;が適応が基本ですが、HTMLが編集出来ないのなら現状では無理なのでは？
- yyr446
- ベストアンサー率65% (870/1330)
これって、非表示にしたいところに別途classを譜って、そのクラスの CSS定義で{ display: none; }にするだけじゃだめなの？
補足
yyr446さん >これって、非表示にしたいところに別途classを譜って、そのクラスの >CSS定義で{ display: none; }にするだけじゃだめなの？ HTML側のコードに手をつける（別途classを譜う）ことは、今回の場合、できない状態です。こちらで手をつけれるのは、<head>内のCSSの記述のみです。
- himajin100000
- ベストアンサー率54% (1660/3060)
未検証だけど、一回各セレクタの説明文を読んでみることを勧める。 http://www.w3.org/TR/css3-selectors/#attribute-selectors #意識してその属性セレクタを使うってことはIE6は無視ってことでいいんだよね？うれしいことに。(その場合は文書読み込んで、あらかじめどんな値があるか全てリストアップしてCSSを生成するとかしかないだろう) http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx
お礼
himajin100000さん ご回答、ありがとうございました。 参考にさせていただきます。 >IE6は無視ってことでいいんだよね？ 無視するしかないと勝手に思い込んでいますが、無視する必要がない方法などあるのでしょうか？ ちなみに、ページのDOCTYPE宣言は以下でした： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 属性セレクタは、標準モードでないと有効ではないそうなので。 しかし、まだ表示にできません。
補足
himajin100000さん ご回答、ありがとうございました。 >未検証だけど、一回各セレクタの説明文を読んでみることを勧める。 >http://www.w3.org/TR/css3-selectors/#attribute-selectors 上記のサイトの日本語版のようなサイトを既に読んでおります。 http://hp.vector.co.jp/authors/VA022006/css/selector.html
関連するQ&A
- cssのタグについて
cssで使えるタグにはどのようなものがあるのでしょうか? p、div、h1(文字サイズと兼用でしょうか?)などがあることが分かったのですが、たとえばfontcolorを縮めてfc.red { color: red;} などとすれば自分的に分かりやすいと思ったのですが無効でした。 また、百歩譲って限られたタグしかないとしても、p.fc.red { color: red;}などのようにclassを複数にするようなことは可能ではないのでしょうか? こういったことも含めてcssとhtmlでは思想的にというか包括的に違うものなのでしょうか? スタイルシート部分 p.red { color: red; } これを→ fc.red { color: red; } HTML部分 <p class="red"> タイトル </p> これを→ <fc class="red"> タイトル </fc>
- ベストアンサー
- その他(ソフトウェア)
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- cssのみでドロップダウン選択で表示切替は無理
cssのみでドロップダウン選択で表示切替は無理ですよね。 ドロップダウンじゃなかったら、表示切替ができました。 <input type="checkbox" id="toggle1"></input> <div class="toggle-outer"> <label for="toggle1">クリックして開く▼</label> </div> <div class="toggle-inner"> <p> 長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章 </p> </div> <style> #toggle1 { /* display: none; */ visibility: hidden; opacity: 0; transition: 2s; } .toggle-inner { /* display: none; */ transition: 1s; visibility: hidden; opacity: 0; } #toggle1:checked ~ .toggle-inner { /* display: block; */ visibility: visible; opacity: 1; transition: 1s; } </style>
- 締切済み
- JavaScript
- CSS 〈address〉タグで囲んだ部分を最下部に表示したい
CSS 〈address〉タグで囲んだ部分を最下部に表示したい お世話になっております。 CSSでサイトを構築しようと考えております。 その際にコピーライト部分を〈address〉～〈/address〉タグで 囲み、その部分をページの最下部に表示したいのですが それが出来ずに悩んでおります。 よく『containerの全長（例えば500px）のheightを指定して、main（450px）とfooter(50px)でそれぞれにも 高さを指定すればよい』との解答を見かけますが、私が考えるのは もっと単純に『ページの最下部に表示』をしたいのです。 例えばテーブルタグを使えば【vertical-align: bottom】で 簡単に実践できますがこの表現方法はスマートとは言えません。 過去ログを検索したところ・・・ http://okwave.jp/qa/q2859912.html の質問サイトに私と全く同じ症状に悩み、解決した方への回答が あるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。 【index.html】 （--ページヘッダは省略--） <title>タイトル</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> </style> </head> <body> <div id="container"> <div id ="header"> <h1>こんにちは</h1> </div> <ul> <li><a href="index.html">top</a></li> <li><a href="schedule.html">schedule</a></li> </ul> <div id="main"> <h2>Welcome!!</h2> </div> <address>Copyright©</address> </div> </body> </html> 【style.css】 @charset "utf-8";body , html { height: 100%;} body {color: #444444;} div#container {border: solid 2px #aaaaaa; padding: 20px; width: 500px; height: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto} div#header {background-color: #111111; padding: 5px 20px;} h1 {font-size: 1.25em; font-family: Verdana, Helvetica, sans-serif; color: #66aa66} h2 {font-size: 1em; padding-left: 20px; padding-bottom: 3px; maragin-bottom: 10px; border-bottom: solid 2px #999999; background-image: url(freeback65.gif); background-repeat: no-repeat} ul {list-style-type: none; margin-left:0; background-color: #888888; padding-left:0; padding:3px 20px} li {display: inline; padding-right: 10px; color: #ffffff} li a {text-decoration: none; color:#ffffff} li a:hover {background-color:#bbbbbb} p {font-size: 0.75em; padding-left:10px} address {font-size: 0.625em; font-style: normal; color: #2d444f; text-align: center; text-valign: bottom;} この状態でwebで見ますと、肝心のアドレス部分は#container内の <p>タグの直下に表示されます。私の希望としましてはcontainer内の 一番下に表示されるのが理想です。 ご教授よろしくお願いいたします （タイトルミスで間違えてマルチ投稿になっちゃいました）
- ベストアンサー
- HTML
- CSSで表示が異なってしまう
下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか？ よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>
- ベストアンサー
- HTML
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- CSS実行条件
チェックボックスがオンになったらCSSを実行するようにしたいので いろいろ調べたんですが、下のようなCSSがないんです。 |||ボックスがオフなら要素で囲まれている文字を隠す |||オンなら囲まれている文字を表示する。 <input id="checkbox1" type="checkbox"> <label for="checkbox1" class="c1">テスト</label> <div class="a"> 表示したり隠したりする部分 </div> <div class="a">で囲まれている部分を隠したり表示したりします。 どなたかお願いします。
- ベストアンサー
- CSS
- CSSのタグについて
今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#"> <em><img src="album/img/photo.jpg" /></em> <span>写真１</span></a></li> </ul> </div> --------------------------------------------- とHXTML表記があり、CSSの設定は下記のようになっていました。 （※一部抜粋） --------------------------------------------- div#album ul li a em, div#album ul li a span { display: none; } --------------------------------------------- そこで質問です。<em>や<span>のタグを単独で使った 事がなく、どうしてこの二つのタグが使われているの かがわかりません。 特にemはフォントサイズの指定ではないのでしょうか？ それともCSSで効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。
- ベストアンサー
- その他（インターネット・Webサービス）
- javascriptで特定のオブジェクトのCSSの書換え
javascriptでCSSの書換えをしたいと思っているのですが、うまくいきません。 例えば、 <div class="aaa" style="z-index:0;">aaa</div> <div class="aaa" style="z-index:1;">bbb</div> <div class="aaa" style="z-index:2;">ccc</div> <div class="aaa" style="z-index:3;">ddd</div> <div class="bbb">111</div> <div class="bbb">222</div> <div class="bbb">333</div> このようにあったときに、≪z-indexの要素が1以上≫のclass="aaa"のオブジェクトを探して、該当するものの≪z-indexの値から-1する≫というような関数を作りたいのですが、ループの記述で困っています。 （prototype.jsを使うので、getElementsByClassNameは使えます。） 詳しい方、ご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- HTMLのulタグで表示される「・」を消したい
ネットで調べて下記二通りを試しましたが消せませんでした。 １．HTMLで<ul class="doterase">とし、CSSで .doterase li { list-style: none; } とした。HTMLでClass="doterase"としているのにCSSで.doteraseと先頭に「.」を追加した理由は 判りません。 ２．HTMLでulタグに <ul style="list-style: none;">としても同じでした。 HTML,CSSのコードは下記のとおりです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の将来る</title> <meta name="discriptio" content="八十路の提言"> <link rel="stylesheet" href="homestyle.css"> </head> <body> <h1><center>日本の将来</center></h1> <h2><center>八十路の提言</center></h2> </body> <ul > <li> <a href="https://google.co.jp">aaaa</a> </li> <li> <a href="https://google.co.jp">bbbb</a> </li> <li> <a href="https://google.co.jp">cccc</a> </li> </ul> <div style="border: 3px none;"> 枠線を実線で装飾１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１ </div> </html> CSS @charset "UTF-8" ; body { background-color : #adcc33; font-size: 40px; width: 200; height:200; position: relative; /* 日本の将来に期待する */ top: 10px; /* 上から10px */ p { font-size: 40px; } <style> .doterase li { list-style: none; } </style> <ul class="doterase"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> li { color: #000000; font-size:30px } 参考書を理解しないままコピペでつくっています。HTML/CSSは最近始めたばかりなので超初心者です。よろしくお願いいたします。Windows11なのでHTML,CSS.共最新バージョンだと思います。 なお、これと同じ内容で他のQ&Aサイトに投稿しましたが質問の仕方が拙かったようで内容の訂正でなく取り消し後再質問したら回答がなくなったためこちらに質問しています。
- ベストアンサー
- HTML
お礼
aidesさん ご回答、ありがとうございました。 参考にさせていただきます。