印刷用CSSを使わずに特定の要素のみを印刷する｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは。 第20回目ウェブラボ技術メモです。 今回は特定の要素のみを印刷するプラグイン「printThis」を紹介したいと思います。 普段なら特定の要素のみを印刷する場合には、その印刷箇所に応じたCSSを作らなければいけません。 しかも、印刷したい箇所が同一ページ内に複数ある場合にはかなり面倒な処理が必要となります。 ですが、このプラグインを使えば、もうそんな必要はありません!！ では早速実装してみましょう。 ボタンを押すとそれに応じた写真を印刷するDEMOを作ってみたいと思います。 ・GitHub https://github.com/jasonday/printThis まずはJquery本体と一緒にprintThis.jsを読み込ませます。 そして以下の様に印刷ボタンと印刷箇所を設定します。 <script src="js/printThis.js"></script> <scr
IEも対応！指定した要素を印刷するjQueryプラグイン「printThis」
IEも対応！指定した要素を印刷するjQueryプラグイン「printThis」 更新日: 2019/10/18 公開日: 2015/12/22カテゴリー: JavaScript 特定の要素のみを印刷したい。そんな願いを叶える魔法のjQueryプラグインを発見しました。 その名も「printThis」。IEも7、8、9、10、11まで問題なく動き、使い方も簡単です。 printThisの使い方と対応ブラウザ使い方は他のjQueryプラグイン同様、jQueryを読み込んでからprintThis.jsを読み込みます。あとはクリックイベントなどで実行させましょう。 以下はとあるクーポン画像のみを印刷する例です。クリックイベントを登録するボタン要素を用意しておいて、印刷したい要素にprintThis()を繋げて使います。 <script src="//code.jquery.com/jquery-1
印刷画面不要！指定範囲のみ印刷できるjQueryプラグイン「jPrintArea.js」 | スタッフブログ | 株式会社クーネルワーク
どーも。谷です。 最近いくつかのWEBサイト制作案件で、印刷画面のご要望を頂きました。印刷のためだけにページのテンプレートを用意するのも手間なので、簡単に指定範囲のみ印刷できるという噂のjQueryプラグイン「jPrintArea.js」を使ってみました。 何年も前からよく使われているもののようですが、本家サイトからは既に削除されているので、使ってみたい方はこちらのコードをコピーして、「jQuery.jPrintArea.js」と名前をつけて保存してください。 jQuery(document).ready(function($){ $.jPrintArea=function(el){ var iframe=document.createElement('IFRAME'); var doc=null; $(iframe).attr('style','position:absolute;wid
印刷通販専門サイト ADPRINT
お客様のブラウザはInternet Explorerです。 サイトが正しく見えなくなる場合がございますので、最新ブラウザのご利用をお勧めいたします。 名刺両面フルカラー100枚470円～ ステッカー1000枚2900円～ 多様な用紙とサイズが低価格！高品質な名刺はアドプリントにおまかせください。無料サンプル請求頂けます
Lucky bag::blog: 印刷用 CSS で背景画像を印刷させるサンプル
Sample！ この文書は、Lucky bag::blog の 「印刷用 CSS で背景画像を印刷させる方法」のサンプルです。印刷用 CSS を用意し、その中で h1#head に対して下記の指定をすることで、背景画像も印刷時に出力されるようにしています。 h1#head { color: #fff; display: list-item; list-style-image: url(head_bg.png); list-style-position: inside; letter-spacing: -1000em; font-size: 1pt; } 印刷プレビューで確認すると、指定している背景画像が表示されている。
螺旋デザイン｜はじめてのCSS 印刷用CSS：メディア指定
印刷用のCSSの指定の仕方 印刷指定のCSSには分かりやすいように文字色を赤指定しています。 印刷プレビューをしてみると文字色が赤い状態を確認してみてください。 IE6では表示崩れが派手に発生していますので、文字が表示されない状態です。 表示のチェックにはIE6以外のブラウザを使用してください。 media="print" headタグ内でのCSSファイルのリンクに記述します。 モニター用とプリンタ用とファイルを分けて書きたい場合にオススメ！ <link href="css.css" rel="stylesheet" type="text/css" media="print" /> @media CSSの記述の中で指定する場合に使います。 CSSファイルを一つにまとめる必要があるとき、局所的に対応する場合、HTMLファイルにスタイルを直書きする場合ににオススメ。 @media print
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
