• ベストアンサー

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; これにより外枠のみに罫線が引かれましたが、枠の中に縦線や横線 その他、点線等を引く場合にはどのような記述をすれば良いのでしょうか? よろしくお願いします。

  • pcckit
  • お礼率76% (472/621)
  • HTML
  • 回答数4
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答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の範囲の事ですので調整してもしなくてもそれはお好みでかまわないかと。 以上、あくまで一例です。実際の内容に適したマークアップを基準に方法を考えて下さい。

pcckit
質問者

お礼

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

その他の回答 (3)

  • k0021
  • ベストアンサー率26% (32/120)
回答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;}

noname#119957
noname#119957
回答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); 繰り返し処理は縦/横可能です。 位置指定も可能です。

  • Ehimeno
  • ベストアンサー率12% (21/168)
回答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

  • cssでのレイアウトの仕方

    次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト1</li> <li>リスト2</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい

    cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 [css] <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします

    • ベストアンサー
    • HTML
  • CSSの記述でのクラスの定義で

    CSSの記述の中で .yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } とクラス名が付いています p.yoko1 { padding : 0 0 5px 10px; border-bottom: 4px solid #00ffff; margin-top: 1em; margin-bottom: 2em; } こっちはタグ名に応じたクラスを定義していますが タグ名に応じたクラスを使用するメリットはなんなのでしょうか? 全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FireFoxでCSSのボーダーが反映されません

    FireFoxでのCSS表示について教えて下さい。 現在、IEでは見れるものがFireFoxで反映されておりません。 どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px;  width: 100%;  padding: 0px;  border: 0px;  height: auto;} #page { background-color: #ffffff;  width: 746px;  height: auto;  margin: 0px;  padding: 0px;  border-collapse:collapse;  border: 0px;  border-spacing:0px;} #page td {line-height: 120%;  font-size: 12px;  color: #000000;} #contents1 {width: 746px;  border-collapse:collapse;  border-spacing:0px;  margin:0px 0px 5px 0px;}  border: 1px solid #666633; #contents td {font-size: 12px;  line-height: 120%;  color: #000000;  padding-top: 2px;  padding-bottom: 2px;} #contents2 {width: 350px;  height: 45px;} #contents2 td { border: 1px solid #999999;  font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか? CSSについては独学なので、記述もほとんどDW頼りです。 参考サイトなどご存知でしたら教えて下さい。。。 以上、よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • Cssで

    次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し2</h2> <h2 class="sample1">見出し2</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }

  • スタイルシートテーブルの罫線を細くしたい

    例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか? <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>

  • CSSを消して表に色を付けたい!!!

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?

  • css 

    こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか? 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか? 何かお分かりの方がいましたら教えてください。 よろしくお願いします。

  • CSSで文法エラーが出ました

    CSS素人です、 CSS Validator検証結果で下記エラーが出ました、IE6・IE7・IE8・firefoxでは表示は崩れませんが 下記エラーを無くしたいのですがどなたかご指導いただけませんでしょうか? #mnu1 img  文法解析エラーが発生しました @vertical-align:text-bottom; #mnu1 img  Parse error - Unrecognized } .td01 文法解析エラーが発生しました @border-width : 1px 1px 1px 1px; 文法解析エラーが発生しました : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a CSS記述は以下の通りです ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); text-decoration : none; background-repeat : no-repeat; outline: none; display : block; width : 108px; height : 40px; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; margin-bottom : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px;  vertical-align:text-bottom; } .td01{ font-size : 13px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #dce6f4; padding-top : 2px; padding-bottom : 2px; padding-left : 2px;  border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a{ font-size : 13px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #c1cdde; padding-top : 2px; padding-bottom : 2px; padding-left : 2px;  border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} ※ #mnu1 img内の vertical-align:text-bottom;は 縦にメニューを並べているのですが各上下に隙間が入るので vertical-align:text-bottom;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。

  • cssの書き方について

    始めましてpcckitと申します。cssには全くの初心者ですがよろしくお願いします。メモ帳でcssで構成したホームページを作成しようと考えております。そこでまずは下記のように記述をしました。 body {background-color: #87ceed; text-align: center} div#border {border-style: solid; border-width: 2px; padding: 20px; background-color: #ffffff; width: 700px} 上記のようにしたところ、画面に枠が出来て、その枠の中に740×458 の画像を入れて確認をしたところ、枠からはみ出してしまいました。 やはりこれは、width: 700px}にしているからでしょうか? 上記の状態でIEでは正常に表示されるのですがFire foxで見ると やはり画像が枠からはみ出していたり、枠そのものが左に寄ったりしています。 また、枠の中に文字や画像を入れて中央ぞろえや、両端ぞろえなどしたいのですが、うまく行きません。ご指導の程よろしくお願いします。