はじめに
目的
この文書は、検索キーワード「webサイト html 表示」に関する調査結果を分かりやすくまとめた入門ガイドです。HTMLでの基本構造、よく使うタグ、作成したファイルをブラウザで表示する方法、既存ページのソース表示、さらにHTMLとCSSやJavaScriptの連携について順を追って解説します。
読者対象
これから自分のWebページを作ってみたい初心者の方を主な対象としています。プログラミング経験が少ない方でも読み進められるよう、専門用語は最小限に抑え、具体例を交えて説明します。
本書の使い方
各章は順番に読んで学ぶと理解が深まります。実際に手を動かしながら進めると効果的です。序盤では「index.html」という名前で保存してブラウザで開く基本を学びます。続く章で主要なタグや表示方法、他の技術との連携を学べます。
必要な準備
用意するものは次の通りです。テキストを編集できるソフト(メモ帳や無料のエディタ)、Webブラウザ(ChromeやFirefoxなど)、基本的なファイル操作の知識だけで始められます。
次の章から具体的なHTMLの書き方と表示方法を丁寧に解説していきます。
HTMLでホームページを作成する基本構造
概要
HTMLはWebページの設計図です。タグと呼ばれる記号で文の構造や見出し、画像などを指定します。最初に基本テンプレートを用意すると作業が楽になります。
基本テンプレート
以下が最小限のテンプレート例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>
表示したい内容をここに書きます。
</body>
</html>
各部分の役割
- <!DOCTYPE html>:文書がHTML5であることを示します。
- :ページ全体を包む要素です。lang属性で言語を指定します。
- :文字コードやタイトル、外部ファイルの指定を置きます。画面には直接表示されません。
- :文字化けを防ぐための宣言です。
:ブラウザのタブに表示される名前です。 - :実際に画面に出る内容を入れます。見出しや段落、画像などを置きます。
実例(簡単な文章)
内に
見出し
段落です。
と書くと見出しと段落が表示されます。
### 保存と確認のコツ
ファイル名はindex.htmlなど拡張子を.htmlにします。テキストエディタでUTF-8保存し、ブラウザで開けば表示を確認できます。
## 主要なHTMLタグの説明
### 見出しタグ(h1〜h6)
見出しは文書の階層を示します。h1が最も重要で、h2→h3と下がります。例: `
サイトのタイトル
`。視覚だけでなく構造化に役立ちます。
### 段落タグ(p)
文章の段落を囲みます。ブラウザは自動で改行と余白を付けます。例: `
これは段落です。
`。
### リストタグ(ol, ul, li)
順序付きは`ol`、順序なしは`ul`を使い、各項目を`li`で表します。例:
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
### リンクタグ(a)
別ページやファイルへ移動します。`href`属性で行き先を指定します。例: `例へ`。
### 画像タグ(img)
画像を表示します。`src`でファイル、`alt`で代替テキストを指定します。例: `
`。
### その他よく使うタグ(div, span)
`div`はブロック要素のまとまり、`span`は行内の小さなまとまりに使います。見た目はCSSで調整します。
各タグは役割を意識して使うと、見やすく保守しやすいHTMLになります。
## 作成したHTMLファイルをブラウザで表示する方法
以下では、作成したHTMLファイルを実際にWebページとして表示するための手順を分かりやすく説明します。
### 1. ファイルを保存する
– エディタで編集後、ファイル名を「example.html」のように拡張子 .html で保存します。
– 保存場所はデスクトップや任意のフォルダで構いません。
### 2. 方法1:フォルダからダブルクリックで開く
– 保存したファイルをエクスプローラー(Windows)やFinder(Mac)で見つけ、ファイルをダブルクリックします。
– 既定のブラウザでページが表示されます。
### 3. 方法2:右クリックでブラウザを指定して開く
– ファイルを右クリックし「プログラムから開く」や「このアプリケーションで開く」を選びます。
– Google Chrome、Microsoft Edge、Safariなどを選べば、そのブラウザで開きます。
### 4.方法3:ブラウザへドラッグ&ドロップ
– ブラウザのウィンドウを開き、保存したHTMLファイルをそのウィンドウへドラッグします。
– ドロップするとページが読み込まれます。複数ファイルを同時に開けます。
### 5.アドレス欄の確認(file://)
– ローカルファイルで表示すると、ブラウザのアドレス欄に「file:///」から始まるパスが表示されます。
– ファイルを編集したら保存して、ブラウザで再読み込み(F5)すると更新が反映されます。
### 6.補足:開発時の便利な方法
– エディタの拡張機能(例:Live Server)を使うと、自動でブラウザ表示や更新ができます。
– 初めての方はまずダブルクリックや右クリックで開く方法を試してみてください。
## 既存WebページのHTMLソースコードを表示する方法
公開されているWebページのHTMLコードは、ブラウザから簡単に確認できます。ここでは基本の方法と、より詳しく調べる手順を分かりやすく説明します。
### 1. ページのソースを表示(基本)
ページ上で右クリックして「ページのソースを表示(View Page Source)」を選びます。新しいタブに生のHTMLが表示され、文書の構造を一度に見ることができます。ただし、JavaScriptで後から追加された要素はここに反映されないことがあります。
### 2. ショートカットキー
– Windows/Linux: Ctrl + U
– macOS: ⌘ + U
ショートカットで素早く確認できます。
### 3. 開発者ツールで詳しく見る(おすすめ)
F12キー、または Ctrl + Shift + I(macOSは ⌘ + Option + I)で開発者ツールを開きます。Elements(要素)パネルで現在のDOMを階層表示し、リアルタイムでHTMLを展開・編集できます。CSSの適用状況やコンソールのエラー、ネットワークで読み込まれるファイルも確認できます。
### 4. 実際に見るポイント
– head内のmetaやtitle
– bodyの見出しやセクション構造(h1〜h6、section、articleなど)
– classやidの付け方
– 外部のCSSやJavaScriptの読み込み
– 画像やフォントのパス(Networkで確認)
### 5. 注意点
公開情報の閲覧は自由ですが、著作権や利用規約に注意してください。動的に生成される要素はソース表示と異なる場合があるので、開発者ツールで実際のDOMを確認すると確実です。
## HTMLとCSSおよびJavaScriptの連携
### 概要
Webページを完成させるには、HTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きを加えます。これらを適切に分離して連携させると、保守しやすく拡張しやすいサイトになります。
### CSSの組み込み方法
– 外部ファイル: をに置きます。最も一般的で推奨されます。
– 内部スタイル: … をに書き、小さなページ向けに使います。
– インライン: 要素の style 属性。緊急時のみ使用します。
### JavaScriptの組み込み方法
– 外部ファイル: を使うとHTMLの読み込み後に実行されます。asyncは非同期で実行順に注意が必要です。
– 内部スクリプト: … をページ末やでDOMContentLoadedを待って実行します。
### DOM操作とイベント
JavaScriptはDOM(HTMLの要素)を操作して見た目や動作を変えます。基本は次のような流れです。
– 要素を取得: document.getElementById(‘btn’) など
– イベントを追加: element.addEventListener(‘click’, function(){…})
– クラス操作: element.classList.add(‘active’), .remove(), .toggle()
例: ボタンでメニューを開閉する、といった動作を簡単に作れます。
### 簡単な例
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="btn">切替</button>
<script src="script.js" defer></script>
</body>
script.js では document.getElementById(‘btn’).addEventListener(‘click’, ()=>{ document.body.classList.toggle(‘open’); });
### 実践のヒント
– スタイルはCSS、振る舞いはJSに分けると管理が楽になります。
– 共通部分は外部ファイルにして再利用しましょう。
– パフォーマンスを意識して script は defer を使うか、DOMが準備できてから実行してください。












