サイト作り方無料
前回の講座で、Webサイトを作るためのPCの環境づくりができたと思います。
それでは、第二回目の「サイトの作り方無料講座」からは、さっそくサイトを表示させるためのファイルの作り方を学んでいきましょう。
以下が今回の目次になります。
  1. HTMLファイルの作り方
  2. HTMLには親要素と子要素がある
  3. ブロック要素を理解しよう
  4. インライン要素を理解しよう
早く覚えるコツは、手を動かすことですので、このページに記載してあるコードを真似して書きながらすすめていってください。


HTMLファイルを作成して実際に文字を書いてみよう

前回の講座でwebサイトはHTMLとCSSという2つのファイルで構成されることをお話ししました。


今回の講座では、そのうちの1つ、HTMLファイルを実際に作ってみましょう。

以下、windowsの場合です。


PCのデスクトップ画面左下の検索窓から「メモ帳」を起動させ、デスクトップ上に「名前を付けて保存」→名前は「index.html」でひとまず保存してください。

サイト作り方無料
ちなみに、「index」というファイル名になぜするのかと言うと、Webサーバーの多くはApachという種類のサーバーなのですが、いつの頃からかデフォルトのファイル名として「index」が使われ始めたため、サイトの基軸になるファイルを「index」と名付けるようになったようです。
要するに、サイトの中心部分となるファイル名は「index」にするのが定石というわけです。


それでは、前回ダウンロードした「Terapad」の上にindexファイルをドラッグ&ドロップし、以下のように記述していきましょう。

html

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


</body>
</html>
これが基本的なHTMLファイルの書き方です。


(このファイルは文字コードの設定が必要になります。そのやり方はこの記事の下部の動画で解説しています)
先頭の一文は「DOCTYPE宣言」といいますが、これは、「このファイルの文章はHTMLで書かれています」ということを宣言する文章になります。
HTMLファイルを作るときは必ず先頭に記述するものですので、覚えておくようにしましょう。


HTMLはタグ(くの字の記号)と呼ばれるもので構成されます。
つまり、<head>から</head>の間の部分には<head>に関わる文章を記述し、<body>から</body>の間の部分には<body>に関わる文章を記述する形になります。
ちなみに、<body>タグの中には実際に画面に表示する内容を記述していきます。


HTMLには親要素と子要素がある

HTMLでは、タグの中にタグを書くことができます。
このような場合、囲んでいる側のタグを「親要素」、中にあるタグを「子要素」と言います。
例えば、下記の場合、<body>タグが親要素、<p>タグが子要素となるわけです。


(pタグに関しては、この後説明していきます)

html

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

 <p>この部分がbodyタグの子要素になります。</p>

</body>
</html>
HTMLに限らず、インターネット言語は親要素と子要素の集合体ですので、親要素と子要素の構造が見やすいように、親要素に対して子要素を字下げし、なおかつ少し右にずらして記述するのが基本です。


ブロック要素を理解しよう

では、最後にHTMLタグには「ブロック要素」と「インライン要素」の2種類があることを知っておきましょう。


まず「ブロック要素」についてです。


簡単に説明すると、ブロック要素に該当するタグは「自動的に改行」します。

前項で登場した<p>タグなどはブロック要素のタグです。
例えば、以下のように記述した場合、<p>から</p>までの間に記述された文章は、勝手に改行されて表示されます。

html

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

 こんにちは<p>この部分はブロック要素です</p>今日はいい天気ですね。

</body>
</html>


(実際の表示)
こんにちは

この部分はブロック要素です

今日はいい天気ですね。


このように、<p>で囲まれた部分は勝手に改行されてしまいます


またブロック要素のもう一つの特徴は、親要素が許す限り、端から端までいっぱいに広がって表示されます。


例えば、親要素の幅が100px(ピクセル)だとした場合、子要素がブロック要素のタグであれば、親要素と同じく100px幅まで広がるということです。


インライン要素を理解しよう

先ほどのブロック要素とは正反対となるのが、「インライン要素」になります。


インライン要素のタグとして頻繁に使用するものの中に<span>というタグがあります。
先ほど登場した<p>タグとは違い、<span>タグは文字の中に含めても勝手に改行することはありません。

html

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

 こんにちは<span>この部分はブロック要素です</span>今日はいい天気ですね。

</body>
</html>>


(実際の表示)
こんにちはこの部分はブロック要素です今日はいい天気ですね。


<span>で囲まれた部分は自動的に改行されないですね。


HTMLにもバージョンアップというものがあり、これまで紹介したタグの設定が今後変わっていく可能性もあります。


しかし、基本的に激しく変わることはないので、しっかり基礎を学んでいきましょう。