MENU

HTML/CSSの基本

自分がHTML/CSSの復習するためにChatGPTにアウトライン書かせて記事化したものの一部です。

目次

HTML文書の構造

HTML(HyperText Markup Language)は、Webページの構造を定義するために使用されるマークアップ言語です。

基本的なHTML文書の構成

全てのHTML文書は、基本的な構成要素から成り立っています。これらの要素を正しく理解し、適切に使用することが、効果的なWebページを構築する鍵となります。

HTML文書は、<!DOCTYPE html>宣言から始まり、<html>タグで全体が囲まれます。<html>タグの内部には、<head>セクションと<body>セクションが含まれます。以下はその基本的な骨格です:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <!-- ここにコンテンツが入ります -->
</body>
</html>

文書宣言とHTML要素

<!DOCTYPE html>
<html lang="ja">
  • <!DOCTYPE html>: この宣言は文書がHTML5を使用していることをブラウザに伝えます。HTML文書の最初に記述し、HTML5の標準に従うことを示します。
  • <html>: HTML文書のルート(または最上位)要素です。lang属性を用いて文書の主言語を指定します。この例では、"ja"が日本語を意味します。

ヘッドセクション

<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
  • <head>: 文書のメタデータ、スクリプト、スタイルシートへのリンクなど、ページの見た目に直接影響しない情報を含みます。
  • <meta charset="UTF-8">: 文書の文字エンコーディングをUTF-8として指定します。これにより、世界中のあらゆる文字が正しく表示されるようになります。
  • <title>: ブラウザのタブに表示されるページのタイトルを指定します。SEO(検索エンジン最適化)においても重要な役割を果たします。

ボディセクション

<body>
    <!-- ここにページのコンテンツが入ります -->
</body>
  • <body>: ページのコンテンツを含むメイン部分です。テキスト、画像、動画、リンクなど、ユーザーに表示される要素がここに配置されます。

まとめ

HTML文書は、ブラウザがWebページを正しくレンダリングするための指示を提供するために、非常に構造化された形式で書かれています。<!DOCTYPE html>宣言から始まり、<html><head>、そして<body>という要素によって構成されています。この基本的な構造を理解し、適切に使用することは、効果的なWebデザインと開発の基礎となります。

基本的なタグとその使い方

HTML文書を構築する際には、さまざまなタグを使用してコンテンツの構造を定義します。このセクションでは、HTML文書において頻繁に使用される基本的なタグとその使い方について詳しく見ていきます。これらのタグを理解し、適切に使用することで、読みやすくアクセスしやすいWebページを作成することができます。

見出しタグ (<h1><h6>)

見出しタグは、文書の見出しやセクションのタイトルを示すために使用されます。<h1>から<h6>までの6レベルがあり、<h1>が最も重要な見出しを示し、<h6>に向かうにつれて重要度が下がります。一般的に、<h1>はページの主題を示すために1ページに1回だけ使用し、他の見出しタグはサブセクションの見出しとして使用します。

<h1>メインの見出し</h1>
<h2>サブ見出し</h2>
<h3>さらに小さい見出し</h3>

段落タグ (<p>)

段落タグ<p>は、テキストの段落を定義するために使用されます。このタグは、テキストを視覚的に区切り、読みやすくするために重要です。

<p>これは段落です。ここにテキストコンテンツが入ります。</p>

リンクタグ (<a>)

リンクタグ<a>は、ハイパーリンクを作成するために使用されます。href属性には、リンク先のURLを指定します。リンクを使用することで、ユーザーはクリックするだけで他のページやサイトに簡単に移動できます。

<a href="https://example.com">Example.comへのリンク</a>

リストタグ (<ul>, <ol>, <li>)

リストは情報を整理し、リスト形式で表示するのに役立ちます。順不同リストには<ul>を、順序付きリストには<ol>を使用し、リストアイテムは<li>タグでマークアップします。

<ul>
    <li>リストアイテム1</li>
    <li>リストアイテム2</li>
</ul>

<ol>
    <li>最初のアイテム</li>
    <li>二番目のアイテム</li>
</ol>

画像タグ (<img>)

画像タグ<img>は、Webページに画像を埋め込むために使用されます。src属性には画像のURLを指定し、alt属性には画像の代替テキストを提供します。代替テキストは、画像が表示されない場合や視覚障害者のユーザーが使用するスクリーンリーダーによって読み上げられます。

<img src="image.jpg" alt="説明テキスト">

まとめ

このセクションでは、HTML文書における基本的なタグとその使い方について紹介しました。見出し、段落、リンク、リスト、画像のタグは、Webページを構築する際の基礎となります。これらのタグを適切に使用することで、情報を効果的に整理し、ユーザーにとってアクセスしやすいコンテンツを作成することができます。

CSSの基本

CSS(Cascading Style Sheets)は、Webページの見た目とフォーマットを指定するために使用される言語です。HTMLがページの構造を定義するのに対し、CSSはその外見を装飾します。

CSSの適用

