- ベストアンサー
CSSで任意の位置から縦罫線、横罫線を引きたい
お早う御座います、CSSの初心者です宜しくお願い致します。 CSSで任意の位置から縦罫線、横罫線をそれぞれ単独の線として引くのはどの様に書けば良いのですか。 以上宜しくお願い致します。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
テーブルレイアウトでしたら、好きな位置に文字を書く事ができます。(普通のテーブルですから当然ですが） 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">­</td> <td style="width:150px">­</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">­</td> <td style="width:150px">­</td> </tr> </table> <table cellpadding="0" cellspacing="0"> <tr> <td style="width:50px;height:50px">­</td> <td style="border:solid 2px #C0C0C0;border-bottom:none;width:200px">­</td> <td style="width:50px">­</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">­</td> <td style="border:solid 2px #C0C0C0;width:100px;text-align:center">課長</td> </tr> </table> </body> </html>
その他の回答 (2)
- k0021
- ベストアンサー率26% (32/120)
下記URLで質問しましたが 縦罫線、横罫線は、文字一覧の罫線を使用しています ただしフォント指定が必要です font:17px/16px serif; 行間隔と等幅ホントを指定して下さい 横罫線は、思うどうり表示」出来ないかもおもいますが ？？ IEのみ対応の場合は、記述どうりに表示しますがMACでは対応しません CSSの初心者の場合MACでの対応の場合は、画像ファイルの表示が無難と思います
- outbrave
- ベストアンサー率60% (231/380)
table でレイアウトを決めてから、border で表示させればよいかと。 例： <td style="border-bottom: solid 1px #FF9900">
お礼
outbraveさん有り難う御座います。 組織図みたいなものを描きたいのですが、罫線の左右、下側にも自由に文字は書けるのでしょうか。 宜しくお願いします。
お礼
outbraveさん、有り難う御座いました。 今後とも宜しくお願いします。