ウェブサイトを作ろう！5

・h1-h6タグ

・pタグ

・aタグ

・imgタグ

・パス

・タグのおさらい

次は、見出し（みだし）をつくる「h1（エイチ ワン）」タグというものを紹介します。

見出しとは「目立たせたい部分」のことで、新聞を例にしてみてみると、以下の部分です。

h1-h6

一番目立つ所ですね。

これが 見出しです。

また、見出しは1つだけじゃなく、１番目に目立たせたいところ、２番目に目立たせたいところ、３番目に…みたいに、複数あることもあります。

新聞でいうと、下の赤の部分は全部見出しです。

h1-h6

HTMLでも、1番目立たせたいところは「h1」、2番目立たせたいところは「h2」というように、h1 から h6 までのタグが用意されています。

では、実際に以下のようにしてみましょう。

※コードが増えてきたので、一部だけしか画像にありませんが、書いてない部分は消さないでください。

※コードの中から、下の画像の部分（私の好きなもの）の部分を見つけて、そこに書いてください。

h1-h6

表示させてみると、以下のようになりました。

h1-h6

div などの時と違って、見た目が変わりましたね（文字が大きくなった）

でも、見た目は CSS がやることで、HTML がやることではなかったですよね？

実は、これは HTML がやっているのではなく、「お、これ目立たせたいんか？じゃあ大きくしとくわ」という感じで「ブラウザ」が勝手にやっています。

このように、一部のタグに関してはブラウザが勝手に CSS の設定をしていることがあります。

このCSS の設定は、ブラウザによっても変わるので「Aというブラウザだと、大きな文字で表示されるけど、Bというブラウザだと大きくならない」などが起こる可能性があります。

このような「勝手にブラウザが設定してしまう」ことによって、困ることもあるので、それは自分で CSS を書いて変更する感じです。（くわしくは CSS の時に説明します）

ちなみに、h1 から h6 要素は、すべてブロック要素です。

次は「p（ピー）」タグをやりましょう。※pは Paragraph（パラグラフ）の略（りゃく）です。

この pタグ は「段落（だんらく）」を意味するタグです。

段落とは、文章の中で「見やすくまとめられた塊（かたまり）」のことで、先ほどの新聞の例を使うと、下の部分です。

pタグ

作文とかでも、このように長い文章は、とちゅうで分けて書きますよね？

これが段落です。

使い方は以下の感じです。（書かなくて良いです）

pタグ

このように、divタグの中に pタグ を書く形が多いです。

次は、リンクを作るタグである「aタグ」をやりましょう。※aは「anchor（アンカー）」の略です。

リンクとは「クリックしたら、別のページが開くもの」のことです。

とりあえず、以下のようにしてください。

aタグ

※記号の間違いに注意してください

ページを確認してみましょう。

「キノコード」という文字がふえてると思いますので、その文字をクリックしてください。

すると、キノコードのサイトが開くと思います。

aタグ

これがリンクというものです。

今までのタグと違って、「<a>」だけじゃなく、「<a href="https://kinocode.jp">」みたいに、a 以外の何かが書いてありますね。

この「href="https://kinocode.jp"」の部分は、属性（ぞくせい）と言って、タグに追加の情報をあたえたいときに使います。

リンクは「どのページを開くのか？」という属性が必ずいるので、それが「href="https://kinocode.jp"」です。

「href」は「Hypertext REFerence（ハイパーテキスト レファレンス）」を短くした言葉で、「エイチ レフ」と読みます。

また「キノコード」の文字も、勝手に色が変わっていますよね？

さらに、文字に下線（アンダーライン）が勝手に設定されます。これもブラウザが自動でやっています。

aタグ

この aタグはインライン要素ですが、ちょっと特殊なので、aタグの中に、aタグを入れるのはアウトです。

つまり「<a><a></a></a>」みたいなコードはアウトということですね。（普通はしませんが）

次は、画像を表示させられるタグの「img（アイ エム ジー：またはイメージ）」タグをやりましょう。

「img」とは、image（イメージ：画像）を短くした言葉です。

下のようにしてください。※まだ、画像は表示されません。また、imgタグには終わりタグはありません。brタグ（改行のやつ）と同じですね。

