<style>要素の使い方・サンプルコード
Sara
<style>
<style>要素には、CSS によるスタイルの情報を記述します。
<body>要素内に書くこともできますが、通常 <head>要素内に記述します。
属性
media
スタイルを適用するメディアタイプを指定します。
all
全てのデバイスを指定します。media 属性を指定しない場合は、デフォルトで all となります。
<style media="all"></style>プリンターのプレビュー画面、印刷時を指定します。
<style media="print"></style>screen
一般的なウェブブラウザを指定します。and と組み合わせてスマートフォンへの対応によく使用されます。
以下のように指定すると画面の幅が768px以下の場合に適用されます。
<style media="screen and (max-width: 768px)"></style>その他のメディアタイプ
その他のメディアタイプ tty, tv, projection, handheld, braille, embossed, aural は非推奨となっています。
参考：メディアクエリの使用
type
スタイル言語を MIME タイプで定義します。省略した場合は text/css となります。
scoped
* 現在非推奨になっています。
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style media="all">
span {
color: red;
}
</style>
</head>
<body>
<p>ここに<span>テキスト</span>を入力します。</p>
</body>
</html>実行結果
ここにテキストを入力します。
対応ブラウザ
関連するタグ
- <head>：HTML文書のヘッダ情報
Subscribe
0 Comments
古い順
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！
