dポイントプレゼントキャンペーン実施中!

 htmlの勉強をしている超初心者です。宜しくお願いします。
 4点ほど意質問があります。

・ 送信、リセットとかのフォームがありますがこの間を空白で空ける ようにしたいのですが、空白を入れようとしてもうまく入りません。
  また、チェックボタン同士の間にも空白を設定したいのですがどの ようにしたら良いのでしょうか。
  テーブルを使えばよいのでしょうが、それ以外の方法で知りたいの です、宜しくお願いします。

・ チェックボックスで「隠しフィルド」と言うのがありますが、これ は具体的にどのようなときに使うのでしょうか。
  相手からデータを送信させると本に書いていましたが、どのよう  なデータかはサイトを作った人間が指定できるのでしょうか、
 指定しなかったときにはどのようなデータになるのでしょうか。

・ 文字をワード文書のように均等割付出来るのでしょうか。

・ 擬似クラスとはどういうものなのでしょうか。

以上宜しくお願いします。

A 回答 (8件)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Q3167212 テストケース1</title>
<style type="text/css">
#sampleA input{
margin:auto 5px;

}

#sampleB span{
margin:auto 5px;
background-color:red;
}

#sampleC dt{

background-color:red;
float:left;
margin:auto 2.5px;
}

#sampleC dd{
background-color:yellow;
float:left;
margin:auto 2.5px;
}

#clear{
clear:left;
}

#hide{
display:none;
}

#justify{
border: solid 1px blue; width: 20em; text-align: justify;
}

#spacing{
letter-spacing:10px;
}

</style>
</head>
<body>
<h1>テストケース</h1>
<h2>input要素関連</h2>
<p><input type="reset" value="リセット" /><input type="submit" value="送信" /></p>
<p id="sampleA"><input type="reset" value="リセット" /><input type="submit" value="送信" /></p>
<p id="sampleB">
<span class="group"><input type="checkbox" value="0" id="chk0"/><label for="chk0" >あいうえお</label></span>
<span class="group"><input type="checkbox" value="1" id="chk1"/><label for="chk1">かきくけこ</label></span>
</p>
<dl id="sampleC">
<dt><input type="checkbox" value="0" id="chkA1"/></dt>
<dd>あいうえお</dd>
<dt><input type="checkbox" value="0" id="chkA2"/></dt>
<dd class="last">かきくけこ</dd>
</dl>

<p id="clear">例:Googleのエンコード設定のクエリ(ieやoe)などはユーザーが入力するものではない。</p>
<p>いつも見えないはず→<input type="hidden" value="0" /></p>
<p>↓これだとスタイルシート無効にした時に見える</p>
<p>通常時見えないはず→<input type="input" value="0" id="hide"/></p>
<h2>均等割付</h2>
<!--
http://deegg.main.jp/ref/mozilla/naro/2005gecko_ …
あたりから拝借
-->

<p id="justify">
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</p>
<p id="spacing">あいうえお</p>
</body>
</html>

この回答への補足

himajin100000さん有難うございました。
何とかできました。
ところで再度の質問ですが、「表の自動伸縮」と言うのがありますが
、本などを読んでも良くわかりません。
これはWindowの範囲まで自動で横に伸びると言うことですか。
実際に試してみたのですが、何がどうなっていくのか良く理解出来ません。
再度宜しくお願い致します。

補足日時:2007/07/14 23:32
    • good
    • 0

> 隠しフィルド


例えばこういうフィールドを作ってHTMLのキーワードを検索するとja.wikipedia.orgのドメイン限定で検索が行われます。
固定されたパラメータの値を隠しフィールドで指定しているためです。
<form method="GET" action="http://www.google.com/search">
<input type="hidden" name="hl" value="ja">
<input type="hidden" name="domains" value="http://ja.wikipedia.org">
<input type="text" name="q" maxlength="2048" value="" style="width:100%;"><br>
<input type="submit" name="btnG" value="Google 検索">
<input type="hidden" id="site1" name="sitesearch" value="http://ja.wikipedia.org">
<input type="hidden" name="ie" value="Shift_JIS">
</form>

検索結果が表示されたURLを見ると早いかもしれません。
hl=jaやdomains=http%3A%2F%2Fja.wikipedia.orgなどパラメータで指定された値がURLに反映されていると分かります。
http://www.google.com/search?hl=ja&inlang=ja&dom …

