こんにちは。
宜しくお願いいたします。

CSSで以下のコードを書いているときに、同じ結果になりました。
P要素の中にclass="pink"として書く場合と
<span class="pink">としても良いと思うのですが、

P要素を使った書き方のほうが、良いのでしょうか?問題集
Webクリエーター能力検定試験初級 FOM出版にての問題でしたが、こちらでは、
P要素に記述してありました。
SEO的にも良いのでしょうか??

<p><span class="pink">お一人様3,000円</span></p>

違いがおわかりになられるお方がいらっしゃいましたら、宜しくお願いいたします。
失礼致します。

<p class="pink">お一人様3,000円</p>
<h2>特選コース</h2>
<p>旬の味覚をふんだんに使いました。<br>
ボリュームたっぷりのぜいたくなコースです。</p>
<p class="pink">お一人様4,500円</p>
</body>
</html>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

>Webクリエーター能力検定試験



そもそも、私はこの名称にも反対だし、 内容についても反対だ。クリエーターですよ、アーチステックな活動を指す言葉です。

それが、他の人から階級がつけられる。いわば芸術にたいして、その能力に段階をつけるなんて

社会主義国家

そのものの考えだ。例えばイラストレーターにそんなありましたっけ? 私の会社では、その資格無視しています。

本題です。

ちゃんと基礎を学びましょう。SPANはインラインオブジェクトです。Pはブロック要素です。同じスタイルを指定する場合は、注意が必要です。基本は、スタイルは最小範囲で指定する事。

スタイルにも、いくつかの種類がありますね。ポジション(レイアウト)、フォント、行、など他にもありますが、まとめて上位(ツリー構造の)からかける場合と、特定の範囲に限定する場合と。

この違いわかりますか。提示したような文だと、確かにSPANは余計です。それは条件があり、フォントや色、バックグランドが、そのブロックで同じであれば、PにClassを設定すればいいが、そうでない場合、

例えば、例では、Bodyのスタイルが設定されていません。通常設定されていて、全体では10pt blackなどと指定されています。「お一人様」と言うのは注意書きによくにていて、このページで、最も関心がエンドユーザー(客)にはあります。

この場合ボールドにしたり、色を変えるのが通常です。

将来的に、この文字を強調するような事が、必ずでてくると、業務でやる場合、考えておく必要があります。

なので、状況によっては、どっちでもいいのです。これはまさにクリエーターの仕事でもありますが、たいていサイト管理や、ディレクターが決めています。

<ここが肝心>
さらに言えば、スタイルからすると同じでも、DOM的にはぜんぜんちがいます。

例えばClassで price なんて作ってSPANに設定した場合、

getElementsByClassName() とか getElementsByTagName().style...

などと内容を動的に変えるには、意味がないタグが結構重宝します。DIVとかその類のタグです。

これは、いわゆる「Webクリエーター」の範疇ではないが、CGIなどを使う場合特に重要です。つまり、これらを理解していない

クソのクリエーター

は、うちでは雇いません。サーバーサイドスクリプト+クライアントサイドスクリプトを全体的に勉強してください。

デザイナーに成るのか、Web開発者(アプリ開発者)になるのか、道は違いますが、どちらの領域も現在必要です。


特に、業界が成熟してきて、分業になればなるほど、両方を理解すると、顧客や、スポンサーからは重宝されます。これはよく、野球のピッチャーとバッターの関係に似ています。
    • good
    • 0
この回答へのお礼

0909union 様

詳しく書いてくださいまして、ありがとうございました。

>Webクリエーター能力検定試験

スクールに通っておりますが、スクールお薦めのようです。たしかにイラストレーターにはありませんね。資格の乱立の弊害でしょうか、、、。しかしながら試験は受けます。

>この場合ボールドにしたり、色を変えるのが通常です。
>将来的に、この文字を強調するような事が、必ずでてくると、業務でやる場合、考えておく必要があります。

おっしゃるとおりです。なにか入ることを考えていても良いですし、後々考えても良いのですね。

>は、うちでは雇いません。サーバーサイドスクリプト+クライアントサイドスクリプトを全体的に勉強してください。
>デザイナーに成るのか、Web開発者(アプリ開発者)になるのか、道は違いますが、どちらの領域も現在必要です。

はい、勉強致します。
まだまだ、そのようなところまでは時間がかかります。HTML+CSSの途中でした。

現在は分業が進んでいて、もっともっと専門化されるのでしょうね。
サーバーサイド今のうちに、勉強しておきます。

ありがとうございました。
失礼致します。

お礼日時:2011/04/10 19:51

<p><span class="pink">お一人様3,000円</span></p>


