HTML ドキュメントのスタイルガイド

はじめに

HTMLの<style>タグは、Webページにスタイルを追加するために使用されます。これらのスタイルは、さまざまな方法でウェブサイトの見た目や感じを変更することができます。この実験では、<style>タグを使用して、Webページ全体で使用できるカスタムスタイルシートを作成する方法を学びます。

注：index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080タブを更新してWebページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/basic_elems -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/head_elems -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/viewport -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/text_head -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/layout -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/doc_flow -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/inter_elems -.-> lab-70845{{"HTML ドキュメントのスタイル"}} html/templating -.-> lab-70845{{"HTML ドキュメントのスタイル"}} end

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ページ全体で使用できるカスタムスタイルシートを作成し、現代的で応答性の高いウェブサイトを作成することができます。