WEBエンジニアが超初心者に教える!作りながら覚えるホームページ作成講座 〜HTML編〜

引用:http://www.htmlandcssbook.com/

こんにちは、chi-taraです。

今回は、プログラミング未経験者に向けたホームページ作成講座の記事をHTML編、CSS編に分けて書いていきたいと思います。(この前偶然知人に教える機会があったので。)

今回はHTML編です!

この記事を読んで下さった方が、最終的に「googleで調べながらであれば、ホームページを作れる」ってという状態になっていただけるのが理想です。

サンプルファイルも用意していますので、読みながら実践してもらえればなーと思います。

基礎知識

皆さんはHTMLやCSSはご存知でしょうか?HTMLやCSSはホームページやwebに用いられるプログラミング言語です。中にはそれくらい知っているという方もいるのではないでしょうか。

初心者の方はプログラミング言語と聞いただけでも、抵抗がありますよね...。

まず最初に、HTMLやCSSはほぼプログラミング言語ではありません!!

まったくの初心者でも扱えてしまう大変簡単なものなのです。プログラミング未経験者の方でも挫折することなく作ることができるでしょう。

とは言っても、最低限必要な知識は何個かあります。

ここでは、その最低限必用な知識を、3つに分けてご紹介したいと思います。

HTMLとCSS

すべてのwebサイトは必ずHTMLとCSSと呼ばれるプログラミング言語で作られています。HTMLは文字や画像などのコンテンツを作り、CSSはデザインを作ります。

冒頭でも述べたようにこの2つはプログラミング言語というより、マークアップ言語と呼ばれるものに近いのです。HTMLの正式名称は『HyperText Markup Language』であり、名前の中にもマークアップ言語と思いっきり入っているのがわかります。

ではHTMLがどのようなものか見ていきましょう。

<p>これはサンプルです。</p>

これは単純に文字を表示するHTMLです。基本的にHTMLは文字をタグで囲うことしかしません。

今回はparagraphを意味するpタグで文字を囲っています。

<p>ホームに戻るには<a href="https://daily-fruit.com/">こちら</a>をクリックしてください。</p>

この例は『こちら』の部分にリンクを貼っています。

こちらも同様に文字をaタグというリンクを貼るタグで囲っているだけです。

続いてCSSを見ていきましょう。

p{
  font-size: 16px;
  color: red;
  text-align: center;
}

こちらがCSSのコードになります。書いてあることはとても単純で、pタグのスタイル(デザイン)を

  • 文字サイズを16ピクセルにする
  • 文字の色を赤にする
  • 中央添えにする

ということです。非常に簡単だと思います。

それではまとめですが、HTMLはコンテンツ、CSSはデザイン!これだけです。

拡張子

多くの方がWordとかExcelを使ったことはあると思います。Word・Excelで保存した時に、〜.docxや〜.xlsxみたいなファイルに保存されると思います。(Windowsの初期設定ではないかもしれません。)

この『.』の後ろについているdocxやxlsxが拡張子と呼ばれるものです。

拡張子

簡単に説明すると、このファイルがどんなファイルであるのかを表しています。詳しく知る必要はありません。

以下に、ホームページを作成する上でよく使う拡張子を書いておくのでサラッと見ておいてください。

拡張子 使用例
.html HTMLを記載したファイル
.css CSSを記載したファイル
.js JavaScriptを記載したファイル
.pdf PDFファイル
.png 画像ファイル。色の数が少ないシンプルな画像に向いている。
.jpg 画像ファイル。色の数が多い複雑な画像に向いている。景色など。
.gif 画像ファイル。アニメーション画像等に利用される。

相対パスと絶対パス

プログラムの世界では、ファイルを参照するという作業を何度も行います。その際に使われるのが、『相対パス』と『絶対パス』です。

具体的に何をするものなのかというと、ファイルの保存場所を示す役割を担っています。

プログラム未経験の方には少し難しいかもしれません。以下に詳しくかいてみたので参考にして下しい。もう知っている、分かったという方は読み飛ばしてください。

まず『相対パス』から見ていきましょう。

『相対パス』は現在の位置から見たファイルの保存場所を示します。

例えばデスクトップにindex.htmlとimageというフォルダがあるとします。またindex.htmlには以下のようなコードが書いてあるとします。

