質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1920閲覧

印刷用CSSにおいてINPUT要素の横幅を調整したい

ltcmdr927

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2017/03/29 06:44

編集2017/03/29 07:01

###前提・実現したいこと

INPUT 要素に入力された値をそのまま印刷したいと考えています。

表示整形ための印刷用 CSS として、下画像のラベル「値1」「値2」「値3」や「PRINT」ボタン、INPUT 要素の border を無効化するような定義を行いました。

上記の定義は問題なく適用されるのですが INPUT 要素の横幅はそのままになってしまっているため、印刷プレビューでは数式が間延びしているように見え、あまり見やすくありません。

イメージ説明

イメージ説明

可能であれば JavaScript を使わず CSS の定義だけで「1 +2 =3 」のような状態を「1+2=3」のように詰めて表示できればと考えています。

※ 1+2=3 の数式は 1000+2000=3000 や 10000000+20000000=30000000 など可変となります

###コード

html

1<table> 2 <tr> 3 <th>値1</th> 4 <td><input type="text" id="value1" value="1" /></td> 5 <td>+</td> 6 <th>値2</th> 7 <td><input type="text" id="value2" value="2" /></td> 8 <td>=</td> 9 <th>値3</th> 10 <td><input type="text" id="value3" value="3" /></td> 11 </tr> 12</table> 13<button id="print" onclick="window.print(); return false;">PRINT</button>

css

1 2TH { 3 display: none; 4} 5BUTTON { 6 display: none; 7}

###試したこと

INPUT 要素に値が入力された場合、あるいは「PRINT」ボタン押下時に JavaScript からの DOM 操作を実施することによって「印刷用のHTML」を都度作成し、それを印刷用 CSS で表示切り替えし印刷プレビューとして反映させるなど JavaScript を利用することで実現が可能なことは把握しております。

ただし INPUT 要素にかかる CSS 定義のみを変更することで「1+2=3」のように詰めることが可能なのであれば、後々のメンテナンスの都合上、そのように実装したいと考えています。

###補足情報(言語/FW/ツール等のバージョンなど)

CSS3
HTML5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

input[type="text"] を印刷用CSSの場合のみテキストのように扱うことは無理だと思います。
0. ::before/::after 擬似要素をもてない
持つことが出来るなら処理できるが持たない。
0. width を超えた部分は非表示になる
widthがコンテンツにあわせて拡張したり非表示部分を overflow: visible; の指定ができるなら可能性はありますが、それも出来ません。

投稿2017/03/29 07:20

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ltcmdr927

2017/03/29 12:04

回答ありがとうございます。やはり JavaScript を用いるしかなさそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問