必要がないタグ span が入っているということでしょう。
    • good
    • 0
この回答へのお礼

outbrave 様

たしかに必要ありませんね。
ありがとうございました。
失礼致します。

お礼日時:2011/04/10 19:43

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか?

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
marg...続きを読む

Aベストアンサー

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
 最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
 まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )より
 本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
 本仕様書は様々な方法で利用できるだろう。
・ 最初から最後まで通読する。
・ 必要な情報に直接アクセスする。

 最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
 私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )

 ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#toc )
 特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
 ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

 そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
 で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よっ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qdivとpの使いわけ

サイトを作っているとdivとpで迷います。
「自由だしどちらでもいんじゃない?」と言う声も聞こえてきそうに
思うのですがこういう方向で使い分けている等という区分ってありますか?

私の場合

<div class="title">タイトルです</div>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>

のような感じでcssで

p {margin-bottom: 1em;}

と設定しております。

コメントに改行がなく1行2行で済む場合は

<div>コメントです</div>

で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは
囲むようにしております。

気になったもので質問させて頂きました。有利な点や不利な点など
どんなコメントでも構いませんのでご意見をお待ちしております。

Aベストアンサー

> サイトを作っているとdivとpで迷います。
> 「自由だしどちらでもいんじゃない?」と言う声も聞こえてきそうに

決して「自由」ではないですよ。divもpもブロック要素ではありますが、divは子要素にブロック要素を持てますが、pはインライン要素しか内包できない、という先ずは大きな違い(文法上の制約)があります。論理的意味を考えないなら、文法上はpを全てdivで置き換えることは可能ですが、その反対は真ではない、という事になります。
また、上記で触れた様に、(ご存知かもしれませんが)p(paragraph)には「段落」という論理的意味がありますが、div(division)自身は論理的意味は持ちません。ですので、内容が「段落」として相応しいものであるなら、pでマークアップするのが適切という事になります。
----------------------------------------------------------------------
<div class="title">タイトルです</div>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
----------------------------------------------------------------------
上記の様な文章構造であるなら、ANo.1様の例と同様、「タイトルです」という箇所はh(n)要素でマークアップするのが妥当です。
----------------------------------------------------------------------
<h1 class="title">タイトルです</h1>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
----------------------------------------------------------------------
ですが、上記の「コメントです1」~「コメントです3」までの3つのpに対して更に何かをまとめたスタイルを追加したいとします。例えば、この3つのpをひとくくりにして、外枠に線を引いたボックスに入れたレイアウトにしたいとします。その場合、ブロック要素であるpを子要素にできるブロック要素は限られます。例えば各リスト要素(ulのli、olのli、dlのdd)などもブロック要素を子要素に持てるのですが、まず親であるこれら自身に「リスト」という論理的意味がある為、どの局面でも適当に使えるというものではありません。となると、この場合妥当な親要素はdiv、という様に考えられます:
----------------------------------------------------------------------
<h1 class="title">タイトルです</h1>
<div class="coment">
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
</div>
----------------------------------------------------------------------
という様にマークアップした上で、div.commentにborderなどのプロパティでスタイルを与えれば論理構造上も問題がない状態で新たなスタイルを与える事ができます。

> コメントに改行がなく1行2行で済む場合は
> <div>コメントです</div>
> で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは
> 囲むようにしております。

改行があろうがなかろうが、「コメント」という同じ位置付けを持つものであれば、基本、pでマークアップすべき様に思えますが?

> 有利な点や不利な点など

divとpの使い分けができていない(文法上は正しい上で)からといって特に有利・不利があるかどうかわかりかねますが、pには明確な論理的意味があり、divには論理的意味がない、という事を押さえた上でマークアップを考えていけば、自ずとそれらの出番は決まってくると思うのですが。
個人的には、レイアウトを実現する為にdivを使うべきかどうかで悩む事はあっても、その内容がpかdivか、で悩む事はなかった様に思います。

> サイトを作っているとdivとpで迷います。
> 「自由だしどちらでもいんじゃない?」と言う声も聞こえてきそうに

