【初めてのホームページ制作】#03 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ03

前回の【初めてのホームページ制作】#03 マネして作ってみよう!(手順解説付き)までは、HTMLの基本部分を作成し、実際にブラウザで文字まで表示できましたね。

まず手始めにはホームページのレイアウトを切り分けていきたいと思います。

ホームぺージを作る際に、最初に必ずといっていいほど、ホームページの画面構成を考えていかなければなりません。

ヘッダーの作成

サンプルサイトのレイアウトをざっくり分けて見てみると赤枠で囲ったような4つの画面構成になっているのがわかります。

手順001

手順001

<p>タグを使った文章の表示方法

まずは1番上の部分から作っていきたいと思います。

こちらの部分はホームページの1番頭なので『ヘッダー』と呼ばれる部分です。

ヘッダー部分を更に細かく見ていくと、3つに分けられると思います。

手順002

手順002

文字列が一行、ロゴは画像になっています。

後は、横に並んだリンクが2つありますね。

始めに文字列を入力してみましょう。最初、『Hello World』を表示させたときは『<p>』と『</p>』はついていませんでした。

これは、Pタグと呼ばれているタグです。
これからこのタグを使って見たいと思います。
P自体は、P要素と呼んでいます。

要素とは?

HTMLの要素については、この後説明がありますので、読み流して構いません。
P要素はParagraphの略で、直訳すると段落ということになります。基本的には文章を書くときは、Pタグを使うと覚えといてよろしいかと思います。

言い忘れていましたけど、HTMLはすべてタグと呼ばれる『<』と『>』に囲まれていなければなりません。開始タグと終了タグが一対となることがルールになっています。
Pタグの場合は開始タグがで<p>で、終了タグは</p>になります。終了タグには『/』がついていますよね?これが終了タグの意味になります。
※ちなみに要素は、半角で記述すること。

■HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<body>
		<p>カフェ ゆるらぎは東京都XX区にあるランチとスイーツがおいしいお店です。</p>
	</body>	
</html>

Ctrl+sでセーブして、ブラウザを再読み込み(リロード)してみましょう。

表示してみます。

手順003

手順003

HTMLコードの構造は、ツリー構造又は、木構造と呼ばれています。これらのHTMLのタグは親子関係が成り立ちます。
インデントすることで、どれが親要素で、どれが子要素なのかわかりやすく記述するのが普通です。

『インデント』とは、文章の頭に空白またはspaceキーで空白を挿入し、先頭の文字を右にずらす『字下げ』のことです。

HTMLコードの親子関係について別で記事にしました。→HTML【 要素の親子関係】をわかりやすく説明するよ!

HTMLを理解する上で重要な部分ですのでぜひ目を通しておきましょう。

<img>タグを使った画像の表示方法

次は店名である『カフェ ゆるらぎ』の画像を挿入をしてみましょう。

画像を挿入したいときに使う要素はimg要素を使います。
要素の説明の前に先に表示させてみましょう。
『</p>』の後ろで改行し、こちらのコードを張り付けてみてください。

■HTML

	<img src="images/logo.gif" alt="カフェ ゆるらぎ" />

ブラウザで表示させてみましょう。
表示できましたか?

手順004

手順004

ここでimg要素について説明していきたいと思います。
もし画像を表示できてなくてもこれから説明する内容を読めば表示できなかった原因がわかるかと思います。

手順005

手順005

上記の画像の説明をします。
img要素は特別な要素で終了タグがありません。ただし一番最後に『/』で閉じられなければいけません。img要素以外にも終了タグがないものがありますが、ここでは割愛したいと思います。
先ほども軽く要素について説明しましたが、HTMLの要素についてもう少し説明したいと思います。
要素は、タグ全体のことを指しています。そして要素名がimg要素となります。

先ほどのPタグもP要素と言い換えることができます。『属性』とは、開始タグの中に書くもので、タグの性質を『』で表現することです。

手順006

手順006

上記の画像の説明をします。
現在作成中のHTMLファイルは『index.html』ファイルでしたね。それはsampleフォルダの中に入っています。『index.html』にロゴ画像を表示させたいのなら

images』フォルダの中にあるファイル名が『logo.gif』の画像を指定してあげる必要があります。

手順007

手順007

index.html』から辿ると『images→logo.gif』また『』は『/』(スラッシュ)に置き換えてあげましょう。『/』(スラッシュ)で区切ってあげることがルールとなっていますので。

もし、表示できなかった人は、上記のことを参考にしてみるとちゃんと表示できると思います。sampleフォルダのフォルダ構成を変えてしまった人はそのフォルダ構造に合わせて指定してあげてください。基本的にsampleフォルダの構造はそのままの方が後々やりやすいでしょう。

ちなみにファイルの場所を単純に『ファイルパス』と呼び、ファイルパスの指定方法には2つの方法があります。今回のファイルパスの指定方法を『相対パス』と言います。

もう1つの方法を『絶対パス』といいます。

この辺の話になると長々となってきますので・・・。もし詳しく知りたいのでしたらこちらscene-live.comさんの説明が非常にわかり易いですので参考にしてみてください。

第3回ではPタグとimgタグを使って文章と画像の表示を行いました。

また、Pタグは『ブロック要素』,imgタグは『インライン要素』に切り分けることができます。『ブロック要素』と『インライン要素』については一覧表を記事にしましたのでこちらを参考にしてみてくださいね。→HTML【ブロック要素とインライン要素】の一覧表

第4回では>CSSを使って横並びのリストとリンクの設定をコーディングしていきます!

【初めてのホームページ制作】#04 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ03

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA