# 一覧の、複数ページにまたがる場合の印刷について

**URL:** <https://community.cybozu.dev/t/topic/336>\
**Category:** kintone 開発相談\
**Created:** [2017 年 4 月 13 日午前 6:46 UTC](https://community.cybozu.dev/t/topic/336 "2017-04-13T06:46:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account579](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@Legacy\_Account579](https://community.cybozu.dev/u/Legacy_Account579)\
**Post date:** [2017 年 4 月 13 日午前 6:46 UTC](https://community.cybozu.dev/t/topic/336/1 "2017-04-13T06:46:13Z")

</div>

お世話になっております。

一覧に表示されているレコードをブラウザの印刷機能を使って印刷すると、  
印刷ページ数が複数にまたがる場合、改ページの先頭にくるレコードがkintoneのヘッダー部分に隠れ、印刷されない事象が発生しております。

本事象について、回避策をご存知の方ご教授いただけませんでしょうか。  
宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account526](https://avatars.discourse-cdn.com/v4/letter/l/ea5d25/32.png) [@Legacy\_Account526](https://community.cybozu.dev/u/Legacy_Account526)\
**Post date:** [2017 年 4 月 13 日午前 8:59 UTC](https://community.cybozu.dev/t/topic/336/2 "2017-04-13T08:59:29Z")

</div>

Sakaguchi Shinyaさん  
こんにちは。

こちら、私が知ってる範囲で説明させていただきます。

まず、レコードがヘッダーに隠れない状態で印刷するには  
「kintoneのヘッダーのHTML要素を一時的に削除する」という方法が有効かと思います。

その手順は下記になります。試してみてください。  
(※私が試したブラウザは「Chrome(最新版)」「IE11」「firefox(最新版」です。)&nbsp;

ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ  
【手順】

①一覧画面が表示されている状態で、F12(開発者ツール)を押します。

②開発者ツールが開かれたら、下記のマークをクリックします。  
・Chormeの場合：

・IEの場合：

・firefoxの場合：

③クリックしたら、消したいと思うヘッダーの部分をクリックします。  
（画像の青い＆緑部分のように全体の部分をクリックするイメージです。）

例)

④選択すると、開発者ツールにそのパーツに当てはまるHTML要素が表示されると思います。  
その要素の上にカーソル当てて、右クリックしていただきます。

⑤その後、下記の画像のようにメニューが出てくると思います。  
そこで、ヘッダー要素を一時的に削除するというボタンを押します。

・「Chrome」の場合：「Delete element」

&nbsp;

・IEの場合：「要素の削除」

&nbsp;

・firefoxの場合：「ノード」を削除

&nbsp;

⑥上記の手順通りに、ヘッダーの要素を全部削除した上て、  
印刷プレビューで確認してみると、kintoneのヘッダー部分に隠れず、きれいに印刷できるかと思いますので、  
よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2017 年 4 月 13 日午前 8:59 UTC](https://community.cybozu.dev/t/topic/336/3 "2017-04-13T08:59:58Z")

</div>

Sakaguchi Shinya さん

下記の css で印刷時にヘッダ部を非表示にできます。  
ただし、アプリの全画面のブラウザ印刷機能で、ヘッダ部が非表示になります。  
一覧画面だけ適用する場合は、一覧画面表示イベントで動的に css を書き込みます。

```
@media print {
.gaia-header.gaia-header-fixed {
display: none;
}
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account579](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@Legacy\_Account579](https://community.cybozu.dev/u/Legacy_Account579)\
**Post date:** [2017 年 4 月 13 日午後 11:32 UTC](https://community.cybozu.dev/t/topic/336/4 "2017-04-13T23:32:45Z")

</div>

李智恩様  
rex0220様

お世話になっております。  
早速、ご教授いただきましてありがとうございます。  
たいへん助かり、勉強になりました。

いずれの方法でもイメージどおりの出力結果が出ることを確認しました。  
一時的ではなく、アプリ内での印刷時全てに適用したいと思っておりますので、  
今回は、css で印刷時にヘッダ部を非表示する方が容易に実現できそうです。

今後とも、宜しくお願い致します。

&nbsp;

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account579](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@Legacy\_Account579](https://community.cybozu.dev/u/Legacy_Account579)\
**Post date:** [2017 年 4 月 14 日午前 12:44 UTC](https://community.cybozu.dev/t/topic/336/5 "2017-04-14T00:44:41Z")

</div>

rex0220様

お世話になっております。  
ご教授いただいたcssをkintoneアプリに登録して動作確認を行っております。  
IE11での印刷余白設定によっては、一覧の左端：｢レコードの詳細を表示する」ボタンと項目値(文字)がページをまたぐことがあります。  
Chrome(最新版)でも確認してみましたが、IE11でのみ発生しております。

一覧の表示件数を100件、上下左右の余白を全て15mmにした場合、  
&nbsp;1ページ目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ｢レコードの詳細を表示する」ボタン： 10レコード分、項目値(文字)：11レコード分  
&nbsp;2ページ目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ｢レコードの詳細を表示する」ボタン： 17レコード分、項目値(文字)：16レコード分  
&nbsp;3ページ目以降&nbsp;&nbsp; ｢レコードの詳細を表示する」ボタン： 17レコード分、項目値(文字)：17レコード分  
といった感じになります。

度重なる質問で恐縮ですが、ご存じでしたらご教授いただけませんでしょうか。  
宜しくお願い致します。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2017 年 4 月 14 日午前 1:54 UTC](https://community.cybozu.dev/t/topic/336/6 "2017-04-14T01:54:36Z")

</div>

一覧の項目表示幅は、PC・ブラウザ毎にマニュアル設定可能ですので、余白で調整しても無理です。  
簡易的な対策としては、印刷時に、項目の表示幅を印字幅に収まるように調整するくらいです。  
nth-child(2) は、項目の位置を指定します。

指定例です。

```
@media print {
.gaia-header.gaia-header-fixed, .gaia-header-spacer {display: none;}
.recordlist-gaia th:nth-child(2) {width: 240px !IMPORTANT;}
.recordlist-gaia th:nth-child(3) {width: 120px !IMPORTANT;}
.recordlist-gaia th:nth-child(4) {width: 120px !IMPORTANT;}
.recordlist-gaia th:nth-child(5) {width: 90px !IMPORTANT;}
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account579](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@Legacy\_Account579](https://community.cybozu.dev/u/Legacy_Account579)\
**Post date:** [2017 年 4 月 14 日午前 3:07 UTC](https://community.cybozu.dev/t/topic/336/7 "2017-04-14T03:07:30Z")

</div>

rex0220様

お世話になっております。  
度重なるコメントに、ご教授いただきましてありがとうございます。  
行に関する調整は難しい旨承知しました。

そもそもの問題は、ヘッダー部分に文字が隠れることでしたので、  
解消されてたいへん満足しております。  
ありがとうございました。

&nbsp;

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 10 月 1 日午前 4:33 UTC](https://community.cybozu.dev/t/topic/336/8 "2024-10-01T04:33:18Z")

</div>

クローズされました: 2024 年 10 月 1 日午前 4:33 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。