「忠犬もちしば」のAIボットを作ろう!

media printを使って、印刷範囲を指定したいです。

サイトは大きく以下のように構成されています。

サイト全体を囲む div#base(サイズ固定、センターぞろえ)

div#baseの中に、
ヘッダ #header(上段、左右いっぱい)
メニュー .area_menu(中央段左。float:left)
メイン .main(中央段右。float:right)
フッタ #footer(下段、左右いっぱい)
となっています。

上記各要素の中に子要素は諸々入っていますが、上記の大箱たちはこれ以上入れ子になってはいません。
※例えば、「メニューとメイン」を合わせて別の箱でくくったりはしていません。


このうちの、メイン部分のみ、印刷したいです。
現在、

@media print{
.area_menu{display:none;}
#footer{display:none;}
#header{display:none;}
.main{width:100%; float:none; color:#666;}
}
としています。

確かにメイン以外の部分は消えるのですが、本当にそのままの位置で消えただけという感じで、メインの左側に大きな余白ができてしまっています。
印刷サイズを拡大・縮小してみてもやはり同じで、左側の白い部分(メニューがあった部分)も「印刷物」として認識してしまっています。
印刷範囲からはみ出るくらい拡大すると、左に余白を残した状態で、右側は印刷可能範囲からはみ出て次ページに行ってしまいます。
どうすれば、「メイン部分だけ」を左に持ってこれるでしょうか?

検索したのですが見つからなかったため、
適当に指定のfloatの部分を右や左にしてみたり、clearを入れてみたり、「div#baseを読んでるのか?」と思い、div#baseをdisplay:noneしてみたり…。
初心者なりに色々試してはみたのですが、どうにもうまくいきません。

float:rightがかかっているボックスを、左寄せにして印刷する方法をお願いします(><

A 回答 (7件)

No.2です。


 一度仕様書(CSS2でもよい)を読み通しておくことをお勧めします。
視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
その他の視覚効果 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

ページ媒体 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

音声スタイルシート ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

は異なります。
float:プロパティは、視覚メディア(visual)です。

 たとえば、visualとprintedは随分と異なります。特にfixedは各ページに印刷されます。
 プロパティ索引 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )のfloat:の項目の右端に、visualと書いてあります。

 あくまで、テキスト中の挿絵など本来の使い方なら大丈夫ですが、blockの配置には使うべきではありません。



 たとえば、
ペットボトル握力計 ( http://iruka.la.coocan.jp/craft/HandDynamometer/ … )
 な使い方をします。
    • good
    • 0
この回答へのお礼

ありがとうございます。
せっかくたくさんのURLを貼ってくださったのですが…。
すみません。現在の私のスキルと脳みそでは、脳内に??が大量に浮かぶだけで、全く理解できそうにありません(><
何のことを言っているかもサッパリわからず、異国の文章をただ茫然と眺めているかのような状態です…。

まだcssを始めて1~2週間しか経っていないもので…。
いつもORUKA様の高度なアドバイスを生かすことができず、申し訳ありません。

ORUKA様の発言から、なんとな~く理解できた(?)のは、要するに体裁を整えるためのボックスの配置にフロートを使わないこと!ということでしょうか?

だとすれば…どうやって配置すればいいんでしょうか(><
「初心者のためのcss講座」「誰でもできるcssの基本」的なサイトを参考にしながら作っていたのですが(そういうのじゃないと理解できないので)、同様のレベルのサイトで、フロートを使わない方法を教えてくれているサイトをご存知でしたら教えていただきたいです…。

お礼日時:2011/12/07 17:59

(4)は便宜上記述しただけですね。



(3)の直下に(2)と同じかそれ以下のwidth 属性をもったエレメントが存在したらそこにまわりこむのです。


レイアウト上(3)は回り込みを解除する必要はあれど回り込みを設定することはないはずです。
    • good
    • 0
この回答へのお礼

4に該当するものは私のレイアウトにはないが、仮にあった場合、今の指定だと図のようになってしまう、ということですね。

しかし、実際には私のレイアウトに4は存在せず、加えてフッタでclearして〆ているのでそれでOKだと思っていました。
サイトでいろいろな記事を見ながら作成していたのですが、メニューにfloat: left;、メインにright、フッタでclearというように教えているものも多かった(と言うか、そういうのばかりしか目にしなかった)ため、そのように作ってしまっていました。

教えてくださった方法に変更するとして、メインのフロートをleftに変更するのではなく、フロートそのものを削除するということですよね?(でないと意味がないですよね?)
そうだと仮定して、メインのフロートを完全に削除すると、メニューに重なってしまい、メインのボックスは画面最左まで寄ってしまいます。

この状態で、左からの余白を320(メニューの幅と余白の幅分)にすればいいのでしょうか?
それとも、margin-left:auto;でしょうか?

上記2方法とも試してみましたが、やはり印刷時、どちらも大きく左に空きが出来てしまいます。
プリントCSSにmargin-right:auto;を設定したら、やや左に寄ったものの、相変わらず左に空きがあり、印刷サイズを変更等しても、左の空きが埋まりません。

今のところ(正しい正しくないは別として)、望みどおりの解決策(印刷プレビュー時に印刷したい部分が左に寄る)を実現できるのは、メインのフロートをleftに書き換え、左に20pxの空きを指定する方法だけです。

なんだか混乱してきてしまいましたが、何とかもう少しお力をお借りしたく、よろしくお願いします。

お礼日時:2011/12/07 17:41

float: right; 削除でOKです。



(1)────┐
│■■■■│
└────┘
(2)─┐(3)─┐
│■││■│
└─┘│■│
(4)─┐│■│
│■││■│
└─┘└─┘


(MSゴシック等でみてください。)
のようなレイアウトにするのは構造上問題です。
(2)のエリアの中に(4)も入るようにしましょう。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
すみません。ちょっと意味がよくわかりませんでした。
1~4は具体的にどこを表しているのでしょうか?
1がヘッダ、2がメニュー、3がメイン、4がフッタですか?
そうだという前提で話を進めますが、
2に4を入れるというのがよくわからないのですが…。

フッタは横幅いっぱいですので、2の横にも3の横にも来ることはありません。
2や3に内包することもできません。
ですので、仮に3が長くなっても、下にずれるだけで、図のような回り込みにはなりません。

現状、メインのfloat: right;を削除してしまうと、3が左にずれ、2にくっつきます。
外枠が940、メニューが300、メインが620ですので、20px右に空きができます。
その分メインの左に余白を取ってしまえば、見た目上は今と同じ、メインが右に寄っているように見えるようにすることはできます。
そのようにしたほうが良いということですか?

「構造上問題」とのことですが、上記のようにちょっと意味が理解できなかったため、どこが問題なのかわかりませんでした。
とても気になりますので、お手数ですが再度教えていただけますと助かります。

お礼日時:2011/12/07 16:38

float: right; が悪さをしてる。

    • good
    • 0
この回答へのお礼

回答ありがとうございます。

そうなんです。
メインボックスに指定したfloat: right;がガンなのは明らかなんですが、このガンを、何とかプリント用cssでやっつけたいのです(^^;

サンプル提示時に書いたように、メインボックスのfloat: right;をreftに書き換えて、代わりに左余白を設定すれば、とりあえず問題を解決することはできます。
でも、float: right;の箱は印刷指定できない…はずはないと思うんですよね。
なので、どこかに思わぬミスがあるとか、大事な指定を忘れているとか、何か原因があるのではないかと思っています。
それとも、float: right;の箱は印刷指定できない=みんなfloat: right;を避けてうまくやっているのでしょうか?

解決方法でも、「float: right;はできない決まりになってるよ」という情報でも何でもいいので、何かアドバイスがあれば教えていただけたら嬉しいです。

お礼日時:2011/12/07 16:19

.main{margin-left:0;}



追加でどうでしょう?
    • good
    • 0
この回答へのお礼

回答していただき、ありがとうございます。
↓2番の方へのコメントで書きましたが、
.main{margin-left:0;}
テストしてみた結果、アウトでした(TT

そちらのコメにサンプルを載せましたので、どこか間違いがあればご指摘いただけると助かります。

お礼日時:2011/12/07 15:12

単純にスタイルシート自体を切り替えればよいです。


スタイルシートには
固定スタイルシート(persistent style sheet)
優先スタイルシート(preferred style sheet)
代替スタイルシート(alternate style sheet)
メディア別スタイルシート
などがあります。私は、 @mediaを解釈しないブラウザもあるので
<link rel="stylesheet" type="text/css" href="./CSS/general.css" >
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="./CSS/standardShape.css" >
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="./CSS/standardColor.css" >
<link rel="styleSheet" type="text/css" media="handheld,tty" href="./CSS/handheld.css" >
<link rel="styleSheet" type="text/css" media="print" href="./CSS/print.css" >
とかにしています。

 完全にprint用のスタイルシートを別にしてしまえば問題はないと思います。
    • good
    • 0
この回答へのお礼

いつも回答いただきありがとうございます。

説明不足で申し訳ありません。
初めからプリント用cssはレイアウトcssとは分けています。
でもダメなんです。

サンプルを作ったので、どこが悪いか見てください。
子要素の構造が悪いのかと思い、現在のページから「サイトを構成する箱」以外の余分な要素を一切排除してみたものですが、これでも右に寄ってしまいます。
最初に質問を立てた時点からの変更点は、
.area_menu→#menu
.main→#main
としてみたところです。

と、これを書いている時点でもう御一方の回答をいただきましたので、margin-left:0;を足す変更も加えてみました。

しかし、ダメです。
IE、Firefox Chromeすべてダメ。
最悪、メインの箱の左に余白を作り、float: left;にするしかないのでしょうか。
(そうすれば左に寄ることは確認済みです。)
でも、それだと、もっと複雑な構造のサイトの特定部分を印刷したいなど、floatを変更することが難しい構造の場合、印刷指定はできないということになってしまいますよね…?


サンプルです。

プリント用css
@media print{
#header{display:none;}
#footer{display:none;}
#menu{display:none;}
#main{width:100%; float:none; color:#666; margin-left:0;}
}

レイアウト用css
@charset "utf-8";
/* ボディー全体 */
div#base {
width:940px;
margin:0 auto;
}
/* ヘッダー */
div#header {
width:940px;
}
/* フッター */
div#footer {
width:940px;
clear: both;
}
/* メニューエリア */
div#menu {
float: left;
width: 300px;
}
/* メインエリア */
div#main {
float: right;
width: 620px;
}


HTMLページ
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>てすとてすと</title>
<meta name="description" content="てすとてすとてすと" />
<meta name="keywords" content="てすと,てすと,てすと" />
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/print.css" rel="stylesheet" media="print" type="text/css">
</head>
<body>
<div id="base">
<div id="header">
へっだ</div>
<div id="menu">
めにゅー</div>
<div id="main">
印刷したい
</div>
<div id="footer">
ふった</div>
</div>
</body>
</html>


どこに間違いがあるか、検証していただけると助かります。

お礼日時:2011/12/07 15:10
    • good
    • 0
この回答へのお礼

URLを教えていただき、ありがとうございます。
行ってみましたが、そもそも最初に私が参考にしてソースをパクってきたサイトでした…(笑
その通りにやっているつもりなのですが、うまくいきません。

↑2番の方へのコメントにサンプルを載せましたので、どこか間違いがあればご指摘いただけると助かります。

お礼日時:2011/12/07 15:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q印刷範囲の指定はできますか?

現在、ホームページを制作しているのですが、A4紙に収まらないページがあるのです(写真が切れてしまいます)。
そこで、ページのある一部分(メインの部分)だけを印刷する、またはしないように指定したいのですが、可能でしょうか。

Aベストアンサー

スタイルシートを使えば可能ですよ。

印刷用のスタイルシートを適用すればよいのです。
http://linkage.xrea.jp/article/2004/07/make_mediacss.php

上記のサイトを参考にしていただければ分かりやすいと思いますが(やり方は二通りあります)

たとえば、次のページを用意します。
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div class="noprint">
ここは印刷したくない
</div>
<div>
ここは印刷したい
</div>
</body>
</html>

上のHTMLでprint.cssというファイルを読み込み指定していますよね。
このprint.cssというファイルを作ります。
この中に

.noprint{
display:none;
}

と書いてあれば、class="noprint"で指定された部分は印刷されません。

分かりますでしょうか?

参考URL:http://linkage.xrea.jp/article/2004/07/css2print.php

スタイルシートを使えば可能ですよ。

印刷用のスタイルシートを適用すればよいのです。
http://linkage.xrea.jp/article/2004/07/make_mediacss.php

上記のサイトを参考にしていただければ分かりやすいと思いますが(やり方は二通りあります)

たとえば、次のページを用意します。
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div class="noprint">
ここは印刷したくない
</div>
<div>
ここは印刷したい
</div>
</body>
</htm...続きを読む

Qjavascriptでページ内の一部分だけを印刷する設定

ページを印刷するjavascriptを調べたところ、

<a href="javascript:window.print();">
印刷する</a>

というのが最も多く出てきました。
今回、ページ内のクーポンの部分だけを印刷する、
という設定にしたいのですが、その場合の記述方法を教えてください。

また上記の場合、<script>~</script> で
javascript自体の指令は必要ないんでしょうか。

Aベストアンサー

HTML上の印刷する部分を限定したいということですが、
こんな感じでどうでしょうか?

スタイルシートの設定のしかたで、ある程度近いことができると思います。
IE6ではこれで動いています。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title></title>
<style media=screen>
<!--
/*印刷時のみ表示*/
.prtOnly {display:none;}
// -->
</style>
<style media=print>
<!--
/*ブラウザのみ表示*/
.dspOnly {display:none;}
// -->
</style>
</head>
<body>
<!-- ブラウザ上のみ表示 -->
<div class="dspOnly">テスト</div><br>
<!-- 印刷時のみ表示 -->
<img src="test1.jpg" border="0" class="prtOnly"><br>
<!-- 両方表示 -->
<img src="test2.jpg" border="0" class="">
<br>
<br>
<a href="javascript:window.print();" class="dspOnly">
印刷する</a>

</body>
</html>


> また上記の場合、<script>~</script> で
> javascript自体の指令は必要ないんでしょうか。

javascript:window.print()←自体がJavaScriptの命令になって
いますので特に必要ありません。

※さらに複雑さ処理がやりたい場合は別ですが。

HTML上の印刷する部分を限定したいということですが、
こんな感じでどうでしょうか?

スタイルシートの設定のしかたで、ある程度近いことができると思います。
IE6ではこれで動いています。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title></title>
<style media=screen>
<!--
/*印刷時のみ表示*/
.prtOnly {display:none;}
// -->
</style>
<style media=print>
<!--
/*ブラウザのみ表示*/
.dspOnly {display:none;}
// -->
</style>
<...続きを読む

Qサイト全体を縮小して印刷するには?

こんにちは。教えてください。
http://lexus.jp/
上記アドレスのサイトのように
横幅940pxと普通はA4縦では全てが印刷出来ないサイズのサイトでも
ブラウザから印刷するとサイト全体が縮小して
A4縦に収まって印刷される方法を教えてください。

JavaScript、css少しならわかります。
よろしくお願い致します!

Aベストアンサー

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にページ幅を基準とする機能が付いています。

MinefieldではScaleで調整し,
Operaでは[ファイル]-[印刷オプション]に「用紙幅におさめる」で有効になります。
IE6は上の指定で回避します。

ただし,IE7は標準でShrink To Fitであり,zoomプロパティを読み込んでしまうため,異様に小さく印刷されてしまいます。なのでShrink To Fitではなく100%で印刷した方が良いでしょう。

何故か俺の環境ではVPC上でしか動作しないSafariは,
VPCにプリンタドライバ入れなきゃいけないのが面倒なので検証していません。

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にペ...続きを読む

QIEの印刷でcssが無効になう

宜しくお願いします。

CSSを使って、DIVタグでレイアウトしています。TABLEでなくDIVだけで組むのは初チャレンジです。外部CSSを使用しています。

IE(Ver6)では、問題なくCSSが有効となって見えるのですが、印刷プレビュー及び印刷では、CSSが無効となりレイアウトが崩れてしまいます。DIV関係に限らず全てのCSSが無効です。

こんな経験は初めてで、何が悪いのかわかりません。

どこをチェックすれば良いのでしょうか?

Aベストアンサー

#2です。例題が悪かったです。(こうなっていると印刷にcssが効かないという例です。)
media="screen" になっているならこのCSSはscreenメディア(主にパソコンのディスプレイ)に対してだけ適用してください。という意味になります。
media="screen,print" と、すると画面と印刷の両方に適用されます。
(media="all"またはmedia自体を削除すれば全てのメディアに適用されます。)

Q印刷時ヘッダーとフッターを挿入

印刷時ヘッダーとフッターを挿入
現在HPを作成しているのですが、来訪者がHPを印刷する時に、
フッターとヘッダーをこちらで指定しておくことは可能でしょうか?
ページ印刷時2枚以上になる場合全ページに同じヘッダーとフッターが
印刷されるようにしたいのです。
初心者なのであまり専門的なことまではわかりませんが、
html,Javascript,cgi,cssなどWindows環境で使用可能であれば基本言語は問いません。
わかる方いらっしゃいましたらご教授願います。

Aベストアンサー

共通のフッター部とヘッダー部を別途用意し、各ページに自動挿入するのは、
主にCGI(PHPとかPerl)のお仕事です。

Javascriptでやる時はAJAXと呼ばれる手法で、動的にコンテンツを
挿入出来ます。

ただし、プリント時にのみとなると、IEだけだったら、
window.onbeforeprint = functuon(){}で処理を書けますが、
一般的なブラウザーにこのイベントは無いです。(キーイベントで
PRINTキー押下を検知なんてのはいんちきですね)

やはり、全部のページに予めフッター部とヘッダー部を含めておいて、
普通はCSSで非標示にして、印刷用のCSSを作って、
<link rel="stylesheet" type="text/css"
href="/screen.css" media="screen">

.print_header{display:none;} <==注意:screen.cssの内容です。
                   この場に書くんじゃない

<link rel="stylesheet" type="text/css"
href="/print.css" media="print">

.print_header{display:block;} <==注意:print.cssの内容です。
                   この場に書くんじゃない


<body>

<div class="print_header">header部</div>

</body>
print.cssでのみdisplay:block;にするのがよいのでは..

共通のフッター部とヘッダー部を別途用意し、各ページに自動挿入するのは、
主にCGI(PHPとかPerl)のお仕事です。

Javascriptでやる時はAJAXと呼ばれる手法で、動的にコンテンツを
挿入出来ます。

ただし、プリント時にのみとなると、IEだけだったら、
window.onbeforeprint = functuon(){}で処理を書けますが、
一般的なブラウザーにこのイベントは無いです。(キーイベントで
PRINTキー押下を検知なんてのはいんちきですね)

やはり、全部のページに予めフッター部とヘッダー部を含めておいて、
普通はCSSで...続きを読む

Q☆画面中に縦スクロールバー付きの画面があるページの印刷は。。☆

こんにちは、koumakiです。
いつもお世話になってます!

先ほどパソコンで、TV料理番組のレシピを印刷しようとしたんですが、画面の中に、もう一つ縦スクロールバー付きの画面(それがレシピ画面です)があり、レシピのすべてがちゃんと写りませんでした(TT)

余白等の設定を変えたり、横印刷にしたりしましたが、だめでした。
ページ数もなぜか分かりませんが固定してしまっていて。。。

どなたか、きれいに印刷する方法を教えてください!

こちらパソコンは、かなり素人です。。

お願い致します☆

Aベストアンサー

複数のフレーム(枠のこと)の印刷ということですね。

【対処方法】
1.必要なフレームの場所で、一回クリックしておきます。
2.ファイルー印刷
で、印刷のウィンドウがでたら、
一番下のフレームの印刷の、
「選択したフレームのみ選択」を選びます。

3.OKを押す。

だめでしたら、「すべてのフレーム個別で印刷」、を選択で、やってみてください。

<おまけ>
印刷前に、印刷プレビューがありますので、今後活用してください。

Qインラインフレームの印刷について

インラインフレームを使用したページを印刷しようとすると、隠れた部分が印刷できませんが、印刷できる方法はありますでしょうか。IE6使用。

(普通のフレームならフレームごとの印刷ができるのですが・・・)

Aベストアンサー

まず、インラインフレームの印刷の件ですが、
JavaScript でフレーム内の情報量等を取得して、
CSS 等を書き換える事により印刷用の CSS でインラインフレームのサイズを変更して全て見れるサイズにするしかないのでは???
(#2 の方の方法ですが、フレーム内の情報量が一定ではなさそうなので、ちょっと JavaScript 等で制御が必要な様な・・・)

で、なにより
>ショッピングサイトでカートの流れをインラインフレームで表示させることになりました。
>届け先などを確認のため印刷する人が出るかもしれない、
>でもインラインフレームだと表示しきれない部分があるので
???
確認が必要そうな情報なら他ページで表示できなければ問題でしょうし、
その様なページが他にあれば別にそのインラインフレームで印刷できる必要性はないでしょう???
まさか確認,修正が出来るページがないという事は・・・。
(なければ印刷どころの問題ではないですがぁ~)
という事で、そもそもインラインフレーム内に表示する程度の情報なのですから、
印刷が出来ない事を気にする必要はないと思います。

まず、インラインフレームの印刷の件ですが、
JavaScript でフレーム内の情報量等を取得して、
CSS 等を書き換える事により印刷用の CSS でインラインフレームのサイズを変更して全て見れるサイズにするしかないのでは???
(#2 の方の方法ですが、フレーム内の情報量が一定ではなさそうなので、ちょっと JavaScript 等で制御が必要な様な・・・)

で、なにより
>ショッピングサイトでカートの流れをインラインフレームで表示させることになりました。
>届け先などを確認のため印刷する人が出るかもし...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q印刷時に2ページ以上になる時CSSで指定した背景が全てのページに印刷されてしまう

CSSで背景を上部にno-repeatで指定しています。これを印刷すると、印刷枚数が2ページ以上になった時、全てのページに背景が印刷されてしまいます。できれば最初のページだけに印刷されるようにしたいのですが方法はありますでしょうか。Mac IEでは最初のページのみに背景が印刷されます。Windowsはだめです。

Aベストアンサー

無理ではありませんよ^^
大丈夫です。印刷用のCSSは簡単です。
まず印刷用のCSSは、
<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
ヘッダ部にこのように記述します。
そこから、印刷した場合2ページ以上は背景を表示しないですよね。
印刷用のCSSには、改ページさせる記述方法があります。
.front_print {
page-break-before: always;
}

例として名前を入力しました。.front_printは任意の名前で結構ですよ。
そして、HTMLの方の記述は、

<div class="front_print"></div>

この<div class="front_print"></div>がある箇所で、印刷は改ページとなります。

この記述がある箇所で改ページがなされるという事は、それ以降の記述は2ページ後となりますので、そこより
背景を再指定させればご質問者様の要望に叶うかと思います。

CSSが詳しく紹介されているページを参考URLに載せておきます。ご覧下さい

ご参考頂けますと幸いです。

参考URL:http://www.stylish-style.com/index.html

無理ではありませんよ^^
大丈夫です。印刷用のCSSは簡単です。
まず印刷用のCSSは、
<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
ヘッダ部にこのように記述します。
そこから、印刷した場合2ページ以上は背景を表示しないですよね。
印刷用のCSSには、改ページさせる記述方法があります。
.front_print {
page-break-before: always;
}

例として名前を入力しました。.front_printは任意の名前で結構ですよ。
そして、HTMLの方の記述は、

<...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング