ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

aタグの中にdivタグを入れる場合に付いて質問です。

html5の仕様書を読むと、
http://www.w3.org/TR/html5/text-level-semantics. …
aタグはフローコンテンツということになっておりますが、

フローコンテンツの子孫要素にdivを使用することは(仕様書的に)許されていますか?
あわせて、↑の回答の根拠となる仕様書の部分(URLなど)を記載していただくと助かります。

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

A 回答 (9件)

#2,5,7 です。



---
(例題) A要素がB要素を内包できるか否かを確認したい
この場合、A要素の Content model を見る必要があります。

(ケース1)
1. A要素の Content model は Flow content
2. B要素の Categories は Flow content なので、A要素はB要素を子要素に出来る

実際はありませんが、仮に Flow content に Content model が定義されているとすればこうなります。

(ケース2)
1. Flow content の Content model は Flow content
2. A要素の Categories は Flow content なので Flow content を子要素に出来る
3. B要素の Categories は Flow content なので、A要素はB要素を子要素に出来る
---

(ケース2) がありえない理由がわかるでしょうか。

同じ Flow content でもdiv要素は「Content model: Flow content」ですが、p要素は「Content model: Phrasing content」です。
ある要素の Categories が Flow content だからといって一律に Flow content を子要素に出来るというロジックにはなりません。
http://www.whatwg.org/specs/web-apps/current-wor …
http://www.whatwg.org/specs/web-apps/current-wor …
    • good
    • 0
この回答へのお礼

たぶんわかったと思います。
html4のブロック要素、インライン要素の関係性、概念は捨て去るべきだと思いました。

今までは「html5って、所詮はhtml4からタグが増えたり減ったりしただけでしょ?」
という考えでした。

html4の延長にhtml5があるという理解は、少なくともコンテントモデルに関しては違うという理解で、概ね合っていると思いました。

html5が新しい概念を導入してきたことは残念でもあり、楽しみでもあると思いました。

今期強くお付き合いいただいたthink49さん、Tacosanさんに感謝いたします。
ありがとうございます。

お二方がいてここまでの回答を得られたものですので、
ベストアンサーはお二方に贈ります。
(システム上一つしか贈れないので、現場主義的だった方へ、贈っておきます。)

お礼日時:2011/04/13 23:13

えぇと....



なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。(今やっと気づいた。)
こういう根本的な部分は早く指摘して欲しいですね。

とのことですが, これは
・#1 で指摘するようでは遅すぎる. もっと前に指摘してほしかった
・常識的に考えて「コンテントモデル」と「Content Model」が同じものであるはずがない
のどちらの意味でしょうか? それともどちらでもない?

「仕様の見方」についていうと, まず「仕様」というものに慣れているかどうかからはじまります. 自分が「慣れていない」と思うなら, 「見方に疑問はないと思っても一応『どのように見るのか』を確認する」方がよいと思います. ここだと各要素に与えられている「Categories」とか「Contexts in which this element can be used」とかの意味です. そしてそれはだいたい仕様に書いてあるもので (というか書いてなければ仕様の欠陥と言っていい), 今の場合だと 3.2.4 Element definitions
http://www.w3.org/TR/html5/elements.html#element …
にあります. なぜ「そこを見ればいいと考えられるか」といえば, 今考えているのが「a要素とはどういうものか」, 言い換えれば「a要素の定義」だからです. そこで「要素の定義」, 英語では「element definition」のような文字列がどこかにあるはず... と推測することができます.

さて, 3.2.4 Element definitions によれば「子要素として何を使うことができるかは Content model に書いてある」とわかります. a要素では
Transparent, but there must be no interactive content descendant.
と書かれています. これでわかればいいけど「transparent」がよくわからんしリンクもはってあるのでそこをたどれば 3.2.5.2 Transparent content models
http://www.w3.org/TR/html5/content-models.html#t …
にいきつきます. ここには例もあるので, それと突き合せて考えれば結論は難しくないでしょう.

