たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座   STEP1 HTMLファイルとCSSファイル


メニュー

ホームページ作成に必要な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>
<p>内容</p>
</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>で囲まれ、 さらに<p>〜</p>で囲まれた部分「内容」を変えてみます。

ソースコード(変更前)

<body>
<p>内容</p>
</body>


ソースコード(変更後)

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


表示

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


step_up1

ブラウザでの表示についてはHTMLファイルを作成し、ブラウザで表示するを参照してください。

ez-HTMLの使い方:
■HTMLファイルを編集する
■プレビューをする

このページのトップ

★背景の色

背景に色を全ページ共通で付けてみましょう。
文字の色も青にしてみます。
先ほど作成したCSSファイルに下記の内容を入れてみてください。

ソースコード(CSSファイル)

body {
background: #FFFF99; /* 背景は薄い黄色 */
color: Blue; /* 文字色は青 */
}


ソースコード(HTMLファイル)

<body>
<p>背景色と文字色を変えてみました。</p>
</body>


表示

背景色と文字色を変えてみました。


背景色と文字色を変える

ez-HTMLの使い方:
■スペシャルサイドバーから色の値を入力する


ステップ1で学んだ内容だけでホームページを作りました。ボタンをクリックしてください。 スタイルシートは、一度保存してからかまたは直接見てください。

▼STEP2へ

このページのトップ