決して「自由」ではないですよ。divもpもブロック要素ではありますが、divは子要素にブロック要素を持てますが、pはインライン要素しか内包できない、という先ずは大きな違い(文法上の制約)があります。論理的意味を考えないなら、文法上はpを全てdivで置き換えることは可能ですが、その反対は真ではない、という事になります。
また、上記で触れた様に、(ご存知かもしれませんが)p(paragr...続きを読む

Qul liのclass指定について

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

...続きを読む

Aベストアンサー

>class指定をしない状態ですと普通に表示されるのですが、
このスタイルシートの書き方はどうなってますか?

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか?

QタグにCSSのclass設定可能?

<img>タグにスタイルシートのclassは、直接設定できるのでしょうか?

例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。
<table border="4" width="250">
<tr>
<td align="left">
<img src="example.jpg" width="100" height="100" borde="0">
</td>
</tr>
</table>
この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。

質問1:
ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します(ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。)。スタイルシートの指定は、<head></head>内で行なうことにします。

この場合、以下のように<img>タグの中に直接classを設定できますか?できない場合は、その理由、正しいやり方等をお教え下さい。
<head>
<style type="text/css">
.abc{
text-align:center;
margin-top:10px;
margin-bottom:10px:
}
</style>
</head>
<table border="4" width="250">
<tr>
<td align="left">
<img class="abc" src="example.jpg" width="100" height="100" borde="0">
</td>
</tr>
</table>

やはり、<div></div>で<img>タグを囲んで、
<head>
<style type="text/css">
.abc{
text-align:center;
margin-top:10px;
margin-bottom:10px:
}
</style>
</head>
<table border="4" width="250">
<tr>
<td align="left">
<div class="abc">
<img src="example.jpg" width="100" height="100" borde="0">
</div>
</td>
</tr>
</table>
などとするしか方法がないのでしょうか?

質問2:
また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか?

よろしくお願いします。

<img>タグにスタイルシートのclassは、直接設定できるのでしょうか?

例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。
<table border="4" width="250">
<tr>
<td align="left">
<img src="example.jpg" width="100" height="100" borde="0">
</td>
</tr>
</table>
この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。

質問1:
ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして...続きを読む

Aベストアンサー

こんにちは

><img>タグの中に直接classを設定できますか?
できますが、text-align:center;は効きません
これはブロック要素にしか効かないのでインライン要素である<img>では使えません
理由はインライン要素の場合widthがその内容分しかないため動かそうと思っても横に自由がないからです

><div></div>で<img>タグを囲んで
text-align:center;を使うのであればこういった方法しかないと思います

>方法がないのでしょうか?
<img>を強制的にブロック要素にして中央表示することはできます

img {
display:block;
width:100px;
height:100px;
border:none;
margin:10px auto;
}

>スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか?
<div align="center">
<img >
</div>

とか

<center>
<img>
</center>
とすればできますが、align属性、<center>は非推奨になっています

こんにちは

><img>タグの中に直接classを設定できますか?
できますが、text-align:center;は効きません
これはブロック要素にしか効かないのでインライン要素である<img>では使えません
理由はインライン要素の場合widthがその内容分しかないため動かそうと思っても横に自由がないからです

><div></div>で<img>タグを囲んで
text-align:center;を使うのであればこういった方法しかないと思います

>方法がないのでしょうか?
<img>を強制的にブロック要素にして中央表示することはできます

im...続きを読む

QTRとTDに対するCSS設定方法を教えてください

http://k52.org/syokuzai/c/fish/
↑のようなカレンダーを作りたいと考えております。

ソースよりTABLE内のTRとTDに外部CSSファイルで設定していると
思っているのですが、どのようにすればTDの背景色(紺色)より
大きい幅のTR(要は列)のライン(薄い青色)を付けられるのか
が分かりません。

わかりにくい説明とは思うのですが、どうぞよろしくお願いします。

Aベストアンサー

構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・

適合するCSSをぬきだすとこんな感じ

<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>

<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</span></td>
<td class="mon">6</td>
</tr>
<tr class="fish">
<td class="mon">7</td>
<td class="mon">8</td>
<td class="mon"><span>9</span></td>
</tr>
</tbody>
</table>

構造も簡単だしざっとみれば、ある程度想像つくと思いますが・・・

適合するCSSをぬきだすとこんな感じ

<style>
table.cal, tr, td {
padding:4px;
}
tr.fish {
background-color:#F3F6FF;
}
td.mon span {
background-color:#557766;
color:#FFFFFF;
display:block;
}
</style>

<table class="cal">
<tbody>
<tr class="fish">
<td class="mon"><span>1</span></td>
<td class="mon">2</td>
<td class="mon">3</td>
</tr>
<tr>
<td class="mon">4</td>
<td class="mon"><span>5</s...続きを読む

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む

Q

現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。

bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか?ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか?

よろしくお願いします。

Aベストアンサー

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

ブロック要素の中のテキストやインライン要素をセンタリングするにはtext-alignを使います。
<div style="width:100px; text-align:center;">まんなかです</div>

それと、注意したいのは、一行目の文頭に<!DOCTYPE~>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も(ますます)変になりますのでご注意を。

こんな感じで。

No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされ...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報