cssで枠の中に複数の罫線を引く方法

質問

よろしくお願いします。
枠を作成するために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;

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

よろしくお願いします。

回答No.2

abril · ベストアンサー

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

これは多分、【質問番号：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の範囲の事ですので調整してもしなくてもそれはお好みでかまわないかと。

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

お礼

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

回答No.4

k0021

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

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

回答No.3

noname#119957

ＣＳＳでの話しなので、tableのことはさておいて・・
単一のＤＩＶタグの内部にＣＳＳで線をひく機能はありませんので、罫線を描いた背景画像用意して配置してください。
【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);
繰り返し処理は縦/横可能です。
位置指定も可能です。

回答No.1

Ehimeno

枠の中に線を引きたい場合は
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 破線