これからの季節に親子でハイキング! >>

表記のタグは必ずしも純粋に文章の構造を記述するものとは言えない(装飾やレイアウトに属する範疇)ような気がします。

実際CSSで十分に代用できると思うのですが、これらのタグがW3Cで非推奨とされないのは何故でしょうか。

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

A 回答 (6件)

> HTMLで最低限の外見制御


まだちょっと主従関係について混乱されているようです。

HTMLの要素がデザインに影響する機能を持っているのではなく、
それが何であるかを示すためにマークアップをすると
結果として(視覚化するブラウザでは)表示に影響が出るのです。

ページを表示する≒(X)HTML文章を伝達する、ために存在するブラウザが
段落だから行間を空けてやろうとか
表だから縦横に並べてやろうとか
それなりの視覚化を行っているだけです。


行間がどうなるとか外見の制御を念頭においてを考えるのではなく
本質的にそれが「何」であるかをマークアップするのが文章の論理構造を記述するという事です。

一般的に外見から考えたほうが理解しやすいので
縦横に並べたいと思えばそれは恐らくリストや表だし、
一行空けたいと思えばたぶん段落の切れ目ですが
理念は逆ですのでお間違えのなきように。
    • good
    • 2
この回答へのお礼

重ね重ね、ありがとうございます。

>ページを表示する≒(X)HTML文章を伝達する、ために存在するブラウザが
>段落だから行間を空けてやろうとか
>表だから縦横に並べてやろうとか
>それなりの視覚化を行っているだけです。

なるほど、これは目から鱗でした。pタグやtableタグがwebページの外見を整形しているのではなく、ブラウザがそれを解釈して独自の出力要素を付加しているに過ぎないというわけですね。

それを念頭に置くと、「ブラウザに指示を送ること」が目的であるfontタグやbタグが非推奨とされている理由も、改めて納得できました。

大変参考になりました。どうもありがとうございます。

お礼日時:2006/04/12 10:54

p要素は・・・自分はなくちゃ困るな。

