logo

HTML/CSSを表示させる方法 【初心者向け】

準備

  • テキストエディタ (例: メモ帳, VSCode, Atom, Sublime Text)
  • ウェブブラウザ (例: Chrome, Safari, Firefox)

フォルダ構成

次のようにフォルダを作ってみましょう:

my-first-website/
                    ├── index.html
                    └── styles.css

my-first-website という名前のフォルダを作成し、その中に index.html と styles.css ファイルを保存します。

HTMLの準備

index.html ファイルに以下のコードを記述します：

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">   <!-- CSSを読み込ませる -->        
        <title>私の初めてのウェブページ</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
        <!-- 段落テキスト -->
        <p>ここにHTMLのサンプルコードをはりつけて練習してみよう！</p>
    </body>
</html>

POINT

  • <head>タグ内には、ページの設定や外部ファイルの読み込みを記述します。
  • <body>タグ内に、実際にページに表示される内容を記述します。
  • <link rel="stylesheet" href="styles.css">で、CSSファイルを読み込みます。

CSSの準備

styles.css ファイルに以下のコードを記述します：

body {
    color: #333; /* 文字色の指定 */
    margin: 0; /* 余白のリセット */
}

/* ここにCSSのサンプルコードをはりつけて確認してみよう！ */

}

POINT

  • bodyはページ全体に適用されるスタイルを指定します。
  • /* */で囲まれた部分はコメントで、ブラウザには表示されません。

表示と確認

すべてのファイルを保存し、ウェブブラウザで index.html を開いて結果を確認してみましょう。ページには「こんにちは、世界！」という見出しと段落が表示されます。

よくある質問

Q: ブラウザで index.html を開いてもスタイルが適用されていません。

A: CSSファイルのパスが正しいか確認してください。HTMLファイルとCSSファイルが同じフォルダにある場合、リンクタグの href は styles.css で正しいです。

Q: HTMLファイルに記述した日本語が文字化けしています。

A: <meta charset="UTF-8"> タグが正しく <head> 内に記述されているか確認してください。このタグはファイルの文字エンコードを指定します。

Q: CSSが反映されているかどうか確認する方法がわかりません。

A: ブラウザの開発者ツール（F12キー）を使って、スタイルが適用されているか確認できます。開発者ツールの「Elements」タブでHTML要素を選択すると、適用されているCSSを確認できます。