はじめに
HTML の<style>タグは、Web ページにスタイルを追加するために使用されます。これらのスタイルは、さまざまな方法でウェブサイトの見た目や感じを変更することができます。この実験では、<style>タグを使用して、Web ページ全体で使用できるカスタムスタイルシートを作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。
HTML 構造の設定
まず、基本的な HTML 構造を設定しましょう。index.htmlファイルに、次の HTML コードを作成します。
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my Webpage</h1>
<p>This is my first paragraph.</p>
</body>
</html>
このコードは、ヘッダーと段落で構成される基本的な Web ページ構造を設定します。
インラインスタイルの追加
Web ページにスタイルを追加する最初の方法は、HTML 要素のstyle属性に直接追加することです。このステップでは、h1ヘッダーにインラインスタイルを追加します。h1要素に次の属性を追加します。
<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>
このスタイルは、フォントサイズを大きくし、ヘッダーの色を青に変更します。
埋め込みスタイルの追加
<style>タグは、Web ページに埋め込みスタイルを追加するために使用されます。このタグ内に複数のスタイルを追加できます。このステップでは、埋め込みスタイルを使用してp要素にスタイルを追加します。<head>タグ内に、次のコードを追加します。
<style>
p {
color: green;
font-size: 18px;
}
</style>
このスタイルは、段落に緑色を追加し、フォントサイズを 18px に減らします。
CSS クラスの使用
CSS クラスは、一度に複数の要素にスタイルを適用するために使用されます。このステップでは、Web ページ全体で再利用できる汎用的な警告メッセージ用のクラスを作成します。このコードを<style>タグに追加します。
<style>
.warning {
color: red;
background-color: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
このコードは、黄色の背景色、黒い枠線、赤い文字色を含む警告メッセージ用のスタイルを作成します。
次に、このクラスをh1ヘッダーに適用します。h1要素を変更して、クラスを含めます。
<h1 class="warning">Welcome to my Webpage</h1>
このステップでは、ヘッダーに警告スタイルが追加されます。
外部スタイルシートの追加
外部スタイルシートは、HTML コンテンツからスタイルシートを分離するために使用されます。このステップでは、複数の Web ページで再利用できる外部スタイルシートを作成します。
style.cssという名前の新しいファイルを作成します。style.cssに、次のコードを追加します。
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.warning {
background-color: green;
}
このコードは、h1要素とp要素のスタイルを設定し、warningクラスの背景色を緑に変更します。
この外部スタイルシートをindex.htmlページにリンクするには、<head>タグに次のコードを追加します。
<link rel="stylesheet" type="text/css" href="style.css" />
この行は、style.cssファイルをindex.htmlページにリンクします。
メディアクエリの追加
メディアクエリは、異なるデバイスサイズに対して異なるスタイルを適用するために使用されます。このステップでは、メディアクエリを使用して要素のフォントサイズを調整します。このコードをstyle.cssファイルに追加します。
@media (max-width: 600px) {
h1 {
font-size: 36px;
}
p {
font-size: 18px;
}
}
このコードは、幅が 600px 以下の画面サイズに対して、h1のフォントサイズを 36px に、pのフォントサイズを 18px に調整します。
セレクタの追加とネスト
このステップでは、CSS の 2 つの高度な概念であるセレクタとネスティングを紹介します。
advanced.cssという名前の新しいファイルを作成します。advanced.cssに、次のコードを追加します。
header h1 {
color: blue;
font-style: italic;
}
main p {
color: red;
}
このコードは、header要素内のh1要素を選択し、青い色と斜体のフォントスタイルを適用します。また、main要素内のp要素を選択し、赤い色を適用します。
この外部スタイルシートをindex.htmlページにリンクするには、<head>タグに次のコードを追加します。
<link rel="stylesheet" type="text/css" href="advanced.css" />
この行は、advanced.cssファイルをindex.htmlページにリンクします。
まとめ
この実験では、Web ページにスタイルを追加するためのさまざまな方法を学びました。最初にインラインスタイルと埋め込みスタイルを使用し、次に CSS クラスと外部スタイルシートに移りました。また、メディアクエリ、セレクタ、およびネスティングについても学びました。これらの方法を使用することで、Web ページ全体で使用できるカスタムスタイルシートを作成し、現代的で応答性の高いウェブサイトを作成することができます。
