html css 入門

このドキュメントでは、Webページ作成の基本となるHTMLとCSSについて、入門者向けに解説しています。HTMLでWebページの構造を作成し、CSSでその見栄えを整える方法を、具体的なコード例を交えて説明します。まず、HTMLの基本的な要素（見出し、段落、リスト、リンクなど）と、それらを操作するためのタグの使い方を学びます。次に、CSSをHTMLに適用する方法、要素セレクター、クラスセレクター、子孫結合子、次兄弟結合子といったCSSセレクターを用いてスタイルを設定する方法、そしてリンクの状態に応じたスタイル変更やアクセシビリティへの配慮など、Webページ作成に必要なCSSの基礎知識を習得します。このドキュメントを通して、Webサイトの仕組み、HTMLとCSSの関係性、そしてWebページ作成の基本的な流れを理解し、実践的なスキルを身につけることができます。Visual Studio Code や Google Chrome といったツールの導入についても触れられており、学習の準備から実践までをサポートします。

1. html css 入門: HTML からはじめよう

HTMLはWebページの構造を作る言語です。<h1> (見出し)、<p> (段落)、<span> (インライン要素)、<a> (リンク)、<ul> (順序なしリスト)、<li> (リスト項目)、<em> (強調) などの要素を使って記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLサンプル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>段落テキスト。これは<span>span要素</span>です。</p>
  <a href="https://example.com">リンク</a>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</body>
</html>

2. html css 入門: 文書に CSS を追加

CSSはWebページの見栄えを整える言語です。HTMLファイルにCSSを適用するには、<link>タグを<head>内に記述するのが一般的です。

<link rel="stylesheet" href="styles.css">

styles.cssファイルには、以下のようにCSSルールを記述します。

h1 {
  color: red; /* 見出しの色を赤に */
}

3. html css 入門: HTML 要素のスタイル設定

要素セレクターを使って、HTML要素のスタイルを設定できます。

p {
  color: green; /* 段落の色を緑に */
}

p, li {  /* 段落とリスト項目の色を緑に */
  color: green;
}

4. html css 入門: 要素の基本的なふるまいを変える

ブラウザにはデフォルトのスタイルが設定されていますが、CSSで上書きできます。例えば、リストの箇条書きを消すには、以下のように記述します。

li {
  list-style-type: none;
}

5. html css 入門: クラスの追加

特定の要素にだけスタイルを適用したい場合は、class属性を使います。

<p class="highlight">強調表示された段落</p>

.highlight {
  background-color: yellow;
}

要素セレクターと組み合わせることも可能です。

p.highlight {
  font-weight: bold;
}

6. html css 入門: 文書内の場所に基づくスタイル設定

子孫結合子や次兄弟結合子を使って、文書内の特定の場所にスタイルを適用できます。

ul li { /* ul要素内のli要素 */
  font-style: italic;
}

h1 + p { /* h1要素の直後のp要素 */
  font-size: 1.2em;
}

7. html css 入門: 状態に基づくスタイル設定

リンクなどの要素は、状態によってスタイルを変えることができます。

a:link { color: blue; }    /* 未訪問リンク */
a:visited { color: purple; } /* 訪問済みリンク */
a:hover { text-decoration: underline; } /* ホバー時 */

8. html css 入門: セレクターと結合子を組み合わせる

複数のセレクターや結合子を組み合わせて、より複雑なスタイル設定が可能です。

body > h1 + p .highlight {
  color: red;
}

9. html css 入門: まとめ

このドキュメントでは、HTMLとCSSの基本的な使い方を解説しました。Web制作を始めるための第一歩として、これらの技術を理解することは非常に重要です。

さらに学ぶには、以下のリンクを参照してください： MDN Web Docs: HTML
MDN Web Docs: CSS