特殊なパラメータを指定しなかった場合パラメータ未指定としての処理が実行されます。上記Googleの場合だったらドメイン指定を外すと通常検索が実行されますね。
    • good
    • 0

ここからは訳じゃなくて解説。



折り返し:

例えばMicrosoft Wordを用いて文章を打ち込んでいくことを考える。

通常改行したい時にはEnterキーまたはReturnキーを押すことによって明示的に改行しているが,
一行が長い文章で一行に入れられる文字数を超えてしまった時はEnterキーを押さなくても
次の行の最初から打ち続けられる。


これを「折り返し」と言う。
HTMLも同様に,p要素等に文章が一行よりも多い時,折り返しが行われる。

禁則処理:

例として日本語では
折り返しの結果、行頭に句読点が来てしまう時,その前の行に無理やり句読点を押し込む。

このような処理を「禁則処理」と言う。
当然この処理は英語等の言語にもある。

行内に文章を打ち込んでいった時,単語の途中で折り返しをするような局面があるかもしれないが,
この切り方にも切るべき切り方と切るべきでない切り方がある。切るべき切り方のとき
ソフトハイフンが補われるユーザーエージェントもある。

http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=1476
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …

この都合上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Q3167212 テストケース3</title>
<style type="text/css">
p{width:50px;}
</style>
</head>
<body>
<p>
quick brown fox jumps over the lazy dog.
quick brown fox jumps over the lazy dog.
quick brown fox jumps over the lazy dog.
</p>

</body>
</html>

とかやると
p要素内の各行の幅がバラバラになるわけだ。
(日本語は句読点等を除けば大抵どこの文字の前後でも折り返せる)
===========大幅脱線しているのでここは余裕のあるときに見ることを推奨=====
[脱線。読み飛ばすべし]これに関連して。
つい先日まで「ブロックレベル要素内でURLが折り返されない」という問題があったが、trunkという中・上級者向けのテストバージョンで修正された。
http://www.d-toybox.com/studio/weblog/show.php?m …
ここに載っているテスト用のURLや
http://www.asukaze.net/soft/url_breaker/
http://level.s69.xrea.com/mozilla/index.cgi?id=2 …
のテストケースのURLは折り返されていないため,その包含ブロックが大きく
横にスクロールしないと全部見られない状態だろう。

具体的な方法は自分で調べてもらうが、Firefoxを使っている場合は終了してプロファイルのバックアップを取った上で削除し(取らないとFirefoxのデータが壊れることがあります)
http://forums.mozillazine.org/viewtopic.php?t=56 …

The Official Win32 20070715 [Trunk] build is out.
のリンクを辿り
firefox-3.0a7pre.en-US.win32.zip
を回答し
中の青地球っぽいfirefox.exeを実行し、これで見ると折り返されていることがわかるはずです
==============================

ここで下の表はtable-layout:auto;であるからautomatic table layoutのアルゴリズムに従う。

>セルの中身がセルに入った時、その中身は何行にもわたる可能性があるが,
セルの外にあふれてはいけない。(訳以外の注:★後述)

これらの英単語は恐らく単語の途中で切れないのだろう。
折り返しの禁則に引っかからないように順に折り返していった時,
Englishを切らないようにMCWが決まり,

>'width'が指定されており(この値をWとする)

ここで言うWは属性で指定した10,つまり10pxだ。

MCWは10pxよりも大きいので

この最小セル幅はMCWである。

次の行の同じ列の中身は,これと全く一緒なので
最小セル幅は上と等しい。

>最小列幅は先ほど求めた最小セル幅のうち,もっとも大きいもの

この列全部セル幅一緒ですからEnglishの幅が最小列幅です

column要素(訳ミス.正しくは列要素,HTMLの範疇では同じ)はないので
この幅がこの列の幅となっている。当然これは10pxよりも大きいはずだ。
(automatic table layoutだと列幅が自動的に調整されているよね?)

以下同様に隣の列の幅も10pxだ。

>もし,'table'または'inline-table'である要素に'width'として
computed value(以下,Wとする)が設定されているならば

>レイアウトに用いられるプロパティの値は
>W
>または
>全ての列幅と罫線とセル間スペースの合計(以下、MINとする)
>のうち大きい方とする。

