2018.05.25

3. HTMLファイル、CSSファイルを作ろう

目次

HTMLファイルを作ろう

HTMLファイルには文章や画像などの要素を書き込んでいきますが、HTMLファイルには必ず書かなければいけないコードがあります。
それが下のコードですが、そのままテキストエディタに貼り付けてしまいましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Test</title>
</head>
<body>
</body>
</html>

Sublime Textにコピペするとこんな感じです。

ひとまずはCtrl+S(Macの場合はCommand+S)でファイル名を「index.html」として保存します。「〇〇.html」の部分は他の文字でもいいですが、慣例上「index.html」とすることが多いです。


HTMLの基礎知識

タグ

HTMLにはタグと呼ばれるものがあります。

例えば、上の画像でいう<h1>、</h1>などの<>で囲まれた部分がタグにあたります。タグには開始タグ<〇〇>と終了タグ</〇〇>が必要なことに注意しましょう。上の例では、「こんにちは」にはh1(見出し)という意味付けを、「こんばんは」にはp(段落)という意味付けをしています。

また、ブラウザで実際に表示されるのはタグの中身のみで、タグ自身(<h1>など)は表示されません。

headタグとbodyタグ

headタグはwebページに関する付加的な情報を書くところで、headタグの中身は表示されません。反対に、bodyタグは実際に文章や画像を入れていくところで、この部分がブラウザで表示されます。

また、上の画像のように、タグの中に新たなタグを書くときは、Tabキーを押してインデント(字下げ)をすると、より見やすくなります。

ここで試しに、HTMLファイルをブラウザにドラッグ&ドロップして確かめてみましょう。

このように、headタグの中身は表示されず、bodyタグの中身が表示されています。また、タグ自身は表示されず、その中身のテキストが表示されていることも分かります。

CSSファイルを作ろう

CSSではHTMLで書いた要素を自由に装飾していきます。

CSSのコードはHTMLファイルに書くこともできますが、コードが長くなると複雑になってしまいます。そのため、CSSファイルを別ファイルとして作って、CSSファイルをHTMLファイルの中で読み込むやり方が一般的です。

Ctrl+N(Command+N)で新しいファイルを作り、Ctrl+S(Command+S)でファイル名を「style.css」として保存しましょう。

CSSファイルは、HTMLファイルがある場所と同じ場所に置きます。あらかじめディレクトリ(ここではexplainフォルダ)を作っておいて、その中で作業するとやりやすいかと思います。

CSSファイルを読み込もう

HTMLファイルでCSSファイルを読み込むには、以下のコードをheadタグの中に記述します。

<link rel="stylesheet" href="style.css">

linkタグは外部のリソースを読み込むためのタグです。relやhrefなどを「属性」といいます。
href属性の値は”style.css”となっていますが、これはCSSファイルがあるURLを示しています。
このURLの値は、HTMLファイルがある場所(ここではexplainフォルダ)を基準に書けばいいので、その1つ下にstyle.cssがありますから、わざわざ上の階層のURLを示さなくても、単に”style.css”とすればOKです。※このことを「相対パス」といいます。

エディタにコピペするとこうなります↓↓

これで、style.cssで書いたコードはindex.htmlに反映されるようになりました。

home

scroll