• ベストアンサー

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

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

  • htgo
  • お礼率33% (407/1224)
  • HTML
  • 回答数3
  • ありがとう数2

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

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

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

htgo
質問者

お礼

outbraveさん、有り難う御座いました。 今後とも宜しくお願いします。

その他の回答 (2)

  • k0021
  • ベストアンサー率26% (32/120)
回答No.3

下記URLで質問しましたが 縦罫線、横罫線は、文字一覧の罫線を使用しています ただしフォント指定が必要です font:17px/16px serif; 行間隔と等幅ホントを指定して下さい 横罫線は、思うどうり表示」出来ないかもおもいますが ?? IEのみ対応の場合は、記述どうりに表示しますがMACでは対応しません CSSの初心者の場合MACでの対応の場合は、画像ファイルの表示が無難と思います

参考URL:
http://oshiete1.goo.ne.jp/qa3419105.html
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

table でレイアウトを決めてから、border で表示させればよいかと。 例: <td style="border-bottom: solid 1px #FF9900">

htgo
質問者

お礼

outbraveさん有り難う御座います。 組織図みたいなものを描きたいのですが、罫線の左右、下側にも自由に文字は書けるのでしょうか。 宜しくお願いします。

関連するQ&A

  • PDFファイルに縦罫線・横罫線を引きたい。

    PDFファイルに縦罫線・横罫線を引きたい。 アクロバット・PROでPDFファイルに縦罫線・横罫線を引きたいのですが 100ページを超える処理をしなくてはいけないので、一括でする方法を教えていただきたいのです。 罫線の位置はすべて同じです。 アクロバットで処理できなければ、他のソフトがあるでしょうか?

  • パソコンのWordで便箋に縦書の罫線を、等間隔で引きたいのですが、方法をお教えください。

    パソコンのWordで縦の罫線を等間隔で十数本引きたいのですが?  1.「直線」ボタンをクリックして、一本ずつ引くのは、線を引く始点 を一致させるのと、間隔を等しくするのが難しく、なかなか旨くでき ません。一度に引く方法はないのでしょうか。  2.「表の挿入」を使うと一度に複数の罫線を引くことが出来るのです が、縦の罫線と罫線の間にあるカーソルの位置が中央ではなく、左寄 りになるため、文字の位置が中央になりません。縦書きの場合には左 右間の「中央寄せ」ができませんので、旨くゆきません。縦書きの罫 線で、文字を罫線間の中央に入れることの出来る便箋をWordで作るこ とは出来ないのでしょうか。     良い方法があったらご教示ください。  

  • CSSでセル内の文章の縦位置をTOPにしたい

    テーブルを作成しました。セルの数は随時増やしていく予定にしてます。 デフォルトではmiddleになっている縦方向の位置をCSSを使って一括でTOPに設定しておきたいのですが…タグに<tr valign="top">と設定すればよいのですが、行数が増える一方になるので、できるだけ内容をスッキリさせたいところです。CSSで設定できればいいなと思います。横位置はtr{text-align:center}で指定できるようですがtr{text-valign:middle}とやっても変化がなかったので(強引)… よい方法がありましたら教えて下さい。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • Wordで罫線が引きたい 罫線ツールバーで引こうとすると枠になってしまう

    Wordで縦とか横の罫線が引きたいのですが、罫線コマンドで引こうとすると枠になってしまう。図形描画ではなくて罫線コマンドの罫線を引くで、横とか縦の線を引くにはどうしたらいいのでしょうか。

  • 印刷すると縦の罫線がずれます

    エクセルで編集した文書の縦の罫線だけがまっすぐに印刷されません。 メンテナンスは全て終っていると思う〔自信が有りませんが〕のですが 。 プリンターはキャノンのPIXUS MP10です。 宜しくお願い致します。

  • テキストボックスに罫線を入れる

    wordのテキストボックスに表ではない罫線(縦及び横)を描きたいのですが。オートシェイプなどで追記すると確かに線は描けますが、テキストボックスを移動すると線は元の位置に取り残されてしまいます。横線はハイフンの位置(文字の中間高さ)を多用したい。

  • CSSでテーブル罫線の表示と表示を共存させる

    いつもありがとうございます。 現在、テーブルの中にさらにテーブルを作って、外側のテーブルの罫線は1ポイント、内側のテーブルの罫線を非表示にしたいのですがCSSでどのように表現すればいいですか? 作成にはホームページビルダー7を使っています。 当方、CSSは初心者です。

  • 縦に画像を並べるときのCSS

    CSS初心者です(文字のデザイン・レイアウトと画像への回り込みぐらいにしか使ったことがありません)。HP上に、縦にテキストを並べたメニューを作りました。そこに続けて画像を等間隔(バナーをいくつか下に並べていく感じ)に置いていこうと思います。この場合CSSの中身はどのように記述すればいいのでしょうか?あまりに簡単すぎるためかどんな本にも載っておらず、自分でそれっぽくやってみたのですが、自分のPC環境以外でどうなるのか恐ろしくて使う気になれません。どなたか正しい記述を教えていただけませんか?

    • ベストアンサー
    • CSS
  • [css]縦または横の長さを指定したい

    htmlとcssで、 任意の形の長方形のimgを、大きさの決まった正方形の中に最大限大きく表示したいです。 つまり、縦か横かの長い方のwidth(height)を一定の長さにしたいのですが、 そのような指定方法はあるでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • エクセル表の罫線(縦)が消せません

    他人が作った表で、列はA~J、行は45行ほどの至ってシンプルな表に 一本だけ縦罫線が入っており、何をやっても消せません。 問題の線はD列とE列の境に連続した状態(永遠に下まで続いています)で 入っており、データ(列)を全て選択した状態で罫線を「なし」にして みましたが頑なに残ります。 勿論、消しゴムには無反応です。 似た質問をされた方の回答を読み、"エクセルのオプション”も開いて みましたが、バージョンが違うため「罫線を消す」と、いった項目が無く、 解らず仕舞いです。 作成者が不明です。何年も前に作られ、以後毎年エクセル初心者が上書き している状態なので、送って下さる人に尋ねても「消せないから そのままになってます」と云う回答です。 表は受け取った後に多少のデータを追加して、別な方に送らなくては なりません。 私が新規で作り直すことも不可能ではありませんが、内容が細かいので 不要なリスクを避けたいことと、私が表を作り直しても送られてくる 元の表が変わるわけでは無いので、何とか受け取った表から罫線を削除 できないかと試行錯誤しています。 表はエクセル2003で作ったものではないかと思われます。 私のソフトはエクセル2007で、メール添付で受け取った表を一旦保存して、 開く時は[互換モード]で開きます。 解決策に見当の付く方がいらっしゃいましたら是非お知恵を拝借したく、 どうぞ宜しくお願い致します。

専門家に質問してみよう