widthはCSSで20pxとなっているから

これに罫線の幅全てと,セル間スペースを合計したものMIN

20px

のうち大きい方なので

MINが表の幅となっている
(automatic table layoutだと列幅が自動的に調整されているよね?)
    • good
    • 0

すみません、passが何だかわかりませんでした。


==========
17.5.2.2 Automatic table layout

In this algorithm (which generally requires no more than two passes),
通常二つ以上のpassが要求されない、このアルゴリズムでは

the table's width is given by the width of its columns (and intervening borders).
表の幅は複数の列幅とその罫線によって決定される。

This algorithm reflects the behavior of several popular HTML user agents at the writing of this specification.
このアルゴリズムは,この仕様執筆時における複数の有名なHTMLユーザーエージェントの挙動を反映している。

UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.

ユーザーエージェントはtable-layoutがautoである時に必ずしもこのアルゴリズムを使うように実装されなければならないわけではなく,たとえ,その結果が異なる挙動となるとしても他のアルゴリズムを使うことが出来る。

Input to the automatic table layout must only include the width of the containing block and the content of, and any CSS properties set on, the table and any of its descendants.

automatic table layoutにおいて必要な入力(訳注:「パラメータ」って言う方が解りやすい?)は

包含ブロックの幅
表、およびその子要素に対して設定されるあらゆるプロパティ

のみを含んでいなければならない。

(訳注:include only the ~って方が個人的に解りやすい。
ウィンドウ幅とかが計算時に必要になったりしては駄目ですよ、ってことだと思う)

Note. This may be defined in more detail in CSS3.
この詳細についてはCSS3で定めされるだろう。

The remainder of this section is non-normative.
このセクションの残りは,規範となるものではない。

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

このアルゴリズムは,おそらく非効率である。
何故なら,ユーザーエージェントは,最終的なレイアウトを決定する前に,
その表の内容を全て読み込む必要があり,passが複数必要となることがあるからだ。

Column widths are determined as follows:
列幅は以下のように決定される。

1.Calculate the minimum content width (MCW) of each cell:
the formatted content may span any number of lines but may not overflow the cell box.


1.各セルの最小内容幅(MCW)を算出する:

(訳注:無茶苦茶意訳です)
セルの中身がセルに入った時、その中身は何行にもわたる可能性があるが,セルの外にあふれてはいけない。(訳以外の注:★後述)

If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width.
A value of 'auto' means that MCW is the minimum cell width.

もし,CSSや属性によって'width'が指定されており(この値をWとする),それが求めたMCWよりも大きければ,
最小セル幅はWとする。
widthにautoが指定されていた時は,最小セル幅はMCWである。


Also, calculate the "maximum" cell width of each cell:
formatting the content without breaking lines other than where explicit line breaks occur.

また、最大セル幅を計算する:
これは,その内容を明示的な改行(訳注:br要素等)以外の場所で折り返しせずに表示するのに必要な幅である。


2.For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by the cell with the largest minimum cell width (or the column 'width', whichever is larger).
各列について,他の列にまたがらない,その列のセルから最小列幅と最大列幅を算出する。

最小列幅は先ほど求めた最小セル幅のうち,もっとも大きいもの,
または
column要素に設定された'width'

のどちらか大きい方とする。

The maximum is that required by the cell with the largest maximum cell width (or the column 'width', whichever is larger).

最大列幅は,先ほど求めた最大セル幅のうち,もっとも大きいものである,
または
column要素に設定された'width'

のどちらか大きい方とする。

3.For each cell that spans more than one column,
複数列にまたがるセルについては

increase the minimum widths of the columns it spans so that together,
they are at least as wide as the cell.
最低でもそのまたがったセルの大きさと同じ幅になるように,
各列の最小列幅を広げる。

Do the same for the maximum widths.
同様のことを最大列幅に対しても行う。

If possible, widen all spanned columns by approximately the same amount.
可能ならば,全てのまたがられた列は大体同じ量(訳注:割合?)増えるようにする。

4.For each column group element with a 'width' other than 'auto',
increase the minimum widths of the columns it spans, so that together they are at least as wide as the column group's 'width'.
'auto'以外の'width'が設定された各列グループ要素について,
最低でも各列グループ要素の'width'と同じ幅が確保できるように各列の最小列幅を広げる。

