ホームページ作成講座 STEP1　HTMLファイルとCSSファイル（たまちゃんHTMLのおうち）

ホームページ作成に必要なHTMLファイルとCSSファイルを作ります

■STEP1　　HTMLファイルとCSSファイルサンプルを表示

★HTMLファイルの新規作成

HTMLファイルを作りましょう。
下のソースファイルを丸ごとコピーして、「Step.html」などと名前を付けて保存します。
コピーして使用できるようにするためインデントを付けていないので、見やすいように自分でインデントを付けてください。
ファイルの作り方については、「★HTMLファイルを作成し、ブラウザで表示する」を参照してください。
「下のソースコードがさっぱりわからない」という方は、「HTMLの基礎」をご覧ください。

ソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ステップアップ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
内容
</body>
</html>

ez-HTMLの使い方：
■ez-HTMLでHTMLファイルを作成する

参照
ブラウザを使ってHTML,CSS,JavaScriptのソースコードを閲覧する方法を説明しています。
★ソースコードを閲覧する

このページのトップ

★CSSファイルの新規作成

CSSファイルを作りましょう。
ファイル作成をして「style.css」と名前を付けて保存します。中身は最初は空でいいです。
上記ソースコードの「<link rel="stylesheet" href="style.css">」でHTMLファイルと結びつきます。

このページのトップ

★まずは、このタグを覚えて！（段落と改行）

最初に覚えておきたいタグがあります。

<div>～</div>	<div>～</div>で囲んだ範囲をひとかたまりとして、位置指定やスタイルシートを適用するなどのに用いる。いわゆる「ボックス」。自身は特に意味を持たない。ブロック要素（見出し、段落、リスト、フォームなどのひとつのまとまった単位）。改行はされない。
<span>～</span>	<span>～</span>で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用いる。自身は特に意味を持たない。インライン要素（文章の一部）。
<p>～</p>	Paragraph（段落）の略で、<p>～</p>で囲まれた部分がひとつの段落として、一般的なブラウザでは<p>～</p>の前後で1行分改行する。
<br>	Break（改行）の略で、テキストや画像等をブラウザ上で改行する。

このページのトップ

★HTMLファイルの編集

ブラウザに表示される内容は、基本的にHTMLファイルの<body>～</body>で囲まれた部分ですので、今後この部分にコードを書いていく流れになります。一方CSSファイルは、ブラウザに表示される内容をどのようなスタイルで表示するかを定義するファイルです。
まずは、HTMLファイルの内容を変更して、ブラウザで表示してみましょう。
「★HTMLファイルの新規作成」で作ったHTMLファイルの<body>～</body>で囲まれ、さらに～で囲まれた部分「内容」を変えてみます。

ソースコード（変更前）

ソースコード（変更後）

<body>
ここの部分を変えてみました。
</body>

表示

ここの部分を変えてみました。