Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ CSSをHTMLに接続する | CSSのはじめ方
/
CSSの基礎

bookCSSをHTMLに接続する

メニューを表示するにはスワイプしてください

CSSのHTMLへの追加方法

CSSをHTMLドキュメントに適用する方法は3つあります:

  1. インラインスタイル;
  2. 埋め込みスタイルシート;
  3. 外部スタイルシート。

それぞれの方法は動作が異なり、使用される状況も異なります。

インラインスタイル

インラインスタイルは、HTML要素内でstyle属性を使って直接記述します。
例:

index.html

index.html

copy

このスタイルは、この特定の要素のみに適用。

インラインスタイルは手早く使用できるが、再利用できず、大規模なプロジェクトでは管理が難しい。

埋め込みスタイルシート

埋め込みスタイルシートは、HTMLドキュメントの <style> セクション内の <head> タグに記述。
例:

index.html

index.html

copy

この方法は、スタイルをページ全体に適用しますが、この1つのHTMLファイル内だけで有効です。

小規模または単独のページに便利です。

外部スタイルシート

外部CSSは、スタイルを別の .css ファイルに保存し、<link> タグを使ってHTMLに接続します。
例:

index.html

index.html

styles.css

styles.css

copy

この方法は、複数のページでスタイルを再利用することができます。

実際のプロジェクトにおいて推奨される、最も拡張性の高いアプローチです。

Note
まとめ

インラインスタイル:要素に直接適用され、再利用不可。

埋め込みスタイルシート:<head>内に記述し、1ページのみに適用。

外部スタイルシート:別の.cssファイルに保存し、再利用可能。ほとんどのプロジェクトで推奨。

このコースでは、主に外部スタイルシートを使用します。

question mark

HTMLドキュメントにスタイルを追加する方法にはどのようなものがありますか?

すべての正しい答えを選択

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  2

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  2
some-alt