CSSをHTML文書に適用する方法は、スタイルをWebページに組み込むための基本的な技術です。主に3つの方法があります:インラインスタイル、内部スタイルシート、そして外部スタイルシート。各方法は特定の用途に適しており、その使用はプロジェクトの要件や開発者の好みによって異なります。重要な観点は以下です。

  • 再利用性: 外部スタイルシートを使用することで、スタイルを再利用し、コンシステントなデザインを保つことができます。
  • 保守性: スタイルを別のファイルに分離することで、コードの保守性が向上します。CSSファイルを更新するだけで、サイト全体の見た目を変更できます。
  • パフォーマンス: 外部スタイルシートはブラウザにキャッシュされるため、ページの読み込み時間を短縮することができます。

CSSをHTML文書に適用するこれらの方法を適切に使い分けることで、効率的かつ効果的にWebページをスタイリングすることができます。

インラインスタイル

インラインスタイルは、HTML要素に直接CSSスタイルを適用する方法です。style属性を使用して、個々の要素にスタイルルールを指定します。この方法は、小規模な変更には便利ですが、スタイルの再利用ができないため、大規模なWebサイトでは推奨されません。

<p style="color: blue; font-size: 16px;">これはインラインスタイルを使用したテキストです。</p>

内部スタイルシート

内部スタイルシートは、HTML文書内の<style>タグを用いて定義されます。通常、<head>セクション内に配置され、そのHTML文書内でのみ適用されます。ページ固有のスタイルを定義するのに適していますが、複数のページにわたってスタイルを共有する場合は効率的ではありません。

<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        p {
            color: red;
        }
    </style>
</head>

外部スタイルシート

外部スタイルシートは、スタイル情報を別のファイルに保存し、HTML文書からリンクする方法です。.css拡張子を持つCSSファイルにスタイルルールを記述し、<link>タグを用いてHTML文書の<head>セクション内でそのファイルを参照します。この方法は再利用性とメンテナンスのしやすさから、最も一般的に推奨される方法です。

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

styles.cssファイル:

body {
    background-color: #f0f0f0;
}
p {
    color: green;
}

セレクタ

セレクタは、スタイルを適用するHTML要素を指定します。セレクタには様々な種類があり、特定の要素、要素のクラス、ID、またはそれらの組み合わせを指定することができます。

要素セレクタ

要素セレクタは、特定のHTML要素にスタイルを直接適用します。例えば、すべての<p>タグにスタイルを適用したい場合、次のように記述します。

p {
    color: blue;
    font-size: 16px;
}

クラスセレクタ

クラスセレクタは、特定のクラス属性を持つ要素にスタイルを適用します。ピリオド(.)に続けてクラス名を指定します。

.intro {
    font-weight: bold;
}

IDセレクタ

IDセレクタは、特定のID属性を持つ要素にスタイルを適用します。ハッシュ記号(#)に続けてID名を指定します。

#header {
    background-color: gray;
}

プロパティと値

プロパティは、スタイルの種類を指定します(例: 色、フォントサイズ、マージンなど)。値はそのプロパティに設定する具体的な設定値です。プロパティと値はセミコロンで区切られ、プロパティと値の組み合わせはカーリーブレース({})で囲みます。

例:テキストの色とフォントサイズを設定

p {
    color: red; /* プロパティ: color, 値: red */
    font-size: 14px; /* プロパティ: font-size, 値: 14px */
}

スタイリングの基本

CSSを用いたスタイリングは、Webページに視覚的魅力を加える重要なプロセスです。色、フォント、レイアウトなど、さまざまな側面を調整することで、ユーザーにとって魅力的かつ読みやすいページを作成することができます。このセクションでは、スタイリングの基本に焦点を当て、効果的なWebデザインのための主要なCSSプロパティについて解説します。

色の指定 color/background-color

Webページの色彩は、ブランドのイメージを伝え、ユーザーの注意を引き、情報の階層を明確にする役割を果たします。CSSでは、テキストの色、背景色、境界線の色などを指定することができます。

  • テキストの色: color プロパティを使用して、テキストの色を指定します。
  • 背景色: background-color プロパティを用いて、要素の背景色を設定します。
body {
    color: #333; /* テキストの色をダークグレーに設定 */
    background-color: #f8f8f8; /* 背景色をライトグレーに設定 */
}

フォントとテキストスタイル font-family/font-size/text-align

読みやすさはユーザーエクスペリエンスの重要な要素です。CSSを用いてフォントの種類、サイズ、行間、テキストの揃え方を指定することで、テキストコンテンツの視覚的な魅力と読みやすさを向上させることができます。

  • フォントファミリー: font-family プロパティを使用して、テキストに使用するフォントを指定します。
  • フォントサイズ: font-size プロパティで、テキストのサイズを指定します。
  • テキストアラインメント: text-align プロパティを用いて、テキストの揃え方(左、中央、右)を指定します。
p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-align: justify;
}

ボックスモデル margin/border/padding

CSSのボックスモデルは、Webページ上の各要素がどのようにレイアウトされるかを定義する重要な概念です。各要素は、マージン、ボーダー、パディング、そしてコンテンツ自体の4つの部分から成り立っています。

  • マージン: margin プロパティを用いて、要素の外側の空間を指定します。
  • ボーダー: border プロパティで、要素の境界線のスタイル、幅、色を設定します。
  • パディング: padding プロパティによって、要素の内側の空間(コンテンツとボーダーの間)を指定します。
.box {
    margin: 20px;
    border: 2px solid #000;
    padding: 10px;
}
目次