ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
2カラムレイアウトに必要なスタイルは全て揃ったので、次はHTMLファイルを作成しましょう。
作成したHTMLファイルに、HTMLやCSSを入力して2カラムレイアウトを組み立てていきます。
これまでのようにHTMLファイルを作成し、基本構文を入れ、CSSファイルと紐付けしてUTF-8Nとして保存しましょう。
学習内容を忘れてしまった場合には、前に戻って思い出しましょう。メニューリストや検索ウィンドウからキーワードで指定してページを探すことができます。
それではさっそく、HTMLファイルを作成しましょう。
まずはテキストエディタを起動します。
起動したら、「表示」「編集モード」から「HTML」を選択します。
次に、HTMLの基本構文を入力します。
宣言文、言語コード、文字コード、Headセクション、Bodyセクションなどを入力します。
※忘れてしまった場合は【宣言文の入力】を見て思い出しましょう。
[HTMLの記述例]<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
次に、タイトルを入力しましょう。
このHTMLファイルは「さきちんカフェ」のトップページになりますので、タイトルタグに「さきちんカフェ」と入力します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>さきちんカフェ</title> ←タイトルを入力
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
作成したCSSファイル「style.css」との紐付けを行いましょう。
Headセクション内にlink要素を入力し、HTMLファイルとCSSファイルを紐付けます。
[HTMLの記述例]<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"> ←link要素を入力
<title>さきちんカフェ</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
これでHTMLファイルの作成は完了です。
次はこのHTMLファイルを保存しましょう。
いつものように、文字コードを「UTF-8N」で保存しましょう。
ファイルメニューの「文字/改行コード指定保存」から「UTF-8N」を選択して保存します。
なお、保存先は「cafe」フォルダを指定します。
「cafe」フォルダを指定し保存しましょう。
「index.html」と名前を付けて保存します。
これでHTMLファイルの作成は完了です。
以後はこのHTMLファイルにHTMLやCSSを書き加えて、ホームページを作成していきます。
新規作成したHTMLファイルと、既存のstyle.cssの紐付けを忘れないようにしましょう。
紐付けができていないと、どんなにスタイルを用意してもHTMLファイルに呼び出すことができません。
HTMLファイルやCSSファイルを保存する際には、必ず「UTF-8N」で保存するようにしましょう。
「UTF-8N」が選べないテキストエディタを使用している場合は「UTF-8」で保存し、「BOMを付けない」設定で保存してください。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。