This gives a maximum and minimum width for each column.
これにより,各列の最小列幅と最大列幅が求められる。

Column widths influence the final table width as follows:
列幅は最終的な表の幅に以下のように影響する。

1. If the 'table' or 'inline-table' element's 'width' property has a computed value (W) other than 'auto',

もし,'table'または'inline-table'である要素に'width'として
computed value(以下,Wとする)が設定されているならば

the property's value as used for layout is the greater of W and the minimum width required by all the columns plus cell spacing or borders (MIN).

レイアウトに用いられるプロパティの値は

W
または
全ての列幅と罫線とセル間スペースの合計(以下、MINとする)

のうち大きい方とする。

If W is greater than MIN, the extra width should be distributed over the columns.
WがMINよりも大きい時は,余った分の幅は各列に分配される。

2. If the 'table' or 'inline-table' element has 'width: auto',
the table width used for layout is the greater of the table's containing block width and MIN.

もし,'table'または'inline-table'である要素に'width'として
'auto'が設定されているならば,

表の幅は

表の包含ブロック
または
MIN

のうち大きい方とする。


However, if the maximum width required
by the columns plus cell spacing or borders (MAX) is less than that of the containing block, use MAX.

ただし、もしMAXがその包含ブロックの幅よりも小さい時は表の幅としてMAXを用いる。

A percentage value for a column width is relative to the table width.

列幅に指定されたパーセント値は表の幅に対する割合である。

If the table has 'width: auto',
'table'に'width:auto'が設定されている時,

a percentage represents a constraint on the column's width, which a UA should try to satisfy.

パーセント値はユーザーエージェントが列幅について満たそうとすべき制約の
一つだということを意味する。

(Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)

明らかに,これは常に満たせるわけではない。列幅が'110%'とか指定されていても,
そんな条件を満たすような表を作ることは出来ない。

Note. In this algorithm, rows (and row groups) and columns (and column groups) both constrain and are constrained
by the dimensions of the cells they contain.
Setting the width of a column may indirectly influence
the height of a row, and vice versa.
注意:このアルゴリズムでは列,列グループ,行,行グループは
含んでいるセルの寸法によって,互いに制約しあい,制約されあっている。

列の幅を指定することは間接的に,その行の高さを変更することになる。
逆もまた然りである。
    • good
    • 0

In the fixed table layout algorithm, the width of each column is determined as follows:


.fixed table layoutアルゴリズムでは,各列の幅は以下のような順番で決定される。

1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
'width'が'auto'以外の値を持つ列ついては,'width'の値をその幅とする。

2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column.
そうでなければ,最初の行で、かつ、'width'が'auto'でないセルの幅をその列の幅とする。
(★訳以外の注:#3ではプロパティではなく,width属性で定めてしまったが,
同じだと思ってほしい。
二つの列は内容の量を問わず10px,10pxという風に列幅が決定する。)

If the cell spans more than one column, the width is divided over the columns.
もし、セルが複数列にまたがっていたら、その幅は,またがっている列全体に対する幅となる。

3. Any remaining columns equally divide the remaining horizontal table space
(minus borders or cell spacing).
表の幅が今までの合計より多い分は,罫線とセル間のスペースが引かれ,それぞれ等しく振り分けられる

