styleタグ・とは？初心者向けに解説するHTMLのスタイル入門共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

styleタグ・とは？

Webページの見た目を決めるCSSを、HTMLの中に直接書くためのタグが styleタグ です。HTMLは文書の構造を表す言語で、見た目の装飾は別のCSSという言語で扱います。styleタグを使うと、1つのHTMLファイルの中にCSSを閉じ込めておくことができ、ページを素早く試したいときに便利です。

注意点として、styleタグは通常head内に置くのが基本です。見た目を変える命令は CSS の記述なので、styleタグ自体は画面には表示されません。中身には CSS を書きます。

書き方の基本は次の通りです。

この例は、ページの背景色と段落の文字色を変えるだけのシンプルなものです。スタイルはセレクタとプロパティ:値の組み合わせという形で書きます。

内部CSSの特徴について覚えておくと良い点は、1つのHTMLファイルに CSS を閉じ込められるので、短いページのデザインを試すのに向いていることです。ですが、同じデザインを複数のページで使う場合には、外部ファイルを使った方が管理しやすくなります。

どこに書くかの話に戻ると、styleタグは通常 head 内に置くのが一般的です。なぜなら、ブラウザは多くの場合、先に CSS の情報を読み込み、表示を整えるためです。body 内に CSS を書く「インラインCSS」や、別ファイルとして CSS を読み込む「外部CSS」との使い分けを覚えておくとよいでしょう。

内部CSSと外部CSSの違いを、言い換えると次のようになります。

内部CSSの例	<style> h1 { color: red; } </style>
場所	head 内
メリット	その場で確認できる
デメリット	複数のHTMLファイルで同じデザインを使う場合は不便になる

実務では、スタイルは基本的に外部ファイルに置くことが多いです。外部CSSは複数のHTMLファイルで同じデザインを共有でき、変更も1か所で済みます。内部CSSは特定のページだけ異なるデザインにしたいときや、実験的な変更をすぐに試したいときに便利です。

練習をするときのコツとして、まずは色と背景色だけを変える練習をしてみましょう。次に、段落のフォントサイズや行間を調整するCSSプロパティを追加してみましょう。実際に手を動かしてコードを書き、ブラウザで表示を確認することが理解を深める最短の道です。

注意点として、CSS のシンタックスミスには気をつけましょう。セミコロンの抜け、波括弧の閉じ忘れなどは、スタイル全体の機能を壊してしまいます。丁寧に書く癖をつけると、後での修正も楽になります。

まとめとして、styleタグはCSSをHTMLに内包して管理する方便な機能です。使い分けのコツを覚えておけば、初心者でも簡単に見た目の調整を学ぶことができます。