ホームページ制作前に知っておきたいこと

HTMLとCSS
スポンサーリンク
スポンサーリンク

ホームページの基本

・ふだんChromeなどのブラウザで見ているものは全てホームページ(YouTube、Amazon、Twitterなどもホームページ)
・ホームページは、HTML(エイチ・ティー・エム・エル)という言語で作成されている。
・ホームページは、CSS(シー・エス・エス)という言語で装飾されている。

ホームページ制作に使用するソフト

・Windowsのメモ帳(慣れてきたら、フリーのエディタをインストールします)
Chrome(Googleのブラウザ) – サイト制作に適した機能が豊富なため利用します

押さえておきたい用語

HTMLとは?

Hyper Text Markup Languageの略。ホームページの構造を記述したもの
・HTMLを人に例えるなら「骨格」に相当する
・例としてChromeでサイト閲覧中、CtrlUキーを押すと、そのページのHTMLを閲覧できる(ぜひ見てみてください!)
・HTMLファイルの拡張子は、「html」または「htm

CSSとは?

Cascading Style Sheetの略。ホームページの見た目部分(色、フォント、レイアウト等)を記述したもの
・CSSを人例えると、肉体や服装
・現在の最新バージョンは3であり、CSS3と呼ばれている
・CSSファイルの拡張子は、「css

タグについての決まりごと

HTMLは、数種類のタグによってホームページを構成する。
タグは、基本的にはによって囲まれた文字列を指す

タグの例
 <p>こんにちは!<br>トマトです</p>

上記をブラウザで閲覧すると以下のように表示される

こんにちは!
トマトです

上記例では、pタグbrタグを利用している。

タグ意味
<p>段落の始まりを表す
</p>段落の終わりを表す
<br>段落内の改行を表す

※上記pタグのようにタグには、始まり終わりを表すものとbrタグのように単発で用いるタグの2種類がある。終わりタグが存在するものには、タグ名の前に/(スラッシュ)がつく。例)<h1>~</h1>

タグは入れ子で記述する

HTMLタグを記述する際の重要な考え方として、タグの中に別のタグを含める際、入れ子状に記述する決まりがある。
例えば、aaaというタグの中にbbbというタグ(実際にはaaaタグ、bbbタグは存在しない。説明のため)を記述するには次のようにする。

<aaa>文字文字文字文字<bbb>文字文字</bbb>文字文字</aaa>

次は記述エラー。

<aaa>文字文字文字文字<bbb>文字文字</aaa>文字文字</bbb>

タグの中にタグを含めない場合、入れ子にする必要はない。記述はこうなる。

<aaa>文字文字文字文字文字文字</aaa>
<bbb>文字文字</bbb>

必要最低限なHTMLタグ

ホームページを構成する上で必要最低限なタグは次の3つです。(最もこれだけでは何も表示されませんが…)

タグ意味
<html>
 ~
</html>
htmlタグの開始と終了。
ホームページはこのhtmlタグの内側に記述する必要がある
<head>
 ~
</head>
headタグの開始と終了。
ホームページの設定部分(タイトル、文字コード、検索された際のサイト紹介文等)を記述する
<body>
 ~
</body>
bodyタグの開始と終了。
ホームページに表示される内容を記述する
必要最低限なHTMLタグ

ホームページの構成イメージ

上記必要最低限なHTMLタグをイメージで表すとこうなる。

ホームページのタグイメージ

HTML5のひな型

前述のHTMLのイメージ図を実際に記述するとこうなる。(HTMLのバージョンは、HTML5として記述)
前述のHTMLイメージと言ったが、html、head、bodyタグのみだとブラウザで開いた時に何も表示されない為、titleタグ、h1タグ、pタグを追加している。
このファイルを基本としてホームページを作成していきます。
※メモ帳などのエディタで保存する際、文字コードUTF-8として保存してください。

補足説明として、先頭の <!DOCTYPE html> は、必ず1行目に記述するDOCTYPE宣言と呼ばれるもの。HTMLのバージョン5で記述されています、という意味を表す。

ファイル名:HTML5のひな型.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTML5のひな型</title>
</head>
<body>
	<h1>HTML5のひな型</h1>
	<p>HTML5のひな型ファイルです。</p>
</body>
</html>
スポンサーリンク
HTMLとCSS
スポンサーリンク
dennouをフォローする
電脳産物

コメント