プロが教えるわが家の防犯対策術!

よろしくお願いします。
枠を作成するためにcssに以下の記述をしました。
【css】
border-top:3px solid #339900;
border-left:3px solid #339900;
border-right:3px solid #339900;
border-bottom:3px solid #339900;
padding: 0px;
background-color:#ffff00;

これにより外枠のみに罫線が引かれましたが、枠の中に縦線や横線
その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか?

よろしくお願いします。

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

A 回答 (4件)

> 枠の中に縦線や横線その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか?



これは多分、【質問番号:5110475】での2つ目の質問の続き(ボックスの内部を更に「日や田など」の形に分割をしたい)なのだと思いますが…
もしもその内容が本当に表組みに相応しいものであるならば、No.1様のお答えの通りtableでマークアップすれば簡単なのですが、「表」でなければ”内容に相応しい”マークアップ(つまりtableを使うべきではない)をした上で「日や田など」のレイアウトに見える様にCSSで調節しなければならないでしょう。

で、その場合のマークアップですが、これは以前の質問でも言及した通り「内容」によって相応しいものが違って来るので一概に「これ」という様には言えません。ただいずれの場合も言えるのは、外枠を引いたボックス(これを【A】とします)の内部に更にボックスを複数配置して、そのボックス毎に外枠(【A】の様に四辺ではなく隣接するボックスとの区切り線を表示したい方向にのみ)を引くか場合によってはラインの画像を作って背景画像として配置する、というのを組み合わせて【A】の内部が更に線で分割されている様に見せる、というやり方をしなければなりません。

以下は【A】を仮にボーダーの太さを含めたボックス全体の幅が500px・四辺のボーダーの幅が3px、のボックスと考えた場合のサンプルです。
また、ボックスモデルの計算方法は標準準拠モード(borderやpaddingの値はwidthの値に更に加算される)である場合です。
※くどい様ですが、内容に依って以下のマークアップは相応しいものに変えなければなりません。

「日」の様な上下2分割なら容易です。
■例1
【表示】
--------------------
│hoge1 │
│--------------- │
│hoge2 │
--------------------

【HTML】
<div id="hoge">
<p class="hoge1">hoge1</p>
<p>hoge2</p>
</div>

【CSS】
#hoge {
width: 494px;
border: 3px solid #390;
background: #ff0;
}
#hoge p {
margin: 0;
padding: 5px;
}
#hoge p.hoge1 {
border-bottom: 3px solid #390;
}

これで、hoge1とhoge2の間には【A】の外枠と同じ太さ3px・プレーンな形状・#390の色のボーダーが引かれますので、【A】の内部が上下に2分割されている様に表示されます。ボーダーの形状を点線にしたければ、
#hoge p.hoge1 {
border-bottom: 3px dotted #390;
}
とすればOKです。他の形状についてはNo.1様の解説を参考にして下さい。
なお、#hoge pで"padding: 5px;"としているのは、質問文を見ると外側のボックス【A】のpaddingが0になっている為、このままだと【A】の子要素は【A】の外枠との間に隙間がなくくっついて描画されてしまうからです。枠線を引いたボックスの内部の要素は某かの余白をとってレイアウトされているのが普通だと思いますので。

これに対し、「日」の90度回転したパターン(左右2分割)はちょっと工夫がいります。左右の分割はカラム組の形をとるのでケースバイケースで対応が違う為です。

■例2
【表示】
----------------------------
│hoge1│hoge2 │
----------------------------

【HTML】
<div id="hoge">
<p class="hoge1">hoge1</p>
<p class="hoge2">hoge2</p>
</div>

【CSS】
#hoge {
zoom: 100%;
width: 494px;
border: 3px solid #390;
background: #ff0;
}
#hoge:after {
height: 0;
visibility: hidden;
content: "";
display: block;
clear: both;
}
#hoge p {
width: 237px;
margin: 0:
padding: 5px;
}
#hoge p.hoge1 {
float: left;
}
#hoge p.hoge2 {
float: right;
}

この状態では、hoge1とhoge2が同じ幅で2カラムになっています。であれば、【例1】の時と同様の考え方でhoge1の右側もしくはhoge2の左側にボーダーを引けばいいじゃないか、となるのですが、hoge1とhoge2の内容によって「どちらのカラムの方が高さが大きくなるかわからない」場合は、片方だけにボーダーを引くと、ボーダーを引いていないカラムの方が長くなってしまうと、線が途中で切れた様に見える事になります。かといって、両方にボーダーを引いてしまうと短い方のカラムが終わる高さまでは線の太さが倍になり、そこから先は長い方のカラムの線だけが描画されるのでカラムの区切り線が1本には見えません。

この様に、2カラムのどちらかに線を引く/もしくは両方に引く、というのは、
・片方のカラムの方がもう一方より「確実に」高くなる場合(常に文章量にかなりの差があるなど)
・両方のカラム(ボックス)の高さが"height: 100px;"の様に固定値で決め打ちできる場合(どちらも画像データしか入らないなど)
という様な場合にのみ適切であると考えられます。

で、上記以外の場合に逃げ道的に使われるのが、内部のボックス(子要素)にボーダーを引くのではなく、外枠のボックス(親要素)に「区切り線の様に見える」背景画像を適用する、という方法です。【A】の真ん中の位置に縦線が引かれた様な画像を作り、【A】の背景画像(これを【A_bg】とします)として指定するわけです。
本件の場合であれば、【A】の背景画像が適用される範囲の幅は494pxですから、【A_bg】の作成は次の様な感じで。
(1)W3px×H適当のカンバスを用意する。
(2)【A】の外枠と同じ様にする為、カンバス全体を#390の色で塗りつぶす。
(3)gif形式、任意のファイル名で保存。

【A_bg】ができたら、#hogeのbackgroundプロパティを以下の様に変更。

#hoge {
(省略)
background: url(【A_bg】のパス) repeat-y 245px 0px #ff0;
}

ここで注意して頂きたいのは、"245px 0px"の値です。これは、background-positionの値になり、背景画像の描画開始位置がボックスの「左から245px、上から0px」にする、という意味です。で、左の開始位置がなぜこの値かというと、【A】の幅が494pxなのでその半分は297px、しかしボーダーに見せかける画像の幅が3pxあるので、その分がhoge1とhoge2に均等に割り振られる様にするには3pxの1/2の値を引いて295.5pxですが、px指定の場合小数点付きでは指定できないので245pxか246pxにしなければなりません。なので、お好みで"246px 0px"としてもかまいません。

細かいところまでこだわるなら、hoge1とhoge2のwidthと左右paddingの値も【A_bg】の幅と被る分を差し引いて調整しなければならない事になりますが、まあせいぜい1~2pxの範囲の事ですので調整してもしなくてもそれはお好みでかまわないかと。

以上、あくまで一例です。実際の内容に適したマークアップを基準に方法を考えて下さい。
    • good
    • 0
この回答へのお礼

abril様
いつもいつもご回答、ご指導頂きましてありがとう御座います。
ここまで、詳しく解説頂き初心者の私には、本当に勉強になります。
本当にありがとう御座いました。

お礼日時:2009/07/20 09:00

CSSでの話しでですが


セルの結合の横結合が有る場合。
IE・Firefox・Ssfari・Operaの格ブラザー別にCSSの変更が必要ですので。
セルの結合の場合は、tableで罫線を引くことを薦めます。
私の参考にしたHPもOperaも対応していませんでした。かつ縦結合は、全てtableで罫線を引いていましたが
注意 同じ場所に罫線の指定はしないで下さい

1行め最初のセル指定→.wm3 {float:left;border-style:solid;border-color:black;border-width:1px;}
1行め次のセル指定→.wa3 {float:left;border-style:solid solid solid none;border-color:black;border-width:1px;}
2行目以降最初のセル指定→.wd1 {float:left;border-bottom:solid black 1px;border-right:solid black 1px;border-left:solid black 1px;}
2行目以降のセル指定→.wc1 {float:left;border-bottom:solid black 1px;border-right:solid black 1px;}
    • good
    • 0

CSSでの話しなので、tableのことはさておいて・・


単一のDIVタグの内部にCSSで線をひく機能はありませんので、罫線を描いた背景画像用意して配置してください。
【css】
border-top:3px solid #339900;
border-left:3px solid #339900;
border-right:3px solid #339900;
border-bottom:3px solid #339900;
padding: 0px;
background: url(xxx.jpg);
繰り返し処理は縦/横可能です。
位置指定も可能です。
    • good
    • 0

枠の中に線を引きたい場合は


borderではなくTableを使用してください
例えばこんな感じです

<table>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
</thead>
<tbody>
<tr>
<td>本文1</td>
<td>本文2</td>
</tr>
</tbody>
</table>
こんな感じの物を無限に組み合わせてください

また線の種類を変更したい場合は以下です
ブラウザによっては違う場合があるかもしれません
none 線なし
hidden 線なし
solid 実線
double 二重の線
groove 谷型の線
ridge 山型の線
inset 凹型の線
outset 凸型の線
dotted 点線
dashed 破線
    • good
    • 0

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

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

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