ついでにいうと a要素の categories が
Flow content.
When the element only contains phrasing content: phrasing content.
Interactive content.
となっているのは, 「a要素は
・flow content であり,
・(the element = a要素が phrasing content のみを含むときには) phrasing content であり,
・interactive content である」
と読む必要があります. 2つ目は「transparent content models」との関係で入っています.
    • good
    • 0
この回答へのお礼

追い打ちに強烈な解説をありがとうございます。これ、お金取れるレベルですね。
ありがたや~。

はっきりって英語が沢山で眠くなるのですが少し読みました。
http://www.w3.org/TR/html5/content-models.html#t …
--------------------------
The content model of a transparent element is derived from the content model of its parent element
--------------------------

「transparent element」
↑日本人的にはふざけた名前ですよ。。これ専門用語ってやつですか。
この定義を見て初めて理解できますね。

--------------------------
>なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。(今やっと気
>づいた。)
>こういう根本的な部分は早く指摘して欲しいですね。
↑これは一人ごとみたいなものです。愚痴です。

--------------------------
仕様書の読み方。結構すんなり受け取れました。
「読み方」超大事ですね。
私が最初の質問してる時点では、ここまで深い仕組みだと検討をつけてませんでしたから。

--------------------------
http://www.w3.org/TR/html5/elements.html#element …
あー。↑これはとてもいいですね。
わかりやすい。(日本語でここを引用して頂いたから理解できてるわけですが。)



当初の質問内容を大幅に超えた解説にとても感謝します。
ご縁があればご飯奢らせてください。(うーむ。御大がどこのポジションに所属してるのか興味ありです。)

お礼日時:2011/04/13 23:58

To: #6 (Tacosan) さん



ご指摘に感謝します。
#5 の Transparent ですが、「a要素の Content model を継承する」と解釈してしまいました。
つまり、#5 は完全に間違っていました。申し訳ありません…。
http://www.whatwg.org/specs/web-apps/current-wor …
http://www.html5.jp/tag/models/index.html#transp …

---
To: reggaepuncさん

今更ですが、一つだけ気になったので補足を。

> フローコンテンツの子孫要素にdivを使用することは(仕様書的に)許されていますか?
フローコンテンツの Content model というのはありませんから、この質問自体が成り立ちません。
Content model は各要素毎に独立して定義されています。
    • good
    • 0
この回答へのお礼

ご指摘ありがとうございます。

>> フローコンテンツの子孫要素にdivを使用することは(仕様書的に)許されていますか?
>フローコンテンツの Content model というのはありませんから、この質問自体が成り立ちま
>せん。
>Content model は各要素毎に独立して定義されています。

うーむ。。。何をおっしゃってるのかさっぱり。
私はここまで指摘されても理解出来ないレベルのようです。。
大体網羅するのに1年は吹っ飛びそうです。私のレベルだと。

お礼日時:2011/04/13 01:53

ホラーでもなんでもありません. 端的にいえば「#5 は何かを盛大に勘違いしているだけ」です. ただしどうしてそんな風に勘違いできるかは全く不明.



a の Content Model は
Transparent, but there must be no interactive content descendant.
とあります. but 以下はさておいて, この transparent は
http://www.w3.org/TR/html5/content-models.html#t …
にあるように「親要素の content model を継承する」という意味です. 総合すると
・a の親要素の content model が flow content なら a 自身の content model も flow content,
・a の親要素の content model が phrasing content なら a 自身の content model も phrasing content
です. そして, div 要素の category は flow content であって phrasing content ではありません.

いくらなんでもここまでくれば #1 で
「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」
と書いたこともわかるはず. 例えば
<div><a ...><div ...>...</div></a></div>
は OK だが
<p><a ...><div ...>...</div></a></p>
はアウト (自分で考えてみてください).

