VIDEO LESSON

HTMLのstyleタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の二十一本目は、スタイルタグです。
0:06これまで色や余白はシーエスエスで整えると学んできましたが、そのシーエスエス自体はどこに書くのでしょうか。
0:13方法の一つが、このスタイルタグです。
0:15エイチティーエムエルファイルの中に直接シーエスエスを書き込むことで、そのページの見た目をその場で決められます。
0:23今回は、置き場所、基本の書き方、記事のお知らせの例、外部シーエスエスとの使い分けまで、
0:26初心者向けに順番に解説します。
0:30仕組みが分かると、シーエスエスの置き場所で迷わなくなります。
0:34小さな仕組みですが、すべてのページの見た目づくりの入口になるタグですので、
0:38ここでしっかり押さえておきましょう。
0:41まず、どんな場面で使うかを整理しましょう。
0:45向いているのは、そのページでしか使わない、小さなスタイルです。
0:49たとえば、キャンペーンページだけのお知らせの色や、練習でちょっと試したい指定などです。
0:56逆に、サイト全体で何度も使う決まりを、ページごとにコピーして書き続けると、
1:01直すときに全部のページを探すことになります。
1:05記事も、複数ページで共通にするなら外部シーエスエスへ分けると管理しやすくなります、
1:09と伝えています。
1:13便利だから何でも入れるのではなく、小さく、そのページ限り、という目安で選びましょう。
1:19基本の書き方です。
1:21スタイルは開始タグと終了タグを明示し、その間にシーエスエスのルールを書きます。
1:26置き場所は、文書の情報をまとめるヘッドの中が基本です。
1:30本文を表すボディの中に置くのではありません。
1:34コード例では、ノーティスというクラスへの指定を、ヘッドの中のスタイルに書いています。
1:40中に書く文法は、ふだんのシーエスエスとまったく同じで、セレクターと波括弧、
1:44プロパティと値の組み合わせです。
1:48まずはこの形を写して、保存後に再読み込みし、指定が効くか確認してみましょう。
1:53ヘッドは画面には直接表示されませんが、ページの土台を決める大切な場所だということも、
1:57合わせて覚えておきましょう。
2:02記事の活用事例を見てみましょう。
2:04お知らせの文章に、余白と淡い背景色を付ける例です。
2:09スタイルの中では、ノーティスというクラスに対して、内側の余白を一レム、背景色を指定しています。
2:17本文側では、段落にクラスとしてノーティスを付けます。
2:21この二つが名前でつながることで、初めて見た目が変わります。
2:26試すときは、練習用ファイルのヘッドにスタイルを、ボディに段落を置いて保存し、
2:32再読み込みしてお知らせの背景が変わるか確認してください。
2:38クラス名の綴りが一文字でも違うと効かないので、そこも丁寧に見比べましょう。
2:44次は、メディア属性です。
2:46スタイルタグには、どんな条件のときにこのスタイルを適用するかを、メディア属性で指定できます。
2:53記事の例は、画面の幅が四十八レム以上のとき、という条件です。
2:58広い画面では余白を広くし、狭い画面では別の指定を使う、といった切り替えが可能になります。
3:05書き方はメディアクエリと呼ばれる形式で、括弧の中に条件を書きます。
3:10条件を付けない場合は、常にそのスタイルが適用されます。
3:14最初は条件なしで慣れてから、必要になったときにメディア属性を足す、という順番で大丈夫です。
3:21外部シーエスエスとの違いも押さえましょう。
3:24外部シーエスエスは、スタイル専用の別ファイルを作り、リンクタグで読み込む方法です。
3:31多くのページで同じファイルを共有できるので、サイト全体の色やレイアウトを一か所で直せます。
3:37一方、スタイルタグはそのエイチティーエムエルの中にだけ存在し、ほかのページからは使えません。
3:44迷ったら、ほかのページでも使う決まりは外部ファイルへ、そのページだけの小さな指定はスタイルタグへ、
3:49と分けて考えてください。
3:53この使い分けが、管理しやすいサイト作りの第一歩になります。
3:58スタイルの属性を整理します。
4:00主に使うのは二つです。
4:02メディアは、先ほど紹介した適用条件です。
4:05ノンスは、セキュリティの仕組みであるシーエスピーが、許可したスタイルかどうかを識別するための値で、
4:12サーバー側の決まりと一致させ、固定の秘密のように使い回してはいけません。
4:19普段の学習では意識しなくて大丈夫です。
4:23このほか、アイディーやクラス、ラング、データ属性といった共通属性も使えますが、
4:27属性一覧は実用上の主な項目だけです。
4:32まずはメディアだけ覚えれば十分です。
4:35属性はたくさん付けるものではなく、必要なときだけ最小限に使う、という姿勢が読みやすいコードにつながります。
4:44スタイルが効かないときの確認ポイントです。
4:47一つ目は、クラス名の一致です。
4:50スタイル側で書いたクラス名と、本文の要素に付けたクラス名が、一文字でも違うと指定は届きません。
4:57二つ目は、波括弧やセミコロンの書き忘れです。
5:01閉じ括弧が一つ足りないだけで、その後の指定まで効かなくなることがあります。
5:06三つ目は置き場所で、スタイルがヘッドの中にあるか、終了タグを閉じているかを確認しましょう。
5:14開発者ツールのエレメンツで構造を眺めると、間違いの場所に気付きやすくなります。
5:20焦らず、上から順に確かめるのが近道です。
5:23注意点と、よくある間違いを確認します。
5:26一つ目は、詰め込みすぎです。
5:29スタイルタグに大量のシーエスエスを書くと、ファイルが読みにくくなり、直したい場所を探すのも大変になります。
5:39大きくなる前に外部ファイルへ移しましょう。
5:42二つ目はコピーの繰り返しで、同じ指定を何ページにも貼ると、修正漏れの原因になります。
5:50三つ目は表示確認で、三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けたり重なったりしないか確かめてください。
6:01見た目を変えるときは、意味を持つタグの選択とシーエスエスの指定を分けて考える、
6:06という記事の考え方も大切です。
6:11ブラウザー互換性を確認します。
6:13記事が参照するエムディーエヌの記録では、スタイル本体は、クロームが一以降、
6:19エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。
6:25メディア属性も、同じく古くから主要ブラウザーで使えます。
6:29数字がとても小さいことから分かる通り、昔からある基本の仕組みなので、現在の環境では安心して使えます。
6:36ただし、これは要素本体の対応開始の記録であり、細かな表示まで保証するものではありません。
6:43大切なページでは、スマートフォンでも一度表示を確認しましょう。
6:48新しい属性を使うときは、本体とは別に対応状況を確認する、という習慣も一緒に身に付けておくと安心です。
6:55最後に練習とまとめです。
6:57スタイルは、エイチティーエムエルの中にシーエスエスを書くタグでした。
7:03大切なポイントは三つです。
7:05一つ目は、置き場所はヘッドの中であること。
7:08二つ目は、そのページだけの小さなスタイルに向いていて、共通の決まりは外部シーエスエスへ分けること。
7:16三つ目は、メディア属性で画面幅などの条件を付けられることです。
7:21練習として、お知らせの段落を一つ作り、スタイルで背景色と余白を付けて、ブラウザーで表示を確認してみてください。
7:30お疲れさまでした。
7:31次回は、文字を太く強調する、ストロングタグを学びましょう。

この動画で学べること

styleタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。HTML内にCSSを書きます。複数ページで共通にするなら外部CSSへ分けると管理しやすくなります。

解説記事・サンプルコードを読む：HTMLのstyleタグとは？属性・使い方・ブラウザー互換性と活用例 →