QCSSで任意の位置から縦罫線、横罫線を引きたい

 お早う御座います、CSSの初心者です宜しくお願い致します。

 CSSで任意の位置から縦罫線、横罫線をそれぞれ単独の線として引くのはどの様に書けば良いのですか。
 以上宜しくお願い致します。

Aベストアンサー

テーブルレイアウトでしたら、好きな位置に文字を書く事ができます。(普通のテーブルですから当然ですが)

table の中に文字を書き、css で必要ない枠線を表示させない感じです。(実際は必要な枠線を、border で表示させます)

複雑な表になるようでしたら、ペイントソフトで作成して、画像ファイルを表示させるのがよいと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>

</head>

<body>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:solid 2px #C0C0C0;width:150px;height:50px">&shy;</td>
<td style="width:150px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border:solid 2px #C0C0C0;border-bottom:solid 2px #C0C0C0;width:300px;height:50px;text-align:center">部長</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:solid 2px #C0C0C0;width:150px;height:50px">&shy;</td>
<td style="width:150px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:50px;height:50px">&shy;</td>
<td style="border:solid 2px #C0C0C0;border-bottom:none;width:200px">&shy;</td>
<td style="width:50px">&shy;</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<td style="border:solid 2px #C0C0C0;width:100px;height:50px;text-align:center">課長</td>
<td style="width:100px">&shy;</td>
<td style="border:solid 2px #C0C0C0;width:100px;text-align:center">課長</td>
</tr>
</table>

</body>

</html>

テーブルレイアウトでしたら、好きな位置に文字を書く事ができます。(普通のテーブルですから当然ですが)

table の中に文字を書き、css で必要ない枠線を表示させない感じです。(実際は必要な枠線を、border で表示させます)

複雑な表になるようでしたら、ペイントソフトで作成して、画像ファイルを表示させるのがよいと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-T...続きを読む

QHPのレイアウトで縦線を入れるには?

下記URLのサイトのように、HPの外枠に縦線を入れたいのですが、入れ方がわかりません。

URL:http://www.netyasun.com/
(※上記URL内の「水色の背景」と「HP」の境目の青色の境界線(枠線)のことです)

初歩的な質問過ぎて大変申し訳ございませんが、調べてもわからなかったため質問させていただきました。

どなたかご教授願えれば幸いです。

Aベストアンサー

#1さんへの追加質問
>border-styleを使用して縦線を入れることはできたのですが、
 上記記載のURLサイトのように、「水色の背景」と「HP」
 の境目に縦線が入るのではなく、HPを開いたときにPC画面
 上の、一番右端と左端に縦線が入ってしまいます。

成功しています。
ただ、ブロックレベル要素のルールをご存知ないだけです。

つまり、
1.幅を指定しなければ、100%が初期値となるルール。
→だから、右端と左端になります。
2.ブロックレベルの高さを指定しないと中身に合わせて高さが変化するルール。
→中身がないと(実験しただけで中身を入れていない?)高さがないので、上に少しだけという状態になります。中身を増やしてみましょう。高さをheightで指定する方法もありますが、中身がその指定値を超えた時にデザインがおかしくなりますので、お勧めしません。


>縦線を入れるために「border-style」はbodyに適応している
 のですが、適応箇所が間違っていると思うのですが、どこに
 適応したらよいのか分かりません。
bodyにでもいいと思いますが、どこに適応したらいいのかは、htmlを見せてもらわないとわかりません。

とりあえずbodyに入れるとして作ってみると
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />
<title>test</title>
<style type="text/css">
html{
background: #D9E5FF;margin:0;/*青の背景色*/
}
body{
margin:0 auto;/*上下をぴったり、左右は真ん中*/
width:880px;/*bodyの幅の指定「ルール1への対応」*/
padding: 0 1em;/*罫線から中身までの空き*/
background: white;/*背景色*/
color: #555;/*文字の色*/
border: solid blue;/*罫の形と色*/
border-width: 0 1px;/*罫の幅、上下が0、左右が1px*/
}
body>*{
margin:0;/*bodyの直接の子要素のマージン。本当は望ましくないが、先頭に何が来るのか不明なので*。*/
}
</style>
</head>
<body>
<p>中身をいろいろ入れてください。縦に中身が広がると罫も延びるのがわかると思います。</p>
</body>
</html>

#1さんへの追加質問
>border-styleを使用して縦線を入れることはできたのですが、
 上記記載のURLサイトのように、「水色の背景」と「HP」
 の境目に縦線が入るのではなく、HPを開いたときにPC画面
 上の、一番右端と左端に縦線が入ってしまいます。

