ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

HTMLファイルの作成

HTMLファイルを用意しよう

2カラムレイアウトに必要なスタイルは全て揃ったので、次はHTMLファイルを作成しましょう。

作成したHTMLファイルに、HTMLやCSSを入力して2カラムレイアウトを組み立てていきます。

2カラムレイアウトの作成

これまでのようにHTMLファイルを作成し、基本構文を入れ、CSSファイルと紐付けしてUTF-8Nとして保存しましょう。

覚えておきたいポイント

学習内容を思い出せない場合は

学習内容を忘れてしまった場合には、前に戻って思い出しましょう。メニューリストや検索ウィンドウからキーワードで指定してページを探すことができます。

HTMLファイルを新規作成する

それではさっそく、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ファイルの入力例

タイトルの入力

次に、タイトルを入力しましょう。

この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ファイルとの紐付け

作成した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ファイルを保存しましょう。

HTMLファイルを保存する

いつものように、文字コードを「UTF-8N」で保存しましょう。

step.1

ファイルメニューの「文字/改行コード指定保存」から「UTF-8N」を選択して保存します。
なお、保存先は「cafe」フォルダを指定します。

保存方法
文字コードの指定

step.2

「cafe」フォルダを指定し保存しましょう。
「index.html」と名前を付けて保存します。

名前を付けて保存
保存の確認

これでHTMLファイルの作成は完了です。
以後はこのHTMLファイルにHTMLやCSSを書き加えて、ホームページを作成していきます。

覚えておきたいポイント

紐付けを忘れずに!

新規作成したHTMLファイルと、既存のstyle.cssの紐付けを忘れないようにしましょう。
紐付けができていないと、どんなにスタイルを用意してもHTMLファイルに呼び出すことができません。

文字コードに注意

HTMLファイルやCSSファイルを保存する際には、必ず「UTF-8N」で保存するようにしましょう。
「UTF-8N」が選べないテキストエディタを使用している場合は「UTF-8」で保存し、「BOMを付けない」設定で保存してください。

レイアウトを組み立てる
« 前のページへ footerスタイルの作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。