<style>要素には、CSS によるスタイルの情報を記述します。
<body>要素内に書くこともできますが、通常 <head>要素内に記述します。
属性
<style 属性名="ここに値を指定"></style>
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 要素に共通して使用できるグローバル属性はこちら
使用例
<!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文書のヘッダ情報
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
1. TechAcademy(テックアカデミー)
2. CodeCamp(コードキャンプ)
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。