成功しています。
ただ、ブロックレベル要素のルールをご存知ないだけです。

つまり、
1.幅を指定しなければ、100%が初期値となるルール。
→だから、右端と左端になります。
2.ブロックレベルの高さを指定しないと中身に合わせて高さが変化するル...続きを読む

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q横並びdivで一部の初期高さがずれる理由について

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100px; height:33px;}
#test3{ width:100px; height:33px;}
#test4{ width:100px; height:33px;}
#test5{ width:250px; height:33px;}
#Form input{
margin:auto 0px;
font-size: 70%;
width: 150px;
}
#Form button{ font-size: 70%; width: 50px; }

[html]
<div id="hoge">
<div id = "head">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5">
<form id = "Form">
<input name="list"/>
<button>テスト</button>
</form>
</div>
</div>
</div>

この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。
また、divとdivの間に余計な隙間が作られてしまいます。
ここで分からないことは、
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?

等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100...続きを読む

Aベストアンサー

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lint

 lintの良いところは、理由と対策も示してくれる。それを読まなきゃダメです。芋づる式に色々な知識が見につきます。
 欠点は、文法上の誤りは指摘してくれるが、根本的なマークアップ自体はチェックしてくれない。例えば、
 <div><a href="/">トップ</a></div>
 <div><a href="/product">製品</a></div> 
 <div><a href="/manual">マニュアル</a></div>
はエラーにならない。「これはナビゲーションですし、並列な情報が並んでいるので順不同リストでマークアップするほうがよい」・・・なんては言ってくれないです。

>その分時間もかかるのでなんとかしてこういう誤りの法則のようなもの、をあらかじめ分かるようになっておきたい
 もっとも早いのは、仕様書を徹底的に読んでおくこと。すくなくとも全体の流れとどこを調べればよいか位は・・・。急がば回れ、変な「付け焼刃」で積み上げていくより、根本を理解してからのほうが圧倒的に上達は早いです。

>DIVで並べる想定の箇所がOL/LIに変わっておりますが、inline-block化してDIVを並べることそのものに問題があるということでしょうか?

★HTMLでこれが最も大事な--最重要なポイントなのです。
 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 2)『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 DIVは、「文書の構造を補完するため」であって、「デザインのため」じゃありません。
 ところが、あなたが参考にされた多くのサイトのように実際には「デザインのため」に使用されている例がとても多い。理解されてこなかった!!。そのために
 3)『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
  そして、「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」(--著者は他により適切な要素がないときの最後の最後の手段としてDIV要素を使用することを強く推奨する。)
  となります。

 よって
>DIVで並べる想定の箇所が
 はHTMLを作成する上で最も犯してはならない誤りなのです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 どのようにプレゼンテーションするかはスタイルシートに任せて、ここはナビゲーションリストだから、そのようにマークアップするべき。
 誤解されないように!!断じてきれいに横に並べるというデザインのために「<div>ではなく<li>を使っている」わけではありません。・・・結果はそうであっても・・・DIVでも可能です。

 デザインを考えずにとにかく徹底的に文書構造を示すようHTMLを記述するというのは、HTMLをワープロやDTP( http://ja.wikipedia.org/wiki/DTP )のひとつだと思って歩んでこられた方には、とてつもなく大きな壁だと思います。登山するのに道を誤って沢に下りてしまった---、元の道に戻るのは苦労します。
 しかし、私も含めて皆ここを乗り越えてきました。

 面白い例を紹介しておきましょう。Chrome以外のブラウザで!!(Chromeは代替スタイル扱えない)
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
 このページを表示させてブラウザの[表示]→[スタイル(シート)]へ進み、色々なスタイルを選択してみてください。HTMLにプレゼンテーション的な要素はまったくないために、自在にデザインできるのです。印刷プレビューやウィンドウ幅を伸縮させたり、フォントサイズをCtrl + +/-で変更しても良いでしょう。

★まず仕様書を通しで読んでみましょう。
 HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
 CSS 2.1仕様(日本語訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )


(解説)
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
 本来あるべきブロックがないために匿名ブロックが作られる。(HTMLの文法誤り)

2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
 ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )
 改行やタブは空白文字ですから、ここに空白文字がひとつあるように整形される。
 よって、
 div.header div.nav{position:absolute;top:0;width:100%;font-size:0;}/* li間の空白文字を0 */
  このフォントサイズを2pxにすれば2px空く

3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?
  上記が回答

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lin...続きを読む


人気Q&Aランキング