imgタグ

aタグに href（エイチ レフ）という属性（ぞくせい）が必要だったのと同じように、imgタグ には「src（ソース）」という属性が必要です。

「src」は source（ソース）を短くした言葉です。

今は、この src に「”ここに画像のパス（場所）を書く”」とだけ書いています。

パスとは場所のことで、画像をおいてる場所を、ここに書かないといけません。

ただ、まだ画像自体がないので、まずは下の画像をダウンロードしてください。

画像を右クリックして「名前をつけて画像を保存」をクリックです。※「名前をつけてリンク先を保存」ではないので注意

imgタグ

imgタグ

保存場所は、どこでも良いですが、ここでは「ダウンロード」フォルダにダウンロードしたということで、話を進めます。

ちゃんとダウンロードできたら、ダウンロードフォルダに「kinocode.jpeg」という画像があると思います。

（kinocodeだけになっていてもOKです）

次に、この画像を HTMLファイルから使いやすい場所に画像を移動させます。

ダウンロードフォルダにある、先ほどの画像をクリックしてから「Ctrlキーを押しながら、Cキー」でコピーします。

「Ctrlキーを押しながら、Xキー」で「切り取り（コピーしたら、元の画像は消すということ）」でも良いです。

その後、今、index.html を置いているフォルダに、移動してください。

（キノコードのPCなら「生徒フォルダの中の、自分のフォルダ。自分のPCならドキュメントフォルダの中の自分のフォルダ）

そこに、また新しいフォルダを作ります。

フォルダの作り方は「何もない白いところを右クリック」→「新規作成」→「フォルダ」でしたね。

フォルダの名前は「imgs」にしておいてください。

※ここら辺の方法がわからない場合は、質問してください。

フォルダが出来たら、その中に入り「Ctrlキーを押しながら、Vキー」で画像を、はりつけましょう。

これで準備OKです。

imgタグ

では、今保存した「imgs」フォルダの、kinocodeファイルのパスを指定します。

パスとは「住所」みたいなもので、ファイルなどの場所を指定（してい）するものです。

以下のようにしてください。※imgタグだけですが、他の部分も消さないでください。

パスについて

説明しておくと

「. 」の部分は「自分がいるフォルダから」という意味です。

（"自分"とは、これが書かれている index.htmlファイル のことです。つまり index.htmlファイル を置いているフォルダのことです）

「imgs」の部分は「imgsフォルダ」のこと。

「kinocode.jpeg」の部分は「kinocode.jpegファイル」のこと、です。

これを「 /（スラッシュ）」で、くぎって書いたのが「パス」です。

つなげて言うと「index.htmlがあるフォルダの中の、imgsファルダの中の、kinocode.jpeg」という意味になります。

次のページに続きます。

「index.htmlがあるフォルダの中の、imgsファルダの中の、kinocode.jpeg」

ということを、図にすると下の感じです。

パスについて

自分で名前をつけたフォルダ

・index.html

・imgsフォルダ

・kinocode.jpeg

index.htmlに書いてるので、ここからスタート

.（index.htmlがあるフォルダ）

imgsフォルダ

kinocode.jpegファイル

下の意味になります。

次のページも続く。

エクスプローラーの画面で考えた方がわかりやすいかもしれません。

「index.htmlがあるフォルダの中の、imgsファルダの中の、kinocode.jpeg」

パスについて

パスはプログラミングやパソコンの世界ではよく使う事になるので、おぼえておきましょう。

また、今回説明したのは、「相対（そうたい）パス」というパスの書き方ですが、他にも「絶対パス」というものもあります。

また必要になった時にやりましょう。

パスについて

ページを確認して、ちゃんと表示されるか確認しましょう。

もし表示されない場合は、記号がぬけていないか、違う記号になっていないか、確認しましょう。

imgタグ

ここまで、以下のタグが出てきました。

他にもタグはたくさんありますが、とりあえず、今はこれだけ使えるようになれば十分です。

タグのおさらい

お疲れ様でした

今回で、タグに関しては終わりです。

今のところ、12個のタグを学びましたが、これから使うのは半分ほどなので、安心してください。

次回は、id と class という重要なところを学びます。