The width of the table is then the greater of the value of the 'width' property
for the table element and the sum of the column widths(plus cell spacing or borders).
表の幅は'width'プロパティで指定された幅か,もしくは,今まで合計してきた,列幅と罫線およびセル間スペースの合計か,
どちらか大きい方となる。(★訳以外の注:#3では列幅合計20px+罫線+セル間スペース > 20px)

If the table is wider than the columns, the extra space should be distributed over the columns.
もし,表の幅が列幅の合計よりも大きい場合,余った分はそれぞれの列に分配される。

If a subsequent row has more columns than the greater of the number determined by the table-column elements
and the number determined by the first row, then additional columns must not be rendered.
もし,二行目以降において,列要素または,最初の行の列数よりも多い列数が出現した場合は,その多い分はレンダリングされてはならない。

When using 'table-layout: fixed', authors should not omit columns from the first row.
'table-layout: fixed'を用いる時は,HTMLの記述者は,最初の行の列を省略すべきではない。

In this manner, the user agent can begin to lay out the table once the entire first row has been received.
この方法では,最初の行の情報をユーザーエージェントが受けた段階で,表のレンダリングを開始することが出来る。

Cells in subsequent rows do not affect column widths.
二行目以降のセルはセル幅には影響しない。

Any cell that has content that overflows uses the 'overflow' property to determine
whether to clip the overflow content.
セル内に収まらなかった内容をどうするかはについては'overflow'プロパティで決定される。(★訳注:overflowの規定値はvisible)
    • good
    • 0

一回答じゃ収まりません。


とりあえず読んで,どういう順番で決まっていくか、頭の中を整理してください

上の表と下の表の違いは、table-layoutプロパティがfixedかautoかという違いだ。
まずはCSS 2.1の仕様を確認することから始めよう。(解りやすさを目指したつもりなので意訳が入ってます)
===========
http://www.w3.org/TR/CSS21/tables.html#width-lay …
17.5.2 Table width algorithms: the 'table-layout' property
表の幅決定アルゴリズム:table-layoutプロパティ

CSS does not define an "optimal" layout for tables
CSS規格は表の"最適な"レイアウトは定めない

since, in many cases, what is optimal is a matter of taste.
何故なら多くの場合において、何が最適であるかは好みの問題だからだ。

CSS does define constraints that user agents must respect when laying out a table.
CSS規格は表のレイアウトを決定する時にユーザーエージェント(訳注:ブラウザ等)が従わなければならない制約を定めない

User agents may use any algorithm they wish to do so, and are free to prefer rendering speed over precision,
except when the "fixed layout algorithm" is selected.

ユーザーエージェントは,"fixed layout algorithm"が選択されない限り,
どんなアルゴリズムを選んでも良いし,正確さよりも速度を重視したレンダリングを好んでもよい。

(訳注:逆に言うと,fixed layout algorithmでは、そういった制約を受ける、ということ)

Note that this section overrides the rules that apply to calculating widths as described in section 10.3.
注意:このセクションは 10.3 に書かれたwidths(幅)を計算する時に用いられるルールを上書きする。

(訳注:つまり、通常は10.3に従うべきだが、この章に限っては改めて別な決まりが導入される)


In particular, if the margins of a table are set to '0' and the width to 'auto',
特に,margin:0;とwidth:auto;が指定された時であっても,

the table will not automatically size to fill its containing block.
表の幅は包含ブロック一杯まで自動的に広がったりしない。

However, once the calculated value of 'width' for the table is found
しかし,表のwidthの(この章に書かれた、あるいはUAの実装依存のアルゴリズムによる)計算値が一度でも見つかれば,

then the other parts of section 10.3 do apply.
その他の部分は10.3と同様である。

Therefore a table can be centered using left and right 'auto' margins, for instance.
なので、表は,例えば,左marginと右marginをautoにすることで、(水平位置で)中央に配置できる。

Future updates of CSS may introduce ways of making tables automatically fit their containing blocks.
CSSが将来更新された時,自動的に包含ブロックの大きさに合うように表を作成する方法が導入されるであろう。

'table-layout'
とりうる値: auto | fixed | inherit
初期値: auto
適用される要素: 'table' および 'inline-table' の要素
継承: しない
パーセント値は何に対する割合か: なし
適用されるメディア: visual
Computed Value: 定められた通り

The 'table-layout' property controls the algorithm used to lay out the table cells,
rows, and columns. Values have the following meaning:

table-layoutプロパティは表のセル,行,列のレイアウトに使われるアルゴリズムを決定する。
値はそれぞれ、以下の意味を持つ。


fixed
Use the fixed table layout algorithm
"fixed table layout"アルゴリズムを使う。
auto
Use any automatic table layout algorithm
その他のautomatic table layoutを使う。

The two algorithms are described below.
二つのアルゴリズムについては以下で説明される。

17.5.2.1 Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells;
この(高速な)アルゴリズムでは,表の水平方向のレイアウトはセルの内容に依存しない。

it only depends on the table's width, the width of the columns, and borders or cell spacing.

表の水平方向のレイアウトは表の幅,列の幅,および,罫線とセル間の空間のみによって決定される。

The table's width may be specified explicitly with the 'width' property.

表の幅は'width'プロパティによって明示的に指定されることがある。

A value of 'auto' (for both 'display: table' and 'display: inline-table') means
use the automatic table layout algorithm.

もし、widthプロパティが'auto'であれば,
'display: table' または'display: inline-table'の要素では,
automatic table layout アルゴリズムを使う。
(automatic table layoutと同じ処理をする)

However, if the table is a block-level table ('display: table') in normal flow,
しかし表がブロックレベルの表(つまりdisplay:table)であり通常フローならば,

a UA may (but does not have to) use the algorithm of 10.3.3 to compute a width and apply fixed table layout even if the specified width is 'auto'.

width:auto;が指定されていても,ユーザーエージェントは 10.3.3のアルゴリズムを用いて,widthを計算し,
fixed table layoutを適用してもよい。(しなくても良いが)

If a UA supports fixed table layout when 'width' is 'auto',

もし,ユーザーエージェントが'width'が'auto'である時に'fixed table layout'するなら

the following will create a table that is 4em narrower than its containing block:
table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }

以下のコードでは,包含ブロックよりも4emだけ幅が狭いtableが作成される。

table { table-layout: fixed;
margin-left: 2em;
margin-right: 2em }
    • good
    • 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Q3167212 テストケース3</title>
<style type="text/css">
table{
width:20px;
border-collapse:collapse;
border-style:solid;
margin:0;
padding:0;
}
tbody,tr,th,td{
border-style:solid;
margin:0;
padding:0;

}

#fixed{

table-layout:fixed;
}


#auto{
table-layout:auto;
}

#paragraph{
width:10px;
border-style:solid;
}
</style>
</head>
<body>
<table id="fixed">
<caption>あいうえ</caption>
<tbody>
<tr >
<td width="10">
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
<td width="10">
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
</tr>
<tr>
<td>
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
<td>
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
</tr>
</tbody>
</table>
<table id="auto">
<caption>かきくけ</caption>
<tbody>
<tr>
<td width="10">
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
<td width="10">
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
</tr>
<tr>
<td>
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
<td>
あいうえお、かきくけこさしすせそたちつてと、なにぬねの。はひふへほまみむめもやゆ
よらりるれろいうえお、かきくけこさしすせそたちつてとなにぬねのはひふへほ。まみむ
めもやゆよらりるれろあいうえおかきくけこさしすせそ漢字たちつてと一一なにぬねのは
ひふへほまみむめもEnglishやゆよThe quick brown fox jumps over the lazy dog.らり
るれろあいうえおかきくけこさしすせそたちつてとなにぬねの
</td>
</tr>
</tbody>
</table>
<p id="paragraph">ほげ</p>
<p>二つの表はレンダリングが異なる。解説は次の回答で。今日答えるかは不明。IE 6で見るのは避けて欲しい</p>
</body>
</html>
    • good
    • 0
この回答へのお礼

himajin100000さん、回答有難う御座います。

次の回答お待ちしています、よろしくお願い致します。

お礼日時:2007/07/15 14:16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Q3167212 テストケース3</title>
<style type="text/css">
p#sample1 .first{
font-family:serif;
font-size:xx-large;
text-transform:uppercase;
}
p#sample2:first-letter {
/*
first-letter擬似要素。sample1(コレはXMLではなく,HTML / XHTMLの制約の中で書こうとしたから
クラス使ってるがあくまで「擬似要素」。間違ってません)で書いたかのように動く
*/
font-family:serif;
font-size:xx-large;
text-transform:uppercase;
}

/*
hover擬似クラス。マウスカーソルを要素の上に持ってくると・・・
sample1のように書くことは出来ない。
*/


p#sample3:hover {
background-color:red;
}
</style>
</head>
<body>
<h1></h1>
<!-- IE 6 ではうまくいかなかったのでFirefoxやOperaやIE 7で試してみてくれ -->
<p id="sample1"><span class="first">q</span>uick brown fox jumps over the lazy dog.</p>
<p id="sample2">quick brown fox jumps over the lazy dog.</p>


<p id="sample3">quick brown fox jumps over the lazy dog.</p>
<p><a href="http://msugai.fc2web.com/web/CSS/pseudo.html " >5. 擬似クラスと擬似要素</a>も見ておくと良い</p>

</body>
</html>
    • good
    • 0

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