CSSでクラス名やID名を指定する場合に、
ワイルドカードか正規表現を使いたいと思ったのですが、うまくできません。
使えないのでしょうか?

また、他に、似たクラス名・ID名を一括で指定する方法はありますか?

例)
<div id="cat1">猫が1匹</div>
<div id="cat2">猫が2匹</div>
<div id="cat3">猫が3匹</div>

#cat1, #cat2, #cat3{color:#FF00FF;}

#cat*{color:#FF00FF;}
のようにまとめて指定したい。

A 回答 (1件)

CSS2までのセレクタにはワイルドカードも正規表現も使えません。



※ CSS3では属性セレクタが拡張されているので
div:[id^="cat"] {~~~} ・・・・ idがcatで始まるdiv要素
みたいな事もできますが、まだ使えるブラウザが限られるので現実的ではありません。

http://hp.vector.co.jp/authors/VA022006/css/sele …
http://www.google.com/search?q=css3+%83Z%83%8C%8 …
    • good
    • 0
この回答へのお礼

まだ実際上使えないのですね。ありがとうございました。

お礼日時:2009/03/28 05:49

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcss外部ファイル(ヘッダ、フッタ)の書き方

素人です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
でhtmlを(テキストエディタを使って)書いています。
ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、
htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。
例えば、
----------
<style>
* {
margin: 0;
padding: 0;
}
#header {
position: ●●●●
left: 0;
top: 0;
background-color:●●●●
color: ●●●●
width: 100%;
height: 30px;
z-index: 3;
----------

のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。
ヘッダ内にて
<link rel="stylesheet" href="ファイル名.css" type="text/css" />
を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか?
探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。
書き方の参考サイトや、ソースの書き方を教えて下さい。
よろしくお願い致します。

素人です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
でhtmlを(テキストエディタを使って)書いています。
ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、
htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。
例えば、
----------
<style>
* {
margin: 0;
padding: 0;
}
#header {
position: ●●●●
left: 0;
top: 0;
background-color:●●●●
color: ●●●●
width: 100%;
height: 30px;
z-index: 3;
----------

のよ...続きを読む

Aベストアンサー

あなたの質問を簡単に書くと
「cssファイルに変更を加えたら正しく表示されなくなった」
こういうことですよね。

この場合、cssファイルの書き方が間違っていると思われます。
括弧が閉じていない部分がないかなど調べてください。

Qブラウザ依存?へ飛ばない

ブラウザ依存でしょうか?・・・

<li class="yyy"><a href="hoge.html#xxx">ホゲ</a></li>
と記述しているリンクをクリックして、URLは
http://hogehoge.com/hoge.html#xxx
へ移動するのですが、
hoge.html内に
<a name="#xxx" id="#xxx"></a>
と記述している指定箇所に飛んでくれません。

IE7は正常に飛んでくれますが、
Firefox, Safari, Opera, GoogleChromeなど、
IE7以外のブラウザを用いると飛んでくれないのです。

この機能はIEだけの機能だったでしょうか?
ご存知の方がいましたら、ご教授いただけると幸いです。
よろしくお願いします。

Aベストアンサー

>同html内で、例えば、ページ上部に飛ばす場合は、
><a href="#pagetopr">ページ上へ↑</a></p>
>のように#付きで問題なく動作しているので、
>別htmlの場合、#を付けないということですね。

「#」は続く文字列がid値であることを明示します。
同html/別htmlは関係ありません。


・飛び先となる要素にはid値を書きます。
 <タグ id="xxx">

 →「id=」と書いているので、さらに「#」を付けて
  「これはid値ですよ」と明示する必要はありません。
 

・リンクのhrefには"#"+id値を書きます。
 同html <a href="#xxx">
 別html <a href="hoge.html#xxx">

 →「xxx」だけではパスの一部と認識するので
  「#」をつけて「これはid値ですよ」と明示します。
 →hrefにページの指定が無いなら(同html)、
  同html内の「xxx」というid値の要素へ移動します。
 →hrefにページの指定があるなら(別html)、
  指定html内の「xxx」というid値の要素へ移動します。

>同html内で、例えば、ページ上部に飛ばす場合は、
><a href="#pagetopr">ページ上へ↑</a></p>
>のように#付きで問題なく動作しているので、
>別htmlの場合、#を付けないということですね。

「#」は続く文字列がid値であることを明示します。
同html/別htmlは関係ありません。


・飛び先となる要素にはid値を書きます。
 <タグ id="xxx">

 →「id=」と書いているので、さらに「#」を付けて
  「これはid値ですよ」と明示する必要はありません。
 

