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

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

ヘッダーの作成

ヘッダーを完成させよう

それではまずは、ヘッダーから完成させていきましょう。

ヘッダーの出来上がりイメージとソースコードは、以下のようになります。

[HTMLの記述例]
ヘッダーの記述例
[完成図]
ヘッダーの完成図

テキストの入力

はじめに、ヘッダーの上部に表示されているテキストの入力から行っていきましょう。
「index.html」をテキストエディタで開きます。

index.htmlを開いた図

<header>と</header>の間に、<h1>すべて手作り!安心の国産素材だけを厳選した、さきちんカフェです。</h1>とテキストを入力します。

[入力するコード]
<header>
<h1>すべて手作り!安心の国産素材だけを厳選した、さきちんカフェです。</h1>
</header>
[HTMLの記述例]
テキストの入力例

入力が完了したら一旦ファイルを保存しておきましょう。

フォントサイズに注意!

ここで注意したいのが、「h1」のフォントサイズです。

<h>要素は「見出し」となるため、通常よりも大きく目立つように表示されてしまいます。
※h要素を忘れてしまった場合は「見出しの入力」を開いて思い出しましょう。

とくに<h1>は一番大きな見出しレベルのため、このままだとテキストが大きく表示されてしまいます。

h1のフォントサイズについて

適切な大きさにするために、CSSを使って<h1>のサイズを整えましょう。

覚えておきたいポイント

見やすいソースコードにしよう

これからヘッダーだけでなく、他の箇所にもHTMLを記述していきます。
ソースコードが複雑になってきますので、自分でわかりやすいように改行やインデント、コメントアウトなどをつけていきましょう。

h1を小さく表示させるスタイルを用意する

<h1>を小さく表示させるには、新たにスタイルを作成する必要があります。
テキストエディタで「style.css」を開いて、スタイルを作成しましょう。

CSSファイルを開く

開いたら「wrap」の上に数行あけて、以下のスタイルを入力します。

[h1を小さくするスタイル]
h1 {
font-size:0.9em;
margin:0px;
}

直接に<h1>適用するので、「.」も「#」も必要ありません。そのままh1と入力しましょう。

文字の大きさを0.9emに指定し、領域間余白を0に指定します。
※<h>要素は初めから領域間余白を持っているので、ここで0に指定しないと不自然なスペースが空いてしまいます。

[CSSの記述例]
h1スタイルの作成

入力が完了したら保存しましょう。
これで<h1>を小さく表示するスタイルの完成です。

ブラウザで確認

一旦ここで、ブラウザ確認をしてみましょう。
入力したh1テキストが小さく表示されていればOKです。

[ブラウザでの表示例]
h1テキストの確認

問題なく表示されたでしょうか?
次は「さきちんカフェ」のロゴ画像を挿入してみましょう。

覚えておきたいポイント

文書は見やすく、読みやすく

<h1>のスタイルは必ずwrapの上である必要はなく、どこに入力してもOKです。
自分でわかりやすく、管理しやすい位置へ入力しましょう。
カテゴリー別などで分けて記述しておけば、後ほど修正・編集する際に見つけやすく便利だと思います。

ヘッダーに画像を挿入しよう

画像を挿入するには、<img>タグを使います。
※imgを忘れてしまった場合は、「画像の挿入・表示」を見て思い出しましょう。

<h1>の下に<img>タグを入力し、画像を表示させます。

[入力するコード]
<header>
<h1>すべて手作り!安心の国産素材だけを厳選した、さきちんカフェです。</h1>
<img src="img/logo.jpg" alt="さきちんカフェ、ロゴマーク">
</header>
[HTMLの記述例]
画像の挿入

ロゴマークの画像は「img」フォルダから呼び出すため、img/を付けてから、ロゴマークのファイル名である「logo.jpg」を入力します。

さらにalt属性をつけ、どういった画像であるかの説明を入力します。

入力が完了したら、「index.html」ファイルを保存しましょう。

ブラウザで確認してみよう

「index.html」「style.css」共に入力が完了したら、「index.html」をブラウザで確認してみましょう。
以下のように表示されていれば成功です。

ヘッダーの確認画像

<h1>も小さく表示され、画像もバッチリ表示されていますね!
h1テキストの文字色が完成サンプルと異なりますが、こちらは後ほどスタイルを指定するので問題ありません。

もし、上記画像と違うように表示された場合、どこかが間違っている可能性があります。
もう一度よく見なおしてみましょう。

覚えておきたいポイント

画像の保存場所に注意しよう

さきちんカフェのロゴ画像は「img」フォルダの中に保存されているので、「img/」を付けてファイル名を指定します。
同じフォルダ内に画像があれば、「img/」は必要ありません。

alt属性を入力しよう

できるだけalt属性は付けるようにしましょう。画像が表示されない場合に、何の画像であるかを説明することができますし、GoogleやYahooなどの検索エンジンからもホームページや画像が認識されやすくなります。

メニューの作成
« 前のページへ 【STEP.4】トップページの制作

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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