今回は<head>内に書く【 内部CSS 】に注目し、書き方を紹介します！
CSSには「インラインCSS」「内部CSS」「外部CSS」という3つの書き方があります。今回はその中から、HTMLの<head>内にstyleタグを使って記述する「内部CSS」に注目！
初心者でも理解しやすいように、文字の色やサイズを変える実践コード付きで解説します。この記事を読めば、内部CSSを使った基本的なスタイル設定がすぐにできるようになりますよ。
関連記事👉超初心者み向け！CSSはどこに書くの⁈
内部CSSとは？外部CSSやインラインCSSとの違い
CSSには大きく分けて「インラインCSS」「内部CSS」「外部CSS」の3種類があります。
その中でも「内部CSS」とは、HTMLの<head>内に<style>タグを記述し、ページ全体にスタイルを適用できる方法のことです。
- インラインCSS：HTMLタグ内の
style属性に直接書く方法 - 内部CSS：
<head>内に<style>タグを書き込む方法 - 外部CSS：
.cssファイルを別途作成し、HTMLに読み込む方法
内部CSSは「外部ファイルを用意せず、ページ単位でスタイルをまとめたいとき」に便利です。
内部CSSとは、<head>内に <style>タグを作って書きます。
styleタグを使った内部CSSの基本的な書き方
内部CSSは、HTMLの<head>内に以下のように記述します。
H3: 基本コード例
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
📌 ポイント
<style>タグは必ず<head>内に書く- まとめて複数の要素にCSSを適用できる
- ページ単位でスタイルを統一したいときに便利
内部CSSでできること（実践例付き）
内部CSSを使えば、文字の色・大きさ・背景色などを自由に変更できます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
内部CSSを使うメリット・デメリット
内部CSSは便利ですが、使いどころを理解することが大切です。
H3: メリット
- HTMLファイル内にまとまるため、管理が簡単
- 外部CSSを準備する手間が不要
- ページごとに異なるデザインを設定できる
H3: デメリット
- ページごとにCSSを記述する必要があるため、複数ページのサイトでは管理が大変
- 外部CSSと比べると再利用性が低い
👉 小規模サイトや学習用のHTMLファイルでは内部CSSが最適ですが、大規模サイトでは外部CSSを使うのがおすすめです。
内部CSSの次に学ぶべきステップ
内部CSSを理解したら、次は 外部CSS にチャレンジしましょう。
外部CSSを使えば、複数のページに共通のデザインを簡単に適用できます。
🔗 関連記事：👉超初心者み向け！CSSはどこに書くの⁈
👉【HTML入門】class属性の使い方を初心者向けに分かりやすく解説！CSSでデザインを自由に変更しよう！
Summary
1 内部 CSS は <head> 内に <style> タグを作って記述します。
<タグ>と { が離れていて書き方が特殊に見えますが、こうする事で CSS が、縦にきれいに並び見やすくなっています。
- 内部CSSは、HTMLの
<head>内に<style>タグを使って記述する - ページ単位でスタイルをまとめたいときに便利
- 大規模なWebサイトでは外部CSSと使い分けるのが効果的
内部CSSを理解しておけば、次のステップである外部CSSもスムーズに学習できます。
次回は これで完璧！外部 CSS の作り方完全ガイド を紹介します
Comments