・リンクのhrefには"#"+id値を書きます...続きを読む

Q外部CSSを適用させるための正しいソースコードの書き方

dreamweaverCS4のバグではないかと思うのですが、外部スタイルシート(test.css)を作成し、それをHTMLファイル(test.html)へ適用させたいのですが、ファイルの階層が同じなので、以下のようにソースコードを書くのが正解だと思いますが、
<link href="test.css" rel="stylesheet" type="text/css">

以下のように、「../test.css」と「..」が付いても適用される場合があります。
<link href="../test.css" rel="stylesheet" type="text/css">

逆に「..」が付く方が正解で、付かない方が間違っているのでしょうか?

どっちが正しいのでしょうか?

そもそも「..」とは何でしょうか?
すみません、根本的なところからわかっていません。
よろしくお願いします。

Aベストアンサー

これはUNIX系でのURLの書き方をwebでも採用してるのです(webサーバはUNIX系の環境が多い)。
ですので普段からUNIX系の環境で作業してる人には説明不要で最も簡単な書き方と言う事で。

>Windowsでの書き方
 C:\hoge\hage\hoge.html

>web(HTML)での書き方
 ../hoge/hage/hoge.html
 http://www.hoge.com/hoge/hage/hoge.html

>UNIXでの書き方
 /hoge/hage/hoge.html


で、ご質問の「..」ですが。
回答No.3 の模式図を参考になればおおよそ把握出来ると思います。
それに付け加える形で…

・ ./ ………1つで「同じ」フォルダ内
・ ../ ………2つで「上の」フォルダ内
・ /  ………0個で「絶対URL」と同じ意味

~と覚えて置いて下さい。
特に3番目の「絶対URL」の書き方は何かと便利です。
通常は絶対URLでは無く「相対URL」で書きなさいと指導されてると思いますが。

・http://www.hoge.com/hoge/hage/hoge.html
~コレと
・/hoge/hage/hoge.html
~コレは全く同じ意味になります。

これはUNIX系でのURLの書き方をwebでも採用してるのです(webサーバはUNIX系の環境が多い)。
ですので普段からUNIX系の環境で作業してる人には説明不要で最も簡単な書き方と言う事で。

>Windowsでの書き方
 C:\hoge\hage\hoge.html

>web(HTML)での書き方
 ../hoge/hage/hoge.html
 http://www.hoge.com/hoge/hage/hoge.html

>UNIXでの書き方
 /hoge/hage/hoge.html


で、ご質問の「..」ですが。
回答No.3 の模式図を参考になればおおよそ把握出来ると思います。
それに付け加える形で…
...続きを読む

Q

ヘッダーの<div>を作って、その下に横長(ヘッダーと同じ長さです)ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20pxほどの隙間が空いてしまいます。なぜでしょうか?マージンを0に設定してもできてしまいます。
また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか?

また、メニューボタンはjavascriptでスワップイメージにしました。

どなたかわかる方いらっしゃいますか?
とても困っています。できましたら至急にお願いいたします。

コードを載せておきます。

<div id="header">
    <div id="aa">
<h1>*********</h1>
<h2>*********</h2>
<p>**********<br />
*************</p>
</div><!--aa-->
    <div id="bb">
<p>********</p>
</div>><!--bb-->
</div><!--header-->
<!--navi-->
<div id="navi">
<ul #menu>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
</ul>
</div>
<!--navi-->


ヘッダー部分のcss
#header{
width: 800px;
height: 120px;
background-image: ***;
background-repeat: repeat-y;
margin: 0px;

}
ナビ部分のcss
#navi{
width: 800px;
height: 35px;
}

}

ul#menu{
float: right;
display: inline;
margin: 0;

}

