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

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静止画に動きをつける動画作成ソフト

なんと説明してよいのか分かりませんが、
静止画をスパンさせたりして動きをつける
動画作成ソフトをご存知でしたら教えてください。

例・このような動画作りたいのです。
YouTube - Bug Manga AMV/MMV -
http://jp.youtube.com/watch?v=ekRrcfujTwc

私の知っているソフトは普通にスライドショーのようにしか扱えません。

フリーソフトであれば一番いいのですが・・・・

Aベストアンサー

この程度でしたら、ズームやパンの繰り返しですから、何でも出来ると思います。
動き的にはスライドショーのLiFE with PhotoCinemaに似ているけど、私なら一般的な動画編集ソフトでも作れます。

http://www.digitalstage.jp/life/

ソフトの選択より使い方だけかと・・・。

VideoStudioでもPremiereでもAfterEffectsでも何でも出来ます。

QCSS スタイルを子要素の子要素に継承させたくない

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…} という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。

子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。

table.none{border-style:none;}
table.none td{border-style:none;}

HTMLタグに直接以下のように指定しても同様でした。

<table style="border-style:solid;">

どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。

もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。

どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…} という指定の方法もあるようで...続きを読む

Aベストアンサー

微妙に把握してませんがこう?

table.border table.none td {
border:0px none;
}

「css 優先順位」などで検索するといろいろヒットしますよ

Qで2重にかけているものをひとつにまとめれる?

cssについての質問です。
<span class="hoge01"><span class="hoge02">テキスト</span></span>
となっているのを、
<span class="hoge01,hoge02">テキスト</span>
や、
<span class="hoge01;hoge02">テキスト</span>
のようにまとめることはできませんか?
ちなみに上の2つは使えませんでした。
よろしくお願いいたします。

Aベストアンサー

複数のクラスを付ける場合、半角スペースで区切ります。
<span class="hoge01 hoge02">テキスト</span>

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.2

Q

要素をインライン要素にしての右寄せ

<p>要素をインライン要素にしての右寄せ

【以下、HTML】
.text{
font-size:12px;
font-weight:normal;
margin:0px;
padding:25px 0px 0px 35px;
}

<div class="text">
<img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div>

上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか?

よろしくお願いします。

Aベストアンサー

きちんと仕様書くらいは読んでおきましょう。
そもそも、CSSをきちんと適用させるためには正しくマークアップされたHTMLが必要です。

されたいことは、画像をリストのマークにしたリンクリスト(ナビゲーションリスト)だと思いますから、
<ul class="nav">
 <li><a href="">リンク</a><span>あいうえお</span></li>
 <li><a href="">リンク</a><span>あいうえお</span></li>
・・・・
<ul>

とマークアップすべきですね。全くスタイルシートを使わないときでも文書の構造が分かるようにマークアップするのがHTMLの基本中の基本です。この場合<p></p>内に書かれている情報は別段落ではないですから、<p>paragraph・・段落でマークアップするのは間違いです。
 そのうえで、たとえば次のようにスタイルシートを書きます。そのほうが簡単ですね。

サンプルHTML 4.01Strictです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>見本</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
ul.nav{
list-style-image: url("http://cmm001.goo.ne.jp/img/logo/goo.gif");
margin-left:auto; margin-right:auto; width:300px;
line-height:2ex;
}
ul.nav li{width:100%; position:relative;padding-left:10px;margin-bottom:1ex;}
ul.nav li a{position:relative;top:-1.5ex;}
ul.nav li span{display:block;position:absolute;right:0px;top: 2ex;color:red;}
-->
</style>
</head>
<body>
<h1>見本</h1>
<h2>ナビゲーションリストの横配置</h2>
<ul class="nav">
<li><a href="">リンク1</a><span>あいうえお</span></li>
<li><a href="">リンクリンク</a><span>かきくけこさしす</span></li>
<li><a href="">リンクだよ</a><span>せそ</span></li>
</ul>
</body>
</html>

きちんと仕様書くらいは読んでおきましょう。
そもそも、CSSをきちんと適用させるためには正しくマークアップされたHTMLが必要です。

されたいことは、画像をリストのマークにしたリンクリスト(ナビゲーションリスト)だと思いますから、
<ul class="nav">
 <li><a href="">リンク</a><span>あいうえお</span></li>
 <li><a href="">リンク</a><span>あいうえお</span></li>
・・・・
<ul>

とマークアップすべきですね。全くスタイルシートを使わないときでも文書の構造が分かるようにマークアップするのがHTML...続きを読む

Qjqueryを使って無駄なspanタグを削除したい

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
------------------------------------------

このように無駄なspanタグを削除したいのですが、可能でしょうか?
ご存知の方、ご回答いただければ幸いです。
よろしくお願い致します。

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
-...続きを読む

Aベストアンサー

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
</p>
</div>


改行コードは半角スペースとして表示されます。(HTMLの文法に準拠。)
.children()にtextNodeが入っておらず、意外と苦労しました。

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
...続きを読む

QCSSでflotさせた要素を親要素で幅いっぱいに表示したい

以下のHTMLソースで、リストをfloatで横並びにし、
親のdivに対して3列ずつで左右余白なく幅いっぱいに
表示させたいと考えております。

<div>
<ul>
<li><img></li>
<!-- 複数リストを繰り返し -->
<li><img></li>
</ul>
</div>

例えば以下のようなCSSを書いた場合、

 div {width:500px;}
 li {float:left; width:150px; margin-left:10px;}