基本だし(説明になってないけど

この手の話は色々なところで議論されています。
私は自分の考えをここでは述べませんが、興味がありましたら隅から隅までご堪能ください。

HTML議論リンク集のリンク集(p要素,br要素,object要素,他)
http://www.akatsukinishisu.net/wiki.cgi?HTML%B5% …

うーんおしいっ。面白そうなのに多くがリンク切れだ。
そのテーブル、本当に必要?(tableであるべきかdl,dt,ddを使うべきか)
http://www.akatsukinishisu.net/wiki.cgi?%A4%BD%A …
    • good
    • 0
この回答へのお礼

御回答ありがとうございます。

DHTMLの手引書を捲っていてふと浮かんだ疑問だったのですが、同じことを考えた方は多かったのですね。

ご提示のリンクも参考にさせて頂きます。ありがとうございました。

お礼日時:2006/04/12 10:43

何でもかんでもCSSで代用するとCSSが使えない環境や、


設定でCSSを無効化した環境は苦労しますよ(笑)

視覚的な影響力を持つものを全て見栄えの定義という範疇で考えるのは良くないと思います。

HTML+CSSでWebページを構成した場合、
CSSが利用できなくてもある程度の範囲で正常に利用できることが望ましいのです。

例えばbrタグであれば、この利用規約がCSS無効の環境で改行ナシになったと考えてみてください。
ただでさえ長い文章が改行されていなければ読む気を失うことは間違いないと思います。

というか私であれば"何が何でも絶対に"読みません(笑)
http://service.okwave.jp/okwave/terms/index.html

tableタグはレイアウト形成で用いられる場合がありますが、本来の用途は複雑なリスト(要するに表)の形成です。
通常の図表をtableなしで構成することは非常に困難だし、CSSが無効になればユーザーはそこにある情報を利用できなくなります。

pタグも然り。ご存知かもしれませんが一部のテキストブラウザでは連続した<br>を無視するようになっているし、
<p>~</p>同士に行間を開けて表示するようになっています。

CSSのレイアウト設定が利かない環境ではpタグで文書構造を判断しています。
テキストブラウザのみならず音声ブラウザなども一部はそれに入るはず。

br,p,tableなどをCSSで代用することはそれらの環境を排斥することになってしまいます。
Web標準化の理念からも大きく逸れてしまいますよ。
    • good
    • 0
この回答へのお礼

御回答ありがとうございます。

CSSを切った環境のことは失念していました。確かにその場合、HTMLで最低限の外見制御をしてやる必要はありますね。

また、テキストブラウザや音声ブラウザなどを含めての標準化というポイントも盲点でした。確かに、W3C規格でもこれらに対する言及があったと記憶していたのですが、完全に認識から抜け落ちていました。

今回の件で、いろいろと考え直して認識を改める必要がありそうです。どうもありがとうございました。

お礼日時:2006/04/12 10:08

>実際CSSで十分に代用


br は改行というデザインの事ですから、意図は判りますが・・・。CSSでの代用は現在では無理です。改行するという概念を非推奨とする発想ならまぁ考えられなくもないですが、文章の改行って自然ではないかと・・・。

そして p, table はそれこそ意味を持っています。p は段落であり、table は表を意味します。CSSではデザインこそ代用は出来ても意味は表せません。

それ以前にデザインの為のタグ選択は非推奨であるW3Cからしたら、CSSが無効でHTMLだけでまともに読めない場合、それはどこかでデザインの為のタグが使われているという事で逆に非推奨ですけど・・・・・。


まぁ「文章の構造を記述」に対して「CSSで十分に代用」としている時点で間違いですが。
タグの選択でCSSでどう表せると考える事が間違い。
表なのに table を使わず div と CSS を交えて記述するのは間違い・・・。(デザインの為に table を使うなという事と混同しない様に・・・。)
HTMLは構造。CSSはデザイン。そしてHTMLに対するブラウザのデフォルトのデザインがいろいろとやっかいな・・・。
    • good
    • 0
この回答へのお礼

御回答ありがとうございます。

質問の文章が判り難かったようで申し訳ありません。私が意図していたのは、文章の構造化はソースレベルにおいてdivタグなどで賄ってしまい、webページの外見に影響する部分は完全にCSSで記述したほうが、構造とデザインを分離する現在の標準化の方向性に合致しているのでは? ということでした。

実際、コンテンツ要素の各ブロックをHTMLで順不同に記述したものをCSSで自在にレイアウトする例も目にしたことがあり、ソースの保守性・再読性といった面でもこの方式の方が有用に思えた次第です。

お礼日時:2006/04/12 09:33

http://www.kanzaki.com/docs/html/htminfo11.html#S4
br要素は微妙ですが、段落内においてさらに区切りが必要な場合に使うものだと思っています。
p要素については#1さんのおっしゃるとおりでむしろ必須です。

http://www.kanzaki.com/docs/html/htminfo16.html
table要素は「表」構造を示すためにあります。
他の要素+cssでtableに見えたとしても「表」をマークアップする為にはtableを使うべきです。
    • good
    • 0
この回答へのお礼

御回答ありがとうございます。

#1さんへのお礼でも書きましたが、「構造」をマークアップするためのタグがwebページの外見にまで影響を及ぼすのは本末転倒では? という疑問が生じたため、質問させて頂いた次第です。

御回答を参考に、もう少し考えてみようと思います。

お礼日時:2006/04/12 09:21

BRとTABLEは、単純に・・・


「代替できないから」です。
(是非これらをCSSで代用した画面を作ってみせてください。)

P(=段落)に関しては、逆に「文章の構造そのもの」だからです。
むしろ、DIVを使うほうが、本末転倒でしょう。
    • good
    • 0
この回答へのお礼

御回答ありがとうございます。

brについては、HTML4.01策定の段階で非推奨要素の候補に挙がっていたという話を耳にしたので、「おや」と思った次第です。

また、tableやpについては「文章の構造」と言われていながら行間などページのデザインに影響する機能も持ち合わせているため、「それならdiv+CSSと変わらないんじゃ?」という疑問が念頭にありました。

お礼日時:2006/04/12 09:06

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

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

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

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

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qwidthやheightの数値に単位(px)はつけない方が良いの?

自分はHTMLやCSSにおいて<img>や<td>に width="100px" とか、
div に { width: 70px } とか、ピクセルの単位を付けて作っています。
どこかの本が単位をつけると教えている……はずだったからです。

今日、HTMLチェックというサービスを行ったら
『不正な設定。数値か%指定にしてください』という様なことをいわれました。

ちなみに用いているDocument宣言は4.01 Transitionalです。幅・高さに
単位はまったく必要ないのでしょうか? 逆に単位を省略してはいけないタグはありますか。

Aベストアンサー

仕様書を確認してみましょう
属性索引からimg要素のwidth属性を調べてみると

>width = length [CN]
画像・オブジェクトの幅を上書きする。

という記述が見つかります
lengthからリンクを飛ぶと少し上に行った所にピクセルの説明があり

># ピクセル: (DTDでは%Pixels; と表記)の値は、スクリーンや紙などキャンバスに表示する際のピクセル数を表す整数である。

の後に重要な記述があります

>従って、「50」という値は50ピクセルを意味する。
ピクセルに関する規範的情報は、 [CSS1]を参照のこと。

で、

># 長さ: (DTDでは%Length; と表記)の値は、%Pixel;または水平・垂直方向で利用可能な空間に対するパーセンテージである。従って、「50%」という値は、可能な空間の半分を意味する。

つまり widthは「50」などの数字で指定するか「50%」ちいうパーセントで指定することが出来ます

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qワードとワードパッドの違いは何?

ワードとエクセルを並べてつかっています。
エクセルに写真やグラフや図形がたくさんありリソースメーターがよく赤くなります。
私の勝手な想像ですがワードパッドはワードの簡単な機能だけ使えるソフトで、ワードより軽く動く気がします。
エクセルと並べて使うのにワードパッドで間に合うのなら
ワードパッドを使ったほうがリソースに優しいと思うのですが?
詳しい方ワードとワードパッドの違いを教えてください。

Aベストアンサー

皆さんの解答の通りですが、ワードパッドの方が
軽くて使いやすので物書きの方など利用される方が
多いそうです。
またワードパッドで文章を兎に角入力して、変更・装飾はワードに貼り付けて行う方もいます。
また俗に言うテキストエディタとも言います。
有名どころで秀丸エディタは、軽くてワードパッドより多機能です。
文章を大量に入力される方には、便利です。
また変則的には、フォルダー内の内容を確認するためにファイル名に内容を入力し置いておく方もいます。この場合、容量は0kなので便利です。

参考URL:http://hide.maruo.co.jp/software/hidemaru.html

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の方も修正する方法でもよけ...続きを読む

QSELECTで1件のみ取得するには?

こんにちわ。
いまORACLE9iを使用している者です。

ACCESSでは
SELECT TOP 1 項目名 FROM テーブル名
ORDER BY 項目名;
で並べ替えたデータ群のうち,先頭の1件だけを
取ることができますが,
ORACLEでそのような機能(SQL)はあるでしょうか?
教えてください。
よろしくお願いします。

Aベストアンサー

order by と rownum を併用する場合は注意が必要です。

[tbl01]
cola | colb
------------
1000 | aaaa
1001 | bbbb

というデータがある場合、
select cola from tbl01 where rownum < 1 order by cola desc;
とすると、「1001」ではなく、「1000」が返されます。
これは、order by の前に rownum < 1 が適用されてしまうからです。

解決するには、
select aaa from (select cola aaa from tbl01 order by cola desc) where rownum = 1;
とすれば良いです。

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リンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい


人気Q&Aランキング