li{
float: left;
margin: 0;

ヘッダーの<div>を作って、その下に横長(ヘッダーと同じ長さです)ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20pxほどの隙間が空いてしまいます。なぜでしょうか?マージンを0に設定してもできてしまいます。
また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてな...続きを読む

Aベストアンサー

mahalo1114 さんの思いとは別に、ソースがいろいろと間違っているから、上手くいかないんですよ。

css以前に、htmを正しく書きましょう。<ul #menu>とか</div>>とか、ケアレスミスしていませんか?
cssもケアレスミスしています。閉じるべきところは閉じ、閉じすぎているところは削り……、もう一度よくご自分の書かれたソースを点検してみてください。

QCSSで、h1#logoという書き方は

CSSの勉強を始めました。
IDは、例として #wrapper とか #header など#をつけて、クラスの場合は、「.side」などのように「ドット(.)をつけることはわかりました。

疑問なのが 「h1#logo」 というようにタグに続けて#(ID名)を書く書き方です。
ID名の前にタグ(h1)名がきて、それもスペースなしで続けて書くわけですが、どういう意味でしょうか。
h1に設定した#logoという意味でしょうか。

1度しか使わないこととして、address#ID名 や table#ID名もありでしょうか。

Aベストアンサー

どうも#2です。
その後予想通りの展開になっていて安心しました(笑)
さて、

>h1は、ページで1回しか使わないので、h1に対してCSSを設定してもいいのではとも思えるのです → h1{  }
とのことですが、その通りです。
そのHTMLファイル内でh1を1回しか使わないのであれば、そもそもHTMLタグにてid属性やclass属性を設定する必要がありませんよね。h1タグに対しスタイルを設定すればいい話です。h1が複数ある場合のみ、h1#logoが意味をなすのですから。

>なぜ、わざわざ h1#logo とidを設定するのかがよく理解できません。
>優先度の点数を高めるため?などの根拠があるのでしょうか。
理由はいろいろあるでしょう。例えば後から見たときに見つけやすくするためとか。ぶっちゃけ書いた本人にしかわかりません。
つまり、「ありでしょうか」といわれれば当然ありです(文法上なにもおかしくない)が、やる必要はないということですね。

とにかく、まず最初に大事なのは正しく書くことです。この場合の「正しい」とは「ブラウザがきちんと解釈できる」という意味になります。
原理主義的にガチガチの仕様を覚えるのはそのあとで構いません。

どうも#2です。
その後予想通りの展開になっていて安心しました(笑)
さて、

>h1は、ページで1回しか使わないので、h1に対してCSSを設定してもいいのではとも思えるのです → h1{  }
とのことですが、その通りです。
そのHTMLファイル内でh1を1回しか使わないのであれば、そもそもHTMLタグにてid属性やclass属性を設定する必要がありませんよね。h1タグに対しスタイルを設定すればいい話です。h1が複数ある場合のみ、h1#logoが意味をなすのですから。

>なぜ、わざわざ h1#logo とidを設定するのかがよく理...続きを読む

Q
の間が空です。

空白行を作りたくて
<div style="padding-top:10px;"></div>
と言うタグを入れているのですが
ツールでチェックすると
<DIV> と </DIV> の間が空です。
と言うエラーになるのですが、
何か文字を入れないとダメなのでしょうか?

Aベストアンサー

<div>は段落のまとまり、つまり、文章のまとまり、そこに文章がない!・・・おかしく思いませんか?
この要素以前の文面に、空間を作るための、装飾要素(padding margin)を設けることです。
ただし、装飾要素なので、HTMLに記述してはいけません!
必ず、CSSに記述しましょう。

ValidなHTMLを記述するには、validatorなどを利用されているとおもいますが、まずは仕様書を、熟読されることです。
    ↓↓↓↓↓↓↓↓↓↓↓↓

で、紹介・指摘されている意味も理解できると思います。

参考URL:http://validator.w3.org/

Qcss で 「Top へ戻る」 の書き方

h2 で右側に 「Top へ戻る」 を置きたいんですが、
以下のように書いてみると IE6 で背景画像が表示されないのと
かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか...

<style type="text/css">
.h2_container{
background: url(images/bg_h2.jpg);
}
.title{
width: 500px;
float: left;
}
.top{
width: 100px;
float: left;
}
.clear{
clear: both;
}
</style>

<div id="h2_container">
<div class="title"><h2>内容のタイトル</h2></div>
<div class="top"><a href="#">Top へ戻る</a></div>
<div class="clear"></div>
</div>

Aベストアンサー

こんなんどーでしょ。

<style type="text/css">
#h2_container{
overflow: hidden;
display: block !important;
display: inline-block;
background: url(bg.jpg);
}
h2{
float: left;
margin: 0;
width: 500px;
}
.top{
margin-left: 500px;
width: 100px;
}
</style>

<div id="h2_container">
<h2>内容のタイトル</h2>
<p class="top"><a href="#">Top へ戻る</a></p>
</div>

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

Qcssの書き方について

よろしくお願いします。
HTMLに以下の記述をしました。

<img class="photo">
<a href="http://www.aaa.com" >
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>


<p>テキスト
tekisuto</p>



cssに以下の記述をしました。
img.photo {float: right
}

