今日の記事では、CSS メディア タイプの使用法を紹介します。メディア タイプを使用すると、さまざまなメディアでファイルを表示する方法を指定できます。具体的なコンテンツを見てみましょう。
Webサイトによっては、Webページのエラーが印刷時にレイアウトが折れるなど予期せぬ形で表示される場合がありますが、メディアの種類によっては設定可能です。回避 印刷用のページを作成したり、プロジェクターに出力したりできることを意味します。
CSS メディア タイプを使用するには?
メディア タイプは 2 つの方法で記述できます。
最初の方法
<link rel="stylesheet" href="sample.css" type="text/css" media="screen">
2番目の方法
@media screen{
/*screen的内容*/
}最初の方法では、を使用して、メディアタイプに基づいて適用されるCSSを変更します。
2つ目は、メディアタイプごとの設定をCSSで記述する方法です。
CSSコードの量が多く、変更があった場合に変更が難しい場合があるため、1つ目の方法を使用することを推奨します。 , ですが、今回は 2 番目の方法を例として CSS メディア タイプを紹介します。
CSS
screen (画面)
print (印刷)# で一般的に使用されるいくつかのメディア タイプを簡単に見てみましょう。
##tv(TV)projection(プロジェクター)all(all)2 つのメディア タイプを使用する場合は、カンマで区切ることができます。具体的な例での<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSメディアタイプの使用方法</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<h1 id="Sample">Sample</h1>
<p>根据媒体的不同，背景颜色会改变</p>
<p>screen : 平常显示 : #d9534f（红色）</p>
<p>print : 打印时显示: #5bc0de（蓝色）</p>
</body>
</html>CSSコード#
@media all{
p{
color:#000000;
}
}
@media print{
body{
color: #5bc0de;
}
}
@media screen{
body{
color: #d9534f;
}
}上記のコードを実行すると、次の効果がブラウザ ページに表示されます
#サンプルは赤色です
#続行時 プレビューを印刷すると、ブラウザに次の効果が表示されます 
以上がCSSメディアタイプの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PMCSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。
GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または
最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AMSvelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。
上品でクールなカスタムCSSスクロールバー：ショーケースMar 10, 2025 am 11:37 AMこの記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます
ショー、Don＆＃039; t TellMar 16, 2025 am 11:49 AMあなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか
Redwood.jsと動物相を使用してイーサリアムアプリを構築しますMar 28, 2025 am 09:18 AM最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました
NPMコマンドは何ですか？Mar 15, 2025 am 11:36 AMNPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。
特異性について話すために（x、x、x、x）を使用しましょう（x、x、x、x）Mar 24, 2025 am 10:37 AM先日、エリック・マイヤーとおしゃべりをしていたので、形成期のエリック・マイヤーの話を思い出しました。 CSS特異性に関するブログ投稿を書きました
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
ホットトピック
7433
15135952