HTMLでの枠線の追加方法
- HTMLを使用して会社の結果表示を印刷しているが、全体の枠線がなくまとまりが悪い。
- 要望は20cmと28cmぐらいの枠線を追加したい。
- HTMLの中にある各項目には枠線があるが、全体の枠線がない。どのような記述が必要かわからない。
- ベストアンサー
昨日も質問したのですが、HTMLでの枠線について
昨日も質問したのですが、現在、会社で仕様しているソフトの結果表示がHTMLを使用しています。それを印刷しているのですが、枠線がない為、まとまりが悪いのです。僕はHTMLなどプログラムは全くわかりません(>_<)どうかお助け下さい。 <!-- saved from url=(0022)http://internet.e-mail --> <!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//DE"--> <html> <head> <!-- <link rel=stylesheet type="text/css" href="wselfhtm.css"> --> <style type="text/css"> @page {size:21.0cm 29.7cm; ;margin-top:0.0cm;margin-bottom:1.0cm;/ margin-left:0.0cm;margin-right:0.0cm;marks:cross;} </style> <script language="JavaScript"> </script> </head> <body bgcolor = #C5C5D2> <spacer type=vertical size=10> <HR COLOR="#0000FF"> <h3 align=center><U>作業内容</U></h3> <HR COLOR="#666666"> <br clear=all> <table border=1 cellspacing=1 > <tr align=center> * * といった感じで中にある各項目には枠線がありますが、全体の枠線がないのです。僕は、20cmと28cmぐらいの枠線を入れたいのですが、どこにどのような記述が必要でしょうか？素人で申し訳ありませんがよろしくお願い致します。
- satoshi777
- お礼率43% (95/216)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
</style>の直前に @media print { body { border:solid 1pt black; } } を追加。 （ptは線の太さ blackは線の色） 枠線と中身の間に余白が欲しければ border:solid 1pt black; ↓ border:solid 1pt black;padding:0.5cm; ただし、余白を追加すると、中身のレイアウトが変化する可能性があります。（余白の分だけ中身の分が小さくなるため。）
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
補足 先ほどの修正を加えても画面で表示した時にはなにも変わません。 印刷した時だけ枠線がつきます。
- gee87
- ベストアンサー率41% (7/17)
＞中にある各項目には枠線がありますが かろうじて一個テーブルの一部表記が見えるだけ。サンプルが意味をなしてないです。 これではイマイチ何をしたいのか掴みきれません。 ここで見える範囲で言うなら、「作業内容」という言葉はテーブルから外れてますが、これら全てを枠で囲みたいということですか？ それなら下のようにするだけ。 <table><tr><td> （ここは囲みたい範囲） </tr></td></table> これでさらにレイアウトに要望があるなら、HTMLちょっと勉強した方が早いですよ。 その程度ならすぐわかります。 今の質問状況ではまともなRESはつきにくいと思います。
- mendokusa
- ベストアンサー率13% (359/2726)
枠を1個新たに作って、その中に全部入れればいいのでは。
関連するQ&A
- 何度もすみませんHTMLでの枠線についてなんですが・・・
先ほどの皆様方の回答のおかげで、枠線が出ました。しかし、違う問題も出ました(>_<) <!-- saved from url=(0022)http://internet.e-mail --> <!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//DE"--> <html> <head> <!-- <link rel=stylesheet type="text/css" href="wselfhtm.css"> --> <style type="text/css"> @page {size:21.0cm 29.7cm; ;margin-top:0.0cm;margin-bottom:1.0cm;/ margin-left:0.0cm;margin-right:0.0cm;marks:cross;} @media print { body {border:solid 0.5pt black;padding:0.5cm} } </style> この @media print { body {border:solid 0.5pt black;padding:0.5cm} } を追加したことで、枠線が現れたのですが(ありがとうございました)、2ページにわたる場合に1枚目は下の線がなく、2ページ目は上の線がありません。これを、ページごとに枠線を出すことは可能でしょうか？先ほども言われたのですが、僕は素人すぎて、用語など必要箇所などもわかりません。必要な情報など載っていなくてわかりにくいと思いますが、よろしくお願いします。
- ベストアンサー
- HTML
- HTMLで枠線を指定したいのですが
全くHTMLに関してはわからないのですが、 あるソフトの結果印刷みたいなのがHTMLなんです。 それを印刷して結果を出しているのですが、 枠線がないのでまとまりが悪いのです。 @page {size:21.0cm 29.7cm; ;margin-top:0.0cm;margin-bottom:1.0cm;/ margin left:0.0cm;marginright:0.0cm;marks:cross;} </style> <script language="JavaScript"> というような記述があります。これはA4の指定でしょうか？ ここに何らかの記述をすると、20.0と28.0ぐらいの枠線が出来るのでしょうか？ どうか、こんな素人の意味もよくわからないような質問ですが、助けて下さい。
- 締切済み
- HTML
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- HTMLの効力が発動しない！
ぼくはホームページビルダー７でホームページを作っているのですが、サイトをよりよくするために、最近、ＨＴＭＬをいじるようになりました。しかし、全体に効力を発動するやつがなぜか１つだけ発動しません。誰かこの悩みを解決してください！ ＜僕を悩ませているＨＴＭＬ＞ (1) <STYLE type="text/css"> A:link {color:#006600;} A:visited {color:#003366;} </STYLE> (2)<STYLE type="text/css"> <!-- A {text-decoration:none;} --> </STYLE> ※どちらも、「記入する場所は、<HEAD>～</HEAD>の間に記入してください。」と書かれてありました。
- 締切済み
- HTML
- HTMLのブラウザでの表示
メモ帳でHTMLを書き、ブラウザで表示したとき、文字が表示できるとき（XX．html）とできないとき（XX01．html）があります。比較した添付ファイルがありますが、どこに問題があるのでしょうか。教えてください。 プログラムは下記のようになっています。 <HTML> <HEAD> <TITLE>STAY</TITLE> <STYLE type="text/css"> <!-- BODY{ color:white; background-color:black; } H1{ color:red; } --> </STYLE> </HEAD> <BODY> <CENTER> <H1>STAY</H1> <H2>-〇◎の紹介ページ-<?/H2> <HR> ようこそ、〇◎へ </CENTER> </BODY> </HTML>
- ベストアンサー
- その他(ソフトウェア)
- HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？ 教えてください。 よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- body要素
body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。 どこが違うのでしょうか？ ご教授ください。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css"> <!-- .body { text-align:center; margin-right:auto; margin-left:auto; bgcolor:red; } .table_test { width:700px; border-style:solid; border-color:blue; border-width:1px; margin-right:auto; margin-left:auto; //--> </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- プリント設定をPHP、JAVA、jQuerなどで
Ａ４サイズで帳票を作り、htmlで保存しました。（下記にサンプルとソースを掲載） これを余白やサイズをそのままでプリントアウトしたいと思います。 この場合、ブラウザ上のプリント設定で、「縮小して全体を印刷する」のチェックをはずしたり、余白を0にしたりしなければなりません。 この設定を、プログラムで設定できないでしょうか。 ブラウザ上で設定しなくても自動的にＡ４サイズぴったりにプリントできないでしょうか。 CSS、PHP、JAVA、jQueryなどで、そういう方法がありましたら、ご教授いただきたいたいと思います。 何卒よろしくお願いします。 ※サンプルでは、余白を四方2cmずつとっています。 ★サンプル http://pips.chu.jp/0/a4/index.html ★上記のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>印刷範囲の指定</title> <style type="text/css"> <!-- #print{ width : 17cm; height : 25.7cm; float : left; position : absolute; background-color : white; border-width : 1px;border-style : solid;border-color : blue; margin-top : 2cm; margin-left : 2cm; right : 0px; left : 0px; } @media print{ #print{ width : 17cm; height : 25.7cm; float : left; } } --> h1{ font-size : 15pt; font-weight : normal; text-align : center; } #table{ margin-top : 1cm; margin-left : 1cm; margin-right : 1cm; margin-bottom : 1cm;border-width : 1px;border-style : solid; width : 15cm; height : 22cm; text-align : center; } --> </style> </head> <body bgcolor="#fff1e6"> <div id="print"> <h1>帳票をＡ４サイズで出力したい</h1> <table id="table"> <tbody> <tr> <td>帳票</td> </tr> </tbody> </table> </div> </body> </html>
- ベストアンサー
- PHP
- 枠線が表示されません
初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか？ 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線（太さ・色・スタイル）solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色：青 */ .white{ background-color: #FFFFFF; } /* セル色：白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }
- 締切済み
- CSS
- HTML5の構文について質問です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex,nofollow,noarchive"> <title>私のホームページ</title> <link href="style.css" media="all" rel="stylesheet" type="text/css"> </head> 今まで4.1で組んでいたものですから若干の戸惑いがあります。 １．上記構文で足りないものはありますか？ ２．<meta http-equiv="Content-Style-Type" content="text/css">を入れると構文チェックでエラーになります。エラーになる理由を教えて下さい(テキストにはStyle-Typeを指定したほうが良いというようなことが書かれています)。 ３．HTML5とは関係がないですけれど<link href="style.css" media="all" rel="stylesheet" type="text/css">を</title>の後に記述するのはなぜでしょうか？ ビルダーからＤＷに乗り換えたばかりのHTML5を勉強中の作家です。
- ベストアンサー
- HTML
お礼
解決しました！ありがとうございます！！！理想通りになりました。感謝致します<(_ _)>