余談だけど, 実は HTML 4.0 においても「そこだけ見ても何を入れることができるのかわからない」要素が存在します. 気付いてない?
    • good
    • 0
この回答へのお礼

すばらしい!200点満点です。やればできるということを証明してしまいましたね!
非常に建設的な回答をありがとう。HTML5の日本の歴史を数ヶ月、、いや数年早めたと感じます。
-------------------------------------------
<div><a ...><div ...>...</div></a></div>
は OK だが
<p><a ...><div ...>...</div></a></p>
はアウト (自分で考えてみてください).
-------------------------------------------
わかりやすすぎる。。畏敬の念すら覚えます。
きっと仕事の出来る方だとお見受けしました。
数々のご無礼をお許しください。
丁稚奉公したいくらいです。

*******************************************

なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。(今やっと気づいた。)
こういう根本的な部分は早く指摘して欲しいですね。
(自分が平均よりも馬鹿になったような気分。)

ついでに仕様書の見方も伝授していただきたいですねぇ。
頭がよいひとになれそうだから。

お礼日時:2011/04/13 01:39

#2 です。

訂正。

× a要素の内容モデルは Flow content ですから、a要素はdiv要素 (Flow content) を子孫に持つことが可能です。
○ a要素の内容モデルは "Transparent, but there must be no interactive content descendant." ですから、a要素は interactive content を除く Flow content を子に持つことが可能です。
    • good
    • 0
この回答へのお礼

やっと確信もてました。

aタグはdivタグを子供に持てる。で決まりだと思います。

あとは、
No.1さんが、

「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」

と発言している意味が解決すれば万事解決するはず。。。
これってつまり、aタグの中にdivタグが入るケースと入らないケースがある。
という意味だと思うのですが、これが本当だとしたらホラーですよ。

お礼日時:2011/04/12 23:55

はて, 第三者が「何を」理解できない, と思われているのですか?


それは, あらゆる「第三者」が理解しなければならないものなのですか?

この回答への補足

すみません。理解しにくかったですね。

>調べればわかる
↑というのは仕様書のどこに書いてあるのかを、
説明して下さいという意味です。

あなたにはわかることが、
私にはわからないから質問させて頂いているのです。

最初から書けばよかったのですが、私は、実は英語を読解できません。
日本の一般レベルの義務教育しかうけていないのです。

http://www.w3.org/TR/html5/text-level-semantics. …

上記URLに

「4.6 Text-level semantics」
の項目があります。そして、

「4.6.1 The a element」
と続き、aタグの説明があるように私には見えます。

Categoriesの項目には、

Flow content.
When the element only contains phrasing content: phrasing content.
Interactive content.

とありますが、この部分を訳すと、the element(aタグのこと?)はphrasing content.
Interactive content.だけを含みます。

と書いてあるように見えます。
そして、phrasing content.とは何かと言うと、

http://www.w3.org/TR/html5/content-models.html#p …
↑(こちらを参照すると)phrasing contentにはdivタグは含まれていないことがわかります。

さらに、
http://www.w3.org/TR/html5/content-models.html#i …
↑(こちらを参照すると)Interactive contentにはdivタグが含まれていないことがわかります。

つまり、私の解釈が正しいことを前提に進めると、
aタグ内にはdivタグを含むことは出来ないという結論になります。

--------------------------
ここまで思考したあとに、No1さんの回答にある、

--------------------
「当該要素がフローコンテントなのかフレージングコンテントなのか (はたまた別の何かなのか)」は考えてもしょうがないのでは?
--------------------
という1文の意味がわからなくなります。

つまり
--------------------
aタグがフローコンテントなのかフレージングコンテントなのかを考えてもしょうがない。
--------------------
と言ってると思いますが、ここで新たな疑問が生まれます。

「では、何を考えればよいのか?」

******************************************
No1さんは下記のようにも言いました。

--------------------
「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」であることもわかるはず.
--------------------

↑この文を見て、私が思ったことは、