フォルダ構造
<img src="./images/icon.png" alt="アイコン">

このコードはHTMLで画像を表示するコードです。

『src』で表示する画像を決めて、『alt』で画像が表示できなかった場合に、代わりに表示する文字を決めます。

この『src』の『""』ダブルクォーテーションの中に書かれているのが相対パスです。(./images/icon.png)

この例の相対パスは「同じ階層にある imagesフォルダ の中にある icon.png の画像ファイル」を指しています。

相対パス

次に『絶対パス』です。

『絶対パス』は固定位置(第一階層)から見たファイルの保存場所を示します。

先程の例で言うならば、絶対パスは「/Desktop/images/icon.png」となります。必ず一番上のフォルダからファイルを参照します。

相対パス

どうでしょうか?分からなかったという方は、Google検索で少し調べて見てください。

簡単なホームページを作ってみる。

準備が整ったのでここからは簡単なホームページを作っていきましょう。

分からなかったという方も多いと思いますが、プログラムは手を動かしながら勉強するものです。

とりあえず以下の手順で頑張って作成してみてください!

1. ブラウザで文字を表示してみよう!

まずは以下のリンクからサンプルファイルをダウンロードしましょう。ファイルの保存場所はわかりやすいように、デスクトップにしましょう。もしファイルがダウンロードできない場合はこちらからご連絡ください。

ダウンロード(sample01)

まずはダウンロードしたファイルをデスクトップに解凍しましょう。『sample01』というフォルダができていると思います。

『sample01』フォルダの中に『index.html』というファイルがあると思います。これをクリックして、ブラウザで見てみましょう。

以下の画像は私がchrome(ブラウザ)でindex.htmlを開いた結果です。何も表示されていないのがわかります。

ブラウザで表示してみよう1

①index.htmlの中身を確認してみよう!

次にindex.htmlのファイルの中身を見てみましょう。右クリックで『プログラムから開く』を選択し、windowsなら『メモ帳』、macなら『テキストエディット』で開きましょう。

ファイルの中身を見てみると以下のようになっていると思います。

<html>
<head>
  <meta charset="UTF-8">
  <title>ブラウザで文字を表示してみよう!</title>
  <meta name="keywords" content="ブラウザ,文字,表示,サンプル">
</head>
<body>

</body>
</html>

まずはhtmlタグ,headタグ,bodyタグを見ていきましょう。

<html>
<head>
  ここにはタイトルや文字コード,キーワードなど、このhtmlの情報を書きます。
</head>
<body>
  ここには画像や文章などのコンテンツを書きます
</body>
</html>

この3つのタグはhtmlファイルを書く上で必ずなければならないタグです。htmlタグの中にheadタグとbodyタグが入っています。

headタグは上にも書いてあるとおり、タイトルや文字コード,キーワードなどのいわゆるメタ情報を書き込むためのタグになります。

bodyタグは画像や文章などの作成者が載せたいコンテンツを書くためのタグになります。

<meta charset="UTF-8">
<title>ブラウザで文字を表示してみよう!</title>
<meta name="keywords" content="ブラウザ,文字,表示,サンプル">

次にheadタグの中身を見ていきましょう。1番目の行は文字コードというものを指定しています。このファイルは『UTF-8』という文字の種類を使って書いているということをコンピュータに認識させるためのタグです。この文字コードを間違えると『文字化け』という現象がおこります。

2番目の行のタグはindex.htmlのタイトルを決めるためのタグです。ちょうどブラウザのタブに表示される文章ですね。

ブラウザで表示してみよう2

3番目の行のタグはindex.htmlのキーワードを決めるためのタグです。キーワードは検索にも影響してくるタグです。コンテンツと関係のあるワードをカンマ区切りで書きましょう。

引用:参考ページ:https://bazubu.com/seo-key-research-7767.html

②bodyタグに文章を書き込んでみよう!

いよいよブラウザに文字を表示します!皆さんメモ帳等でファイルを開いているかと思います。まずはbodyタグの中に以下のコードを書いてみましょう。(コピーペーストでも構いません。)

<p>Hello, world</p>

これはpタグと呼ばれる文字を書き込むためのタグですね。bodyタグの中に書き込むと以下ようになるはずです。合っていたらファイル保存して、ブラウザを更新してみましょう。