実行したい内容は画像を右に寄せてその画像にリンクを貼り、左側に文字を挿入して、width800pxの枠で囲み背景を黄色にしたいと考えております。
よろしくお願いします。

Aベストアンサー

えーと何から書けば良いかな…

1.
イメージタグに閉じタグはありません
</img> ←不要です


2.
aタグには閉じタグが必要です

誤)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>

正)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</a>

イメージタグとaタグの間違いかしら…?


3.
画像を右寄せにしたいだけならばcssの必要はありません。
imgタグに「align=right」を追加すればよいです

<img src="img/techno.gif" alt="テスト画像" width="199" height="64" align=right>

もちろんcssでも実装できます。が、その場合
誤)
<img class="photo">
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>

正)
<a href="http://www.aaa.com">
<img class="photo" src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</a>

イメージタグ内部に書きます。


4.
width800pxの枠で囲むにはテーブルタグを使用します。




簡単にまとめると…

■CSSを使わない場合
<table width=800 border=1 bgcolor="#FFFF00">
<tr>
<td>
<a href="http://www.aaa.com"><img align=right src="img/techno.gif width="199" height="64"></a>
<p>テキスト
tekisuto</p>
</td>
</tr>
</table>

こんな感じでしょうか。

えーと何から書けば良いかな…

1.
イメージタグに閉じタグはありません
</img> ←不要です


2.
aタグには閉じタグが必要です

誤)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</img>

正)
<a href="http://www.aaa.com">
<img src="img/techno.gif" alt="テスト画像" width="199" height="64" />
</a>

イメージタグとaタグの間違いかしら…?


3.
画像を右寄せにしたいだけならばcssの必要はありません。
imgタグに「al...続きを読む

Q

はじめまして。
現在movabletype3.35で初めてサイトを作成している者です。
宜しくお願いします。

下記にありますHTMLとCSSでページを作っているのですが、

Firefoxやsafariで確認すると、

<div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている
<div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。

※IE7では隙間は出来ませんでした。

<div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス
<div id="pankuzu">
<div id="introduction">

これら3つのボックスには全てCSSでmarginとpaddingを調整しているつもりなのですが、どうしてもIE7と同じように表示されず隙間が出来てしまいます。。

ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。

ということは、<div id="introduction">の中のHTMLかCSSの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。

是非ご指導、ご鞭撻宜しくお願い致します。


----------------------------------------------------------------
【CSS】

* {
margin: 0;
padding: 0;
border: 0;
background-color:transparent;
color: #333;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration: none;
}


div#keyvisual {
width: 780px;
height: 100px;
margin: 10px 10px 0 10px;
padding: 0;
background: url("※※※.gif")
no-repeat 0 0;
}

div#title {
width: 500px;
height: 50px;
line-height: 350%;
margin: 0 0 0 10px;
padding: 0;
}

div#pankuzu {
width: 780px;
height: 20px;
margin: 0 10px 0 10px;
padding: 0;
background-color: #999;
}

div#pankuzu p {
font-size: 50%;
}

div#introduction {
width: 780px;
height: 50px;
margin: 0 10px 0 10px;
padding: 0;
background-color: #999;
}

dl#site {
margin: 0;
padding: 0;
}

dl#site dt {
display: block;
float: left;
clear: left;
width: 160px;
margin: 15px 5px 10px 5px;
padding: 0;
font-size: 90%;
text-align: left;
background-color: #fff;
}

dl#site dd {
width: 600px;
margin: 15px 5px 10px 5px;
padding: 0;
font-size: 80%;
text-align: left;
}
---------------------------------------------------------------
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">

※ヘッダー部分は省略しています。

<!-- サイトボディー部分ここから -->
<body>
<div id="container">
<div id="keyvisual">
<div id="title">
<h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1>
</div>
</div>
<!-- パン屑リスト -->
<div id="pankuzu">
<p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$>
</p>
</div>

<div id="introduction">
<dl id="site"><dt>題名</dt><dd>説明</dd></dl>
</div>
----------------------------------------------------------------

はじめまして。
現在movabletype3.35で初めてサイトを作成している者です。
宜しくお願いします。

下記にありますHTMLとCSSでページを作っているのですが、

Firefoxやsafariで確認すると、

<div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている
<div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。

※IE7では隙間は出来ませんでした。

<div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス
<div id="pankuzu">
<div id="in...続きを読む

Aベストアンサー

dl#site dd のmargin-top:15pxが
上に突き出ている感じですね。
周囲の要素のPaddingで代用してはいかがでしょうか。


人気Q&Aランキング

おすすめ情報