aタグの中にdivタグが入るケースと入らないケースがある。
という意味だと思っています。

******************************************

さて、新たな疑問は残ったままです。
---
・個人的に得た回答は「aタグの中にdivタグは含むことは出来ない。」
・No3さんは「入るケースと入らないケースがある。」

回答が食い違ったままです。
さぁ正解はどちらでしょうか。

---
No3さんは調べて回答を得たみたいですが、
私は調べてみて回答を得ましたが、
No3さんと回答が違うようです。

---
No3さんは「調べればわかる」と言っていますが、
それはNo3さんは調べてわかったが、私は調べてもわからなかった。(回答は得たがNo3さんの答えと違う!)

---
調べたのにわからないんですけど、どういうことでしょうか。何か隠してませんか?
情報弱者をイジメてあそんでるだけなんじゃないですか?

補足日時:2011/04/12 23:21
    • good
    • 0

a のコンテントモデルとして何が書かれているのか, そしてそれが何を意味するのかはあなた自身で調べることができるはずですね.



そして, 調べれば「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」であることもわかるはず.

この回答への補足

調べればわかることを証明して欲しいですね。

>~できるはずですね.
では第三者は理解できないと思いませんか?

補足日時:2011/04/12 00:53
    • good
    • 0

a要素の内容モデルは Flow content ですから、a要素はdiv要素 (Flow content) を子孫に持つことが可能です。


http://www.w3.org/TR/html5/text-level-semantics. …
http://www.w3.org/TR/html5/grouping-content.html …
    • good
    • 0

「フローコンテンツの子孫要素にdivを使用することは(仕様書的に)許されていますか?」という質問そのものが無意味だと思う.



「子要素として何を使えるか」ということについてはコンテントモデルを見る必要があるはず. 「当該要素がフローコンテントなのかフレージングコンテントなのか (はたまた別の何かなのか)」は考えてもしょうがないのでは?

参考URL:http://www.w3.org/TR/html5/content-models.html

この回答への補足

なるほど。

では、html5の場合は、aタグの中にdivタグを入れることは許可されていますか?

補足日時:2011/04/11 00:41
    • good
    • 0

この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を含めてはダメ?

テーブルタグの中に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の仕様でそう決まっているからです。

Qliタグの中に

タグやら

を入れるのはあり?

それともなしでしょうか?
たとえば、作品実績みたいなのを羅列するとき

「画像」
「タイトル」
「簡単な説明」

を乗せたいときはどうしますか?
<ul>
<li>
<p>画像</p>
<dl>
<dt>タイトル</dt>
<dd>説明</dd>
</dl>
</li>
</ul>

こんな感じを考えたのですが・・・
<li>(作品)ごとにボーダーボトムで区切りたいかなと考えております。

<li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか?


</ul>

Aベストアンサー

#1 ORUKA1951です。
#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
 ディスプレイの幅が狭いときもtableのように、はみ出ません

 このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。
OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。
DL definition list 定義リストでも良いかな?
・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検索エンジン最適化からも良いでしょう。
しかし、「(作品)ごとにボーダーボトムで区切りたいかな」という条件が一つありますね。
だとすると、
【注意】
 ★分かりやすくするため全角スペースでインデントされています。
  利用するときはタブに変換すること
 ★これは、私のページ一部を抜粋したもの。画像は200px×150px
 ★基本的にCSSのためだけのclass,id,divは無いのでHTMLはシンプルです。
 ★セレクタの使い方は調べること。
 ★これはolですがulでもよい。
 ★本来は、
 <div id="photoList">
  <ol>
   <li>本体
    <ul>
     <li><img src="./photo/R0011583.jpg" width="200" height="150"
        alt="ディスプレイを開く"></li>
     <li>本体を正面から撮影したところ、パネルの下がカバー</li>
    </ul>
   </li>
とマークアップしたほうがスマートでしょう。


