実際にスタイルシートを使ってみよう！(基本のページ)

HTMLでも使ったこのデザインで勉強していきます。
デザインセンスは、すごくダサイですが（笑）
まず、左のような基本的なHPを作ってみましょう！

ファイルの保存方法

まず、HPを作る前にファイルの保存について説明します。（知っている方は次の「スタイルシートの基本」へ）

メモ帳でHTMLファイルを作成し、ファイルを保存するには、
メモ帳の「メニューバー－ファイルの保存」で、名前を付けて保存をクリックし、保存をしますが、必ずファイルの種類を「すべてのファイル」に変更して、半角英数字のファイル名と拡張子.htmlをつけて「ファイル名.html」となるようにファイル名を付けてください。

注意！ファイル名に「日本語」「空白」は使用しないようにしてください。

HPを作成するときの決まりとして、トップには必ず「index.html」もしくは「index.htm」のファイル名をつけてください。

ファイル名には、スペースを含まないように気をつけてください。
どうしても、ファイル名を区切りたい場合は「＿」（アンダーバー）で区切るようにしてください。

ケーキの画像はリンクの上、もしくは画像をクリックして表示させた後、画像の上で右クリックをし
「対象をファイルに保存」でダウンロードしてください。

ケーキ画像はこちら

※拡張子を表示させるにはこちらを参照してください。

スタイルシートの基本

まず、スタイルシートのタグの基本は、以下の通りです。

＜例題1＞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>タイトル</title>
</head>
<body>

本文

</body>
</html>

これが、基本のタグです。
このタグはHTMLを表示するために必ず必要なタグです。

まず、一番初めの

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

は、DOCTYPE（文書型宣言）と言って、HTMLのバージョンを宣言する文章です。
定型文のようなものです。（詳しい説明は省きます）
スタイルシートを使う場合は必ず書くようにしましょう。

は、<html lang="ja-JP">からHTMLが始まって、</html>までがHTMLですよという宣言です。
「 lang="ja-JP"」は日本語を使いますという宣言のようなものです。できるだけ書くようにしましょう。

この間はヘッダ部分になります。
主にタイトルや次のような「metaタグ」を記述します。

このmetaタグは「シフトJISを使っています」「テキストデータですよ」という意味です。
日本語のタイトルをつける場合は、必ずこのmetaタグの後にタイトルを書いてください。

<title>　と　</title>　の間にHPのタイトルを書きます。
この部分に書いてある文字が、ブラウザのタイトルバーに表示されます。

<body>　と　</body>の間にHPの本文を書きます。
この部分がHPの内容として表示されます。

HTMLタグは大文字、小文字に関係なく動作しますが、大文字、小文字の混在は避けましょう。
なるべく小文字にそろえてください。

スタイルシートはすべて小文字で記述します。

ファイルの保存

では、これから実際に作っていきましょう！（ファイルの保存がわかる方は次へ）

まず始めに、＜例題1＞のHTMLタグの基本をメモ帳にコピーペーストしてください。

次に、ファイル名を「index.html」とつけて適当な場所に保存してください。
「MyHP」などHP用のフォルダを作って保存しておくのがいいですね。

では、保存したファイルのあるフォルダを開いて、index.htmlファイルをダブルクリックしてください。
ダブルクリックが苦手な人は下にある「Tips」を参照してね。

このようにブラウザが起動しましたか？

うまく出来ていれば、タイトルバーに「タイトル」、内容の部分には「本文」と表示されているはずです。

では、先ほど作ったファイルを開いて編集してみましょう！

ファイルのあるフォルダを開き、ファイルの上で右クリックして、サブメニューから
「アプリケーションから開く」－「Notepad」を選択。
もしくは、メニューバーの「ファイル」－「アプリケーションから開く」－「Notepad」を選択します。

わからない場合は下の図のように、開いたメモ帳にファイルをドラッグアンドドロップをしてもファイルを開けます。

→次は、内容を書いていきましょう！

▲このページのトップに戻るTop

Tips

ダブルクリックが苦手な人っていませんか？
「ダブルクリックをしているのに、うまくファイルを開けない」
「ダブルクリックをしているのに、アプリケーションが起動しない」
「ダブルクリックをしたつもりなのにファイルが移動してしまう」
なんてことありませんか？

そういう時には、ダブルクリックではなく、クリック(シングルクリック)でファイルを選択し、ファイルが青くなったらそのままキーボードで「ENTER」キーを押しましょう。

どうですか？
アプリケーションが起動もしくはファイルを開けられましたか？