Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。4メディアタイプで分ける2つの方法メディアタイプ別にCSSファイルを分ける1つのCSSファイルで、メディアタイプ別にスタイルを分ける印刷したくない部分を指定するにはFirefoxでうまく印刷されない場合の対処方法まとめメディアタイプで分ける2つの方法すべてのCSSプロパティにおいて、パソコンのスクリーン、モバイル端末、印刷時、プロジェクタ、それぞれメディアタイプ別にデザインを分けることができます。CSS2で指定できるメディアタイプは下表のとおりです。all指定できるメディアのすべてaural音声出力(音声読み上げツールなど)braille点字ディスプレイなどの点字出力embossed点字プリンタhandheld携帯用機器printプリンタ(印刷用)projectionプロジェクタscreenパソコン画面tty文字幅が固定された機器tvテレビなお、メディアタイプでスタイルを分ける方法は、大きく分けて2通りあります。media="print")を設定し、それぞれ専用のCSSファイルを呼び出します。この方法はごく一般的とされています。いうCSSのルールを作成して、その中に対象となるセレクタのスタイルを設定していきます。筆者の場合はこの方法でCSSを管理しています。*/}印刷したくない部分を指定するにはたとえば、サイドバーなど印刷する必要がない場合は、displayプロパティを使って非表示にします。none;}}Firefoxでうまく印刷されない場合の対処方法floatプロパティで回り込ませたり、DIVの幅を指定したりすると、Firefoxでは印刷時に右端が切れてしまうという問題が発生します。これを防ぐには、段組みレイアウトを実装するためのスタイルをすべてscreenメディアタイプに定義しておくのがポイントです。メディアタイプを指定しないでレイアウトスタイルを定義しないように注意してください。none;}}まとめCSSで段組みレイアウトを行う方法は何通りもあります。躓きにくい方法として、floatプロパティを使って段組みセクションそれぞれを左または右に回り込ませるように定義を行い、それぞれ幅を指定しておくのがポイントです。ブラウザによって既定のマージン値やパディング値が異なるため、どのブラウザでも同様に表示するにはそれぞれ指定しておくのがよいでしょう。@screenのメディアタイプブロック内にレイアウトを決定するスタイルを定義すると、Firefoxで印刷時に右端が切れたり2ページ目以降印刷されない...といった問題を防ぐことができます。WebMSソフトの解説書やWeb記事を執筆するテクニカルライター。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。12:00法務担当者、6割超が今後業務で「生成AIを使用したい」と回答。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。