左端はそろいますが、右端に余白が出来てしまいますよね。

各リストに対して左端用クラス、右端用クラスみたいなものを
指定すれば実現は可能だと思いますが、出来るだけHTMLを編集せず
実現したいと考えております。

IE6~7・safariでとりあえず表示させたいです。
どなたか知識のある方、ご教授の程よろしくお願いいたします。

Aベストアンサー

divにwidthを指定しても良いのであれば、liに指定するwidthの3倍の値を指定すればよい気がしますが。

div {width:501px;}
li {float:left; width:167px;}

何か不都合でもあるんでしょうか?

Q連続したの改行

下記の2つのパターンでトータルの横幅は変わってくるのでしょうか?

■改行なし
<span>あ</span><span>い</span>

■改行あり
<span>あ</span>
<span>い</span>

chromeで確認したしたところ、「改行あり」のほうが、数px大きかったのですが、、、

Aベストアンサー

<span>あ</span
><span>い</span>

こうする
タグの中で改行する

もしくは

<span>あ</span><!--
--><span>い</span>

こうする
改行をコメントしちゃう

そのくらいしかないと思う

QCSSファイルが見当らないclass名があり、しかもCSSが効いています。どこにあるんでしょうか?

tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。
なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・
JavaScriptで操作しているのか?と思ってそのあたりも見はしたのですがわかりませんでした。

以下のURLです。
※ちなみに「比べてください!圧倒的なコストパフォーマンス」というところの表のように、背景画像や2ピクセルでの区切り線、tdやthによって背景画像や色を変更している手法などを知りたいものです。

http://www.rensaba.com/campaign/ocssl/

とりあえず、tableタグにある「class="comparison"」が見当たらないのです。

このソースにかかれてあるCSSファイルは複数ありますが、全て検索かけてみたのですがひとつも出てきませんでした・・・・

この表の作り方だけでなく、いったいどうやって効かせているのかも知りたいです。

宜しくお願い致します。

tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。
なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・
JavaScriptで操作しているのか?と思ってそのあたりも見はしたのですがわかりませんでした。

以下のURLです。
※ちなみに「比べてください!圧倒的なコ...続きを読む

Aベストアンサー

http://www.rensaba.com/campaign/ocssl/this.css
にしっかり書かれていますが…

Qspan要素にのみwhite-space: nowrapを指定したい

CSSによる改行指定が思う様にできなくて困っています。

幅400pxのボックスの中で、<span>~</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。

スタイルシートに
div{width:400px;}
span{white-space: nowrap;}

HTMLに
<div>
<span>type1</span><span>type2</span><span>type3</span>...
</div>

のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。
どのように指定すれば目指している形にできるでしょうか?

Aベストアンサー

例えば

<div>
<span>type1</span> <span>type2</span> <span>type3</span>...
</div>

こんな感じで半角スペースを挿入すると改行はされるはずです。

Qborderプロパティによる線の表示でdiv要素とp要素で囲った場合の違い

下の記述例で質問があります。

CSSソース
kbd { margin: 0 0.3em;
padding: 0.1em 0.3em;
border: 1px solid black;
}

HTMLソース
<div>
<kbd>keybord</kbd>と入力してください。
</div>

このような記述のとき、IE7ではkbd要素を囲っている下の線が消えてしまいます。
しかし、HTMLソースを、

<div>
<p>
<kbd>keybord</kbd>と入力してください。
</p>
</div>

のようにdiv要素内にkbd要素をp要素で囲ってやると下の線が現われます。
div要素ではダメ(下の線が消える)なのに、なぜp要素では下の線が現われるのでしょうか?この違いが分かりません。

回答よろしくお願いします。

Aベストアンサー

こんにちは

<body>内にこれのみで試した場合には<p>要素で囲んだとしても下線は表示されません(IE6ではでていません)
前回回答していただいた p { line-height:1.5em; }がそのまま残っているのでは?

え~と、これのみですると下線が出ないのはbody heightは指定してない限り文書の高さがheightになります
※自身の体験から得たものなので確証はありません

keybordと入力してください
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄↑ ̄この部分がbody heightとなりこれより上が表示領域になり、これ以降にはみ出ているものは表示されません
※上線が表示されるのは表示可能領域にあるからで下線はheight lineより0.1emはみ出しているので表示されていません

なのでbody { height:100%; } などのように表示領域を拡大してやると<div>のみで囲った場合でも下線は表示されます

最も簡単な例は

<div>
<kbd>keybord</kbd>と入力してください。
</div>
あああ

などのように</div>以降に何か記述してheight lineを下げてやると下線は出ます


要は
・表示領域を増やす・・・か

______________↑_0.1em上に上線(1px)がある
keybordと入力してください     ←1.0em
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄↓ ̄0.1em下に下線(1px)がある
ので<div>もしくは<body>のline-heightを0.2em+border分増やして(1.35em位)やればいいです

こんにちは

<body>内にこれのみで試した場合には<p>要素で囲んだとしても下線は表示されません(IE6ではでていません)
前回回答していただいた p { line-height:1.5em; }がそのまま残っているのでは?

え~と、これのみですると下線が出ないのはbody heightは指定してない限り文書の高さがheightになります
※自身の体験から得たものなので確証はありません

keybordと入力してください
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄↑ ̄この部分がbody heightとなりこれより上が表示領域になり、これ以降にはみ出ているも...続きを読む


人気Q&Aランキング

おすすめ情報