<html>
<head>
  <meta charset="UTF-8">
  <title>ブラウザで文字を表示してみよう!</title>
  <meta name="keywords" content="ブラウザ,文字,表示,サンプル">
</head>
<body>
  <p>Hello, world</p>
</body>
</html>

ちなみにタグの先頭に半角の空白を2つ入れているのは、『インデント』といって、構造を見やすくするための技法です。様々なプログラミング言語利用されます。

ブラウザで表示してみよう3

いかがでしょうか?ブラウザの画面が以上のようになっていれば成功です。

できなかった方はタグがしっかり閉じられているかをしっかり確認してみてください(<p></p>)

以上でブラウザへの表示は終了です。そこまで難しくなかったはずです。htmlの作成はほとんどがこのような作業ですから、8割終わったようなものです。

2. ブロック要素とインライン要素の違いを知ろう!

次は概念の説明になってしまうので、少々退屈かもしれません。しかしとっても重要な概念ですので、しっかり理解して上で次のステップに進んで頂きたいと思います。

htmlはとても簡単な言語ゆえに、この概念を知らなくても書けてしまうことがほとんどです。しかしこれを知らないまま進んでしまうとcssでデザインを調整する際にとても苦労するなんてことがよくあります。

それでは早速見ていきましょう。まずは先程使用した『sample01』フォルダのindex.htmlのbodyタグの中身を以下のコードに変えて保存してみてください。

<body>
  <p style="background-color:red;margin-bottom:10px;">Hello, world</p>
  <span style="background-color:blue;">Hello, world</span>
</body>

このコードですが、今までに見たことの無い書き方をしていますね。『style="~"』の部分です。このようなものをhtmlでは属性と読んでいます。この場合はstyle属性となります。

このstyle属性が何をしているのかというと、なんとcssと同じことをしています。今詳しく知る必要はありませんが、デザインを指定しているのです。pタグの場合、背景色を赤にして、下に10pxの余白を取っています。

ブロック要素とインライン要素の違いを知ろう!1

ブラウザを更新してみましょう。上の画像のようになっていると思います。今回はpタグとspanタグを使用しましたがどちらも文字を表示するタグです。しかし、背景色の色の範囲が違うのがわかります。

これこそがブロック要素とインライン要素の違いなのです。

htmlのタグは画面上で表示する領域を自動で確保します。

このときコンテンツの量、大きさに関わらず、横幅最大に領域を確保するのがブロック要素(今回のpタグ)です。
逆にコンテンツの量、大きさの分だけ領域を確保するのがインライン要素(今回のspanタグ)です。htmlのタグは必ずこのどちらかに分類することができます。

したがってpタグはブロック要素で、spanタグはインライン要素であることがわかります。

時間がある方はbodyタグの中身を以下に変えて、ブラウザでの表示を確認して見てください。

<body>
  <p>Hello, world</p>
  <p>Hello, world</p>
  <p>Hello, world</p>
  <p>Hello, world</p>
  <p>Hello, world</p>
</body>
ブロック要素とインライン要素の違いを知ろう!2
<body>
  <span>Hello, world</span>
  <span>Hello, world</span>
  <span>Hello, world</span>
  <span>Hello, world</span>
  <span>Hello, world</span>
</body>
ブロック要素とインライン要素の違いを知ろう!3

3. 画像やリンクを表示してみよう!

退屈な概念の部分が終わって、htmlの作成も終盤です。

ここでは画像やリンク、Youtubeによる動画やgoogleマップの埋め込みを紹介します。実用的なことも行いますので、非常に楽しく進められると思います。

まずは以下のリンクから新しいサンプルファイルをダウンロードしましょう。

ダウンロード(sample02)

①画像を表示してみよう!

画像を表示するにはimgタグを使用します。

『src』属性には表示したい画像ファイルのパス(今回は相対パス)、『alt』属性には画像が読み込めなかった場合に代わりに表示する文字列を指定しましょう。

まずは以下のタグをbodyタグの中に書き込みましょう。

<img src="images/sample1.png" alt="画像が表示できなかった時に表示する文字列">
<img src="images/sample2.png" alt="画像が読み込めませんでした。">

