よろしくお願いします。
枠を作成するために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ベストアンサー
- 回答日時:
> 枠の中に縦線や横線その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか?
これは多分、【質問番号: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
- 回答日時:
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;}
No.3
- 回答日時:
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);
繰り返し処理は縦/横可能です。
位置指定も可能です。
No.1
- 回答日時:
枠の中に線を引きたい場合は
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 破線
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
【HTML&CSS】フッター下部の余...
-
widthやheightの数値に単位(px...
-
CSSを使ってスクロールバーつき...
-
CSS backgroundが反映されない件
-
画像リンクの下に文字を付けた...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
CSSだけで、テーブルにスクロー...
-
heaerとfooterに背景画像が難し...
-
CSS:animation開始位置の設定
-
cssでの幅の分割(固定・可変混...
-
CSSでborderの指定を解除する記...
-
<li>の黒い点を消したい。
-
Win IE5.5~6.0での余白に関す...
-
HTMLで文字が重なって表示されます
-
divタグ+CSSでのレイアウトで、...
-
4枚の画像を均等間隔で一列に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報