______________サンプルソース。
<!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>
<!--
  @media screen{
   div#photoList{
    display: block;
    border: solid green 1px;
    margin: 1em 10% 1em 10%;
    background-color: rgb(200,200,200);
    padding:0px;
   }
   div#photoList > ol{
    margin: 0px;
    padding: 0px;
   }
   div#photoList > ol>li{
    display:block;
    width: 210px;
    float:left;
    border-style: solid;
    border-color: black gray gray black;
    border-width: 1px 4px 4px 1px;
    padding: 5px;
    height: 240px;
    margin: 5px;
    background-color: white;
   }
   div#photoList > ol>li dl{
    margin:0px;
   }
   div#photoList > ol>li dl dt{
    padding: 5px 10px;
   }
   div#photoList > ol>li dl>dd{
    margin-left: 0px;
    text-align: center;
   }
   div#photoList > ol>li dl dd+dd{
    margin-left: 0px;
    text-indent: 1em;
    font-size: 0.8em;
    line-height: 1.5em;
    text-align: left;
   }
   div#photoList > hr{
    clear: both;
    margin: 0px;
    visibility: hidden;
   }
  }
-->
 </style>
</head>
<body>
 <h1>ノートパソコンの分解</h1>
 <h2>ディスプレイの分解</h2>
 <div id="photoList">
  <ol>
   <li>
    <dl>
     <dt>本体</dt>
     <dd><img src="./photo/R0011583.jpg" width="200" height="150"
         alt="ディスプレイを開く"></dd>
     <dd>本体を正面から撮影したところ、パネルの下がカバー</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>ビスの位置</dt>
     <dd><img src="./photo/R0011587.jpg" width="200" height="150"
         alt="カバーを外す"></dd>
     <dd>電源スイッチカバーを外すとビスがでてくる。</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>パネルを開く</dt>
     <dd><img src="./photo/R0011590.jpg" width="200" height="150
         alt="パネルを180度開く"></dd>
     <dd>ヒンジに負荷がかからないようにパネルを一杯に開く</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>パネルを裏返しに</dt>
     <dd><img src="./photo/R0011597.jpg" width="200" height="150"
         alt="パネルを1裏返す"></dd>
     <dd>取り外したパネルを裏返しにする。</dd>
    </dl>
   </li>
  </ol>
  <hr>
 </div>
</body>
</html>

#1 ORUKA1951です。
#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
 ディスプレイの幅が狭いときもtableのように、はみ出ません

 このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います...続きを読む

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qtableにul,または,olを入れられますか?

<table>
 <tbody>
  <th>くだもの</th>
   <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
   …etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか?

Aベストアンサー

きちんとネストされていれば構いません。
ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
 <thead>
  <tr><th>くだもの</th></tr>
 </thead>
 <tbody>
   <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
   :
   :
 </tbody>
</table>

Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ...続きを読む

Aベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか?

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もしくは読み上げ)されることになります。
 その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
 あるいは、alt="本人の写真"
 と画像が表示されない人も画像から得られるはずの情報をいれておく。

 になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
 これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

 <p class="figure main">
  <img src="" width="" height="" alt="麓から見た紅葉の城山">
 </p>
 <p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
 <p class="figure sub">
  <img src="" width="" height="" alt="玄関で見送る妻">
 </p>
 <p>
  妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
 </p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もし...続きを読む

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Q【CSS】floatで左右に並べた

CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、この2つのblockレベル要素は高さが違えば下部が不ぞろいになります。
これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか?
text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

Aベストアンサー

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate05.htm
(私が書いた4つ目の方法は、このサイトのパクリです)

CSSだけで段組を・・・ というのは、ちょっとした事でレイアウトが崩れてしまうという、
難しい問題がありますね。
私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての
解決方法があるのかも知れません。

参考リンク
http://css.uka-p.com/
http://desperadoes.biz/style/dan/index.php
http://msugai.fc2web.com/web/CSS/colup.html

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate0...続きを読む


人気Q&Aランキング