今回使用した相対パスは、index.htmlでimagesフォルダの中のsample1.pngを表示したいので『images/sample1.png』のようになります。

画像の表示1

imgタグはインライン要素ですので、画像が2つ横に表示されていると思います。

画像の表示2

次にimgタグのsrc属性をわざと間違えてみましょう!以下のコードはsample2.pngの名前をわざと間違えているコードです。bodyタグの中に書き込んでみましょう。

<img src="images/sample1.png" alt="画像が表示できなかった時に表示する文字列">
<img src="images/sanple2.png" alt="画像が読み込めませんでした。">

しっかりとalt属性の文字列が表示されているのがわかります。

画像の表示2

②リンクを貼ってみよう!

リンクはホームページ、webを作る上で必ず必要なものです。リンクを貼るためにはaタグを使用します。

ちなみにaタグは『anchor』の略で、アンカーテキストを意味します。

まずはいつもと同様に以下のコードをbodyタグの中に書いてみましょう。

<a href="https://daily-fruit.com/">DailyFruit</a>
リンク1

クリックすると別のページへ飛ぶようになっているはずです。リンクを貼るときはこのように、リンクにしたいURLをhref属性に設定し、コンテンツをaタグで囲いましょう。またaタグはインライン要素です。

次に以下のコードを書いて試してみましょう。

<p>ホームページへのアクセスは<a href="https://daily-fruit.com/" target="_blank">こちら</a>からお願いします。</p>
リンク2

今度のリンクはクリックすると、ブラウザの別のタブで開くのがわかります。これはtarget属性に_blankが指定されているためです。これはよく使うので覚えてしまいましょう。

それでは最後に応用例を2つやってみましょう!

まず1つめは画像にリンクを貼る例です。画像が小さずぎて見えないとき、また広告バナーなどには画像にリンクを貼るといいでしょう。以下のコードをbodyタグの中に書き込んでみてください。

<a href="images/sample1.png" target="_blank">
  <img src="images/sample1.png" alt="バナー" width="200px">
</a>
リンク3

今回の画像はwidth属性を使用することであえてサイズを小さくしています。これは今までやってきたことの組み合わせなので説明は省略します。

2つ目の例です。皆さんよくクリックするとファイルをダウンロードできるリンクを見かけると思います。実はこれもaタグで実現することができます。

早速試してみましょう。

<a href="PDF/sample.pdf" download="01.pdf">PDFファイルのダウンロード</a>
リンク4 リンク5

download属性を付け加えることで、href属性に指定しているファイル(今回は相対パス)をダウンロードさせることができます。

download属性の値はダウンロードするファイル名となります。

③Googleマップを埋め込んでみよう!

新宿駅のgoogleマップを埋め込んでみましょう!こちらからgoogleマップにアクセスします。

マップ1

アクセスしたら以下の手順で埋め込みコードをコピーしましょう。

①検索バーで『新宿駅』を検索

②左上のメニューをクリックし、『地図を共有または埋め込む』をクリック

③『地図を埋め込む』のタブをクリック

④カスタマイズした後、ウィンドウ上部にあるコードコピーする

①〜④までの作業ができたら、bodyタグの中にコードを貼り付けてみましょう。

マップ2

以上のように表示されていれば成功です。

④Youtubeの動画を埋め込んでみよう!

サンプルとして『君の名は』のPVを埋め込んでみましょう。こちらからYoutubeにアクセスします。

youtube1

①埋め込みたい動画の画面まで移動する

②動画右下にある『共有』をクリックする。ウインドウの下部にある『埋め込み』をクリックする

③好きなようにチェックボックスの設定を変更する

④表示されたコードをコピーする

①〜④までの作業ができたら、bodyタグの中にコードを貼り付けてみましょう。

youtube2

以上のように表示されていれば成功です。

以下はサンプルです。開始時間を46秒に設定してあります。

またCSSでデザインを整えてあります。

まとめ

いかがでしたか?ところどころ説明を省いてある箇所がありますので、分からない部分もあったかと思います。質問やご要望があれば、コメントやお問合わせからご連絡ください。

次回はCSS編を書きますので、そちらの記事もぜひご覧ください。

CSSをマスターすれば一人でwebサイトを作れるようになるはずです。