モバイルファーストでCSSを書くのをためらうただ１つの理由 - Qiita
私が以前担当したコーディング案件での話です。新規１ページのレスポンシブ対応ありの仕事ですが、他の案件と並行してた上、スケジュールがタイトだったため、今回は作業効率が良さそうな「モバイルファースト」でCSSを書こうと決めました。一部複雑なレイアウトがあってリスク管理の面から、スマホ版の方を早く作り込んで表示確認しておきたいと思ったのも理由でした。ところが無事テストアップした翌日、サイトを確認したお客様から私に修正依頼のメールがきました。PDFで添付されていたPC版ページのキャプチャを見て愕然。「プリントしたら画面とレイアウトが変わりました」とのご指摘。確かにPC版のレイアウトが崩れまくってます。画像サイズが大きすぎたり、floatが効いてなかったり……。お客様サイトで運用中の他の既存ページはPDFに印刷してもコンテンツ部分のレイアウトは崩れません。それらのページはHTMLやCSSで特に印刷用
特定エリアのみをプリントしたい ｜ Tips Note by TAM
特定範囲のみをプリントできるようにしたい、という依頼がありましたので調べてみました。 ▼サンプル 「個別印刷」ボタンをクリックすると、クリックしたエリアをプリント。 「一括印刷」ボタンをクリックするとareaA、areaBの両方をプリントします。 See the Pen print by miya (@tam_miya) on CodePen. ■JavaScript ※jQueryを使用しています。 $(function(){ //個別印刷ボタンをクリックした時 $('.print-btn').on('click', function(){ //プリントしたいエリアの取得 var printPage = $(this).closest('.print-page').html(); //プリント用の要素「#print」を作成 $('body').append('<div id="print
「1冊から」「数百円で」本が出版できる「OneBooks」を使ってみました
by Chiara Cremaschi 基本料金1冊200円でカバー・オビ付きの本が作れて、カラーでもモノクロでも同一料金、本当に1冊から本の出版を依頼できるサービスが「OneBooks」です。本を作る時に、1回の注文でたくさん本を刷る必要があるため在庫が出てしまうというリスクは大きいものですが、OneBooksならその心配もなさそうなので、実際にサービスを利用してみました。 OneBooks | 株式会社RED TRAIN http://www.red-train.co.jp/onebook ワンブックスの特徴は大きく分けて5つ。まず、本当に「1冊から」本が作れること。 カラー・モノクロいずれの印刷でも同じ金額で本がつくれ、かつ1冊でも100冊でも金額は変わらないこと。 本文用紙は全部で17種類、厚みの種類も含めると全部で36種類から選ぶことが可能。どの用紙を選んでも金額は一緒で、オビや
Firefoxの印刷と闘う その2 | Takazudo Clipping*
このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル（印刷対応無） <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa
各種ブラウザの印刷のバグが治る（かも知れない）CSS の設定。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。 というか、おかしくならないことの方が多い。 というか、float を使ってなくてもおかしくなることの方が多い。 （特に、IE6、IE7、IE8、Firefox あたり） そんなとき、こんな印刷用 CSS を作っておいたら解決するかもよ！ 的な内容です。 まず、HTML は以下のような感じ。 <div id="wrapper"> <div id="contents"> （色々コンテンツが入ってる） </div> <div id="sidebar"> （サイドメニューとかバナーとか） </div> </div> #contents と #sidebar に float が設定
印刷 印刷用css css print.css
#2です。 印刷用(media)のスタイルを指定する方法は３種類あります。 (1)リンクしたスタイルシートをmediaを指定して読み込む <LINK rel="stylesheet" type="text/css" media="print" href="print.css"> (2)インポート時にmediaを指定する @import url("print.css") print; (3)一部分（ブロック単位）にmediaを指定する @media print { } #2の例は(3)のケースです。 mediaを指定していないCSSファイルやHTMLのヘッダ部のstyle要素内で一部分をprint用に追加する書き方です。プリント用のcssに記述するのかというと、そうではないです。 http://www.y-adagio.com/public/standards/tr_css2 …
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.db.gs/article/119497155.html
GRAFiCA
株式会社グラフィカ