Webページをプリントアウトするとき、不要な画像やスペース、広告、UIのメニューなどパーツを削除して、必要な部分だけを出力したいと考えるユーザーは多いだろう。それに経費削減の厳しい昨今、無駄なプリントは避けて紙代も節約したいところ。そんな状況で大活躍するのが、この拡張機能『Print Edit 2.0』だ。 『Print Edit 2.0』最大の特徴は、印刷画面の編集ができること。【Hide(H)】キーと【Delete(D)】キーを使って、印刷したくない部分を削除したり、非表示にすることができる。これによって、プリントアウト領域を小さくしたり、不要な部分を削除して必要な部分だけを出力できるのだ。 ■インストール mozillaのAdd-ons for Firefoxサイト内にある『Print Edit 2.0』のページにアクセス。Firefoxのバージョンが適合しているか確認して【Fire
------------------------------------------------------------------------------------------------------------ If you want a WebExtensions version of this add-on, then try Print Edit WE ------------------------------------------------------------------------------------------------------------ If you want to save edited web pages more accurately, then try Save Page WE with Print Edit WE ------------
One Ping Pingback: 11 UI Kits for iPhone and iPad Development | Freebies 24 Comments Nice Sharing, Thanks Thanks for these freebies…very useful for me VERY usefull… thanks guys! Man, this is great stuff. To think that I was using some crummy notepad to do this. This is going to help me visualise my websites so much easier. We offer a free printable copy of the Web Design Sketchbook which has vario
Wireframe modeling is an extremely important stage of any web development. But once the preliminary sketches are made and the basic architecture of the site’s content is defined, it’s often tempting to go directly to the development process. And after all, creating a wireframe model – the next thing after conceptual site planning and before its concrete development – can be hugely beneficial to th
[mixi] jQuery.js | しつもん 162 Thickboxで表示したコンテンツだけを印刷できるようにするテクニックというのはあるのでしょうか? [mixi] jQuery.js | しつもん 162 Thickboxで表示させた部分だけ印刷できるようになんてできるんだろうか・・・?なんて思ったけど、印刷ボタンつけてそこであれこれしたらできそうだなーなんて思ったので実践!! Thickbox部分のみ印刷できるようにする 早速実践! ※とりあえずブラウザでのプレビュー確認報告。Firefox3.6、IE7、IE8は大丈夫な様子。ChromeはデモのThickbox表示がおかしい状況・・・Opera微妙? ■デモ 上記の画像表示中は、その部分のみが印刷される(ハズ)です。 尚、今回の内容はFirefox3.6で動作確認済み。他ブラウザ、時間の関係で未確認です>< カスタマイズ箇所
Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet. Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen. Also, following tutorials is easier if you have one next to you, with your code edi
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます!現在、長野県長野市の制作会社でWeb作成中! Webサイトを印刷対応にしたい場合、印刷用cssを用意して 印刷用に最適化する。 通常背景を印刷する場合はブラウザの設定で背景も印刷する に設定されていないとできない。 なんとかしたいと思って調べた対応策をメモ デモはこちら まず cssのメディアタイプをprintにする。 <link rel="stylesheet" type="text/css" href="css/print.css" media="print"> cssで対象となる箇所を display:list-item; にする。そして list-style-image に印刷したい画像を
今回のモダシンラジオはここ最近観た映画について一人語りする回です。以下の8本の映画について15分弱でさらっと喋ってみました。15分で8本なんでほんと「さらっと」なんですが、「マダム・ウェブ」以外は全部オススメです(「マダム・ウェブ」もそんなに悪くないけど)。 ・ボーはおそれている ・ストップ・メイキング・センス 4Kレストア ・劇場版ハイキュー!! ゴミ捨て場の決戦 ・落下の解剖学 ・コヴェナント 約束の救出 ・マダム・ウェブ ・犯罪都市 NO WAY OUT ・ARGYLLE/アーガイル さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor)の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for Podca
Although web design is everywhere nowadays (even when we’re not at the computer it still manages to squeeze it’s way in to our everyday life), print design is still a huge part of the design industry and is everywhere we look: newspapers, posters, prints, manuals, restaurant menus, business cards – the list goes on and on. So how do you make sure that you leave a good impression on people holding
これは超絶便利! よくウェブページを印刷するといらないヘッダーやらのおかげで意味不明なページを印刷することになるが、そうした悩みを解決してくれるサービスだ。 使い方は簡単で、印刷したいページのURLを入力し、ブラウザ上のエディターっぽいもので印刷したい部分だけを取り出してから印刷するだけだ。 ユーザビリティもしっかりしていて、選択した部分を削除したり、逆に選択した部分だけを残してあとを削除したりすることもできる。 選択できるのはどうやらDOMのようだ。その要素の親要素、子要素を選択することもできるので使いやすい。 印刷用のスタイルシートがある場合もあるが、そうでないサイトも多い。とっても便利なので覚えておくといいですな。
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー(嘘かホントかは知らない)あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ!検索対策っ!さっさと検索対策~!って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。 Handy Tips for Creating a Print CSS Stylesheet 印刷時のテキストをデザインする 見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。 下記の例では、見出しを中央寄せにし、斜体にしています。 また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう(リンクのスタイルについては後述)。 <textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text
CSSの文字サイズの単位は何を使っていますか?IEで可変させることを考えてemや%、smallなどでしょうか。では、印刷用CSSの文字サイズ単位はどうでしょうか。pxでしょうか?emでしょうか? プリントアウトのことを考慮している(ように見える)サイトのCSSをのぞいてみると、文字サイズをpt(ポイント)で指定しているサイトをよく見ます。なぜptなのでしょうか? pxはPCのモニター上でのサイズ単位として使用されます。そしてptは印刷(出版)での物理的なサイズ単位(72pt = 1インチ = 2.54cm)として使用されます。PCのモニター解像度はdpi(dot per inch(1インチの中に何ドット))で表され、CSSでは「1pt = 1/72インチ」となり「1px = 1ドット」となります。 この事からわかるとおり、ptの場合はモニター解像度(dpi)が変わっても印刷サイズは変わりま
IE8はCSS 2.1の機能に一通り対応した。そこで今回からはIE8が新規に対応したCSS 2.1のプロパティや値についてまとめていく。まずは、古いIEでは未対応だった印刷関連の機能と、コンテンツの追加に関する機能について確認していきたい。 なお、新しく対応した機能を利用するにはIE8のStandardsモード(標準準拠モード)で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。 印刷関連の機能 印刷関連の機能では、古いIEはpage-break-afterとpage-break-beforeプロパティに部分的に対応していた。IE8ではこれらのプロパティを完全にサポートするとともに、@pageルールやpage-break-insideプロパティなど、印刷関連の残りの機能にも対応している。 @pageル
クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う: <p class="print"> <a href="#" onclick="window.print(); return false;">このページを印刷</a> </p> でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。 まずは JavaScript。例によって jQuery を読み込んだ上で、こんな風なスクリプトを記述: $(function(){ $('body').addClass('js-enabled'); }); もちろんクラス名はなんでもよくて、body 要素になんらかの class 属性を付与できれば
印刷時にナビゲーションなどのいらない部分を省略したい時CSSを分けるのが面倒な場合。 jPrintAreaは簡単に印刷範囲を指定することができます。 jPrintAreaからjquery.jPrintArea.jsをjQueryからjquery.jsをダウンロードします。 ヘッダー内 <script src="~/jquery.js" type="text/javascript"></script> <script src="~/jquery.jPrintArea.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.link').click(function(){ $.jPrintArea('印刷対象の要素名') });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く