前回のレッスンでは駆け足でHTMLファイルを作成から保存、ブラウザに表示するところまで学んでいきました。
おさらいですが、HTMLファイルは!DOCTYPE宣言文、ヘッダ要素、ボディ要素から構成されているのでした。
今回は実際にWEBページに表示される部分、ボディ要素で使われるタグについて学んでいきます。
特にブログなど文章を扱うページでよく使われるタグをピックアップしました。
基本的かつ実用性が高いのでこのレッスンで使いどころをおさえておきましょう！
もくじ
はじめに
新しくファイルを用意します。
ファイルの作り方を忘れてしまった場合は、こちらを参考にしてください。
レッスン用のフォルダ内に画像を用意します。
画像はPCに入っているものなど何でもいいですが、卵焼きの画像だと気分が出ますよ！（今回イラスト屋さんの画像をお借りしました。）
以下のコードを自身のエディタで書いていってください。
今回は記述がとても長いので、ゆっくり慎重に書いていきましょう。
(どーしても難しい！という方はコピペで大丈夫です)
<!DOCTYPE html>
<html lang="ja">
<head>
<title>おいしいチーズ卵焼きを作ろう！</title>
</head>
<body>
<h1>チーズ卵焼きの作り方</h1>
<h2>材料</h2>
<p>卵</p>
<p>チーズ</p>
<h2>作り方</h2>
<p>ボールに卵を割り入れ、チーズも入れたらかき混ぜます</p>
<p>熱したフライパンに油を引いたら卵を1/3くらい流し込みます。
半熟になったら奥から手前に巻いていきます。</p>
<p>巻けたら奥に移動させて、同じ工程を２回繰り返します。</p>
<hr>
<p><b>チーズが焦げないように注意</b>してください。</p>
<p><strong>たった３分でチーズ卵焼き<strong>ができました！！</p>
<h2>できあがり！</h2>
<p>できあがりはこちら</p>
<a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D">レシピの参考サイト</a>
</body>
</html>ファイルを保存、ブラウザで表示してこのように表示されればきちんと
書けています。
文書タグを覚えよう！
段落を表すpタグ
さて、書いていったファイルを見ると、<p></p>の記述がとても多いのに気づかれたかもしれません。
ｐタグは文書を書く上でとても基本的なタグで、段落を表しています。
paragraph（段落）の略ですね。
このpタグで囲まれた箇所は、文章が１つでも複数でも、ひとつの段落として見なされます。
こちらの箇所に注目してください。
<p>ボールに卵を割り入れ、チーズも入れたらかき混ぜます。</p>
<p>熱したフライパンに油を引いたら卵を1/3くらい流し込みます。
半熟になったら奥から手前に巻いていきます。</p>
<p>巻けたら奥に移動させて、同じ工程を２回繰り返します。<p>記事を書きながら「これは同じ段落だな」、「違う段落だな」と作者の意図と照らし合わせながら任意で設定していきます。
そしてこのpタグは１つの性質を持っています。
それは前後に自動的に改行が入るということです。
段落ごとにまとまりを持たせて、見やすく表示させてくれているわけですね。
この後に改行を示すbrタグを学んでいきますが、pタグの前後にはbrタグを入れなくても改行が入るので覚えておきましょう。
- pタグは段落を表す
- <p></p>で囲まれた文章は１つでも複数でも１つの段落と見なされる
- <p></p>の前後は自動的に改行される
見出しを表すhタグ
以前のレッスンからたびたび登場するhタグです。
hタグは見出しを表していて、記事のタイトルや段落などの見出しによく使われるタグです。
hはheading（見出し）の略です。
hタグは1~6まで６段階で分けられていて、1がいちばん字の大きさも見出しとしてのレベルも大きくなります。
６に向かって数字が大きくなるにつれ、逆に文字のサイズは小さくなっていきます。
ここで同じ文章をh1〜6まで表示させてみました。
レベルごとにどのように表示が変わっていますか？
<h1>これはh1だよ</h1>
<h2>これはh2だよ</h2>
<h3>これはh3だよ</h3>
<h4>これはh4だよ</h4>
<h5>これはh5だよ</h5>
<h6>これはh6だよ</h6>h1がいちばん大きくて、h6に向かってどんどん小さくなっていきます
どのhタグを配置していくかは、さまざまな議論がされているのですが、コード食堂では1つの記事の中でh1タグはタイトルに１つだけ使うというルールをおすすめしています。（MDNでも推奨しています）
厳密にh1の複数使用が禁止されているわけではないのですが、こちらのほうが記事の意図が明確ですし、書いている本人も構成が分かりやすくなるというメリットもあります。
記事の中の見出し（章にあたるところ）は、h2にしてその中で更に分けたいときはh3を,と見出しを小さくしていくと分かりやすいです。
見出しの構造に合わせて、中に入るごとにhタグを小さくしていきます
hタグもpタグと一緒で前後には改行が入ります。
- hタグは見出しを表す
- h1がいちばん大きく、h6がいちばん小さい
- 見出しの付け方で記事の読みやすさは大きく変わってくる
- h1は記事のタイトルに１つだけ使い、見出しはh2以降を使っていこう
- hタグの前後には改行が自動で入る
改行を表すbrタグ
先ほど出てきたように、brタグは改行を表します。
brは’Line Break’のBreakから来ていて、直訳すると行の休止、つまり「次の行へいって！」と支持を出すタグです。
「というか文の途中でエンターキーを押せば改行されるんじゃないの？」と思う方もいるかもしれません。
たとえエディタ上で、改行してもWEBページでの表示は変わりません。
多くの場合、半角スペースだけが挿入されるだけです。
先程のpタグに囲まれた文を注意深く見てみましょう。
<p>熱したフライパンに油を引いたら卵を1/3くらい流し込みます。
半熟になったら奥から手前に巻いていきます。</p>
ここで登場するのがこのbrタグです。
brタグを使うと好きな場所で改行ができるようになりますよ。
<p>熱したフライパンに油を引いたら卵を1/3くらい流し込みます。<br>
半熟になったら奥から手前に巻いていきます。</p>
段落の途中で改行がされました！
同じ改行でもpタグによる改行と
brタグでの改行では余白の幅がちがいます。
文のまとまりを分かりやすく表示しているのです。
最後にこのbrタグは終了タグが必要なく、<br>だけで改行できます。
- 改行したいときはbrタグを使う
- brタグは開始タグだけでOK
段落の区切りを表すhrタグ
ページを見ると区切り線が引かれている場所がありますね。
コードを見るとこの辺ですね。
<p>巻けたら奥に移動させて、同じ工程を２回繰り返します。</p>
<hr>
<p><b>チーズが焦げないように注意</b>してください。</p>線がある辺りに<hr>というタグがありますね。
このhrタグは段落の区切りを表していて、段落ごとに話を区切るための横線が引かれます。
hrタグは、以前は単純に水平線を引くためのタグと定義されていたのですが、意味的に段落を区切るためのタグと再定義されました。
要するにただ視覚的に線を引くためのタグ、というわけでなく、話の転換や切り替えがあるときなど、区切る意味があるときに使用していくタグということになります。
水平線はあくまで結果として引かれる、という概念です。
段落ごとに使うものなので、同じ段落内で使うのは控えましょう。
hrタグもbrタグと同様に開始タグだけでOKです。
- 段落ごとに区切りや話題の転換があるときはhrタグを使う
- デフォルトの設定では水平線が引かれる
- 同じ段落内ではなるべく使用しない
- hrタグは開始タグだけでOK
文字を強調するstrongタグとbタグの違いと注意点
よくブログで重要な部分を太字で表現しているのを見ますよね？
文章にメリハリがついて読みやすくなるので、このブログでもよく使います。
太字にするために使われているのがこのstrongタグとbタグです。
見た目としては全く一緒なのですが、実はこの２つのタグには微妙な違いがあり、使い分けに注意が必要です。
bタグについて
bタグは読み手の注意を引きたいときに対象の文字列を太字にします。
bタグのbは’bold’（力強い）の意味からで、言葉通り力強く文字を見せるタグです。
見た目は太字になりますが、その文字列自体が特別な意味を与えられるものではありません。
strongタグについて
一方strongタグはその記事にとって重要な箇所を太字にします。
そのまま strong = 強調 ということですね。
bタグとは違って、strongタグで囲まれた部分はページ全体の重要なキーワードとして認識されます。
ここで注意なのがあまりstrongタグを乱用してはいけないということです。
あまりにたくさんのstrongタグのあるページはGoogleから悪い評価を与えられ、検索順位を下げられてしまう可能性があります。
そこでstrongタグは本当にそのページにとって大切な箇所のみ使用して、５個くらいまでの使用に留めておくくらいがいいでしょう。
サンプルのコードを見てみます。
<p><b>チーズが焦げないように注意</b>してください。</p>
<p><strong>たった３分でチーズ卵焼き</strong>ができました！！</p>どちらも太字で表示されていますが、３分でできるというのがこのページのアピールポイントなので、strongタグを使用しています。
- 見た目だけ強調したい場合はbタグ、意味としても重要度を持たせる場合はstrongタグを使う
- strongタグは乱用してはいけない
リンクをつけよう！
外部のサイトや自身のサイトのページ（内部リンクといいます）、はたまたそのページの特定の箇所までをリンクさせる機能を持つタグがaタグです。
アンカータグとも呼ばれています。(aタグはanchorタグの略です)
自分のサイトが外部とネットを通じてつながりを持つのってなんだかワクワクしますよね？
aタグの基本的な使い方を見ていきましょう。
リンク先はhref属性で指定する
aタグには必ず一緒にhref属性が一緒に書かれます。
サンプルコードのaタグはこんな感じで書いています。
<a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D">レシピの参考サイト</a>aタグの中身である’レシピの参考サイト’にリンクが作成され、クリックするとhref属性で指定したURLにジャンプできるようになります。
もし文字列の一部分だけにリンクを作成したい場合、<p></p>で囲まれた文字列の選択したい文字をさらに<a></a>で囲みます。
レッスン03で勉強した入れ子構造です。
リンクの開き方はtarget属性でコントロール
普段ネットでリンクをクリックするとそのままリンク先が表示される場合と、新しいタブが開く場合がありますよね？
それをコントロールするのが、このtarget属性になります。
href属性のあとに半角スペースを入れて書きます。
target属性の値には_selfや_blankなど直前にアンダースコア（ _ ）が入ります。
それではtarget属性の書き方の違いで、どのようにリンクの開き方が違うのか実際に見てみましょう！
そのまま（target属性が何も書かれていない場合）
target=”_blank”をコードに追加します。
<a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D" target="_blank">レシピの参考サイト</a>target属性の使い分け
色々クリックしてたら、タブがとんでもなく溜まっていたという経験はありませんか？
１つ１つ消すのも面倒ですよね。
ですので、このtarget属性を使うときはユーザーの使い勝手をよく意識して設定を考える必要があります。
- リンクの作成にはaタグ（アンカータグを使う）
- href属性はリンク先のページのURLを指定する
- リンク先のページの開き方はtarget属性で指定する
- ユーザーの使い勝手を意識してページの開き方を使い分ける
画像を配置しよう！
imgタグの基本
最後にページに画像を表示させましょう。
やっぱりサイトに素敵な画像が沢山あったらページが華やかになりますよね？
そんな画像をページに埋め込んで表示させるタグがimgタグです。
image （イメージ）からきています。
終了タグはいらないタグです。
‘<p>できあがりはこちら</p>’の下に以下のコードを書いてください。
ファイル名はいちばん最初に同じフォルダに入れておいた画像ファイルの名前です。
<img src="画像のファイル名" alt="おいしそうな卵焼き">
例）
<img src="food_tamagoyaki.png" alt="おいしそうな卵焼き">それでは一回保存して、ページをリロードしてみましょう！
卵焼きの画像が表示されました！
imgタグの基本的なsrc属性とalt属性の使い方を見ていきます。
画像を指定するsrc属性
src属性は必ずimgタグに書かれる属性です。
値には、表示させたい画像のファイルパス（ファイルがどこにあるかを示す文字列）を指定します。
こちらのレッスンでパスについて詳しく説明していますので、ぜひ目を通してみてください。
今回は相対パスと絶対パスの書き方のちがいを、わかりやすく図を見ながら学んでいきます。 一回理解するとそんなに難しくないのに、初心者のうちはなかなかわかりづらいのが、このパスの概念です。 パスとはどんな役割があって、それぞ[…]
今回は同じフォルダにある画像なので、ファイル名だけで表示されます。
また指定できるファイルの種類には決まりがあり、動画などのファイルは表示できません。
jpg, png, svgなど日頃よく使うような画像ファイルは大丈夫です。
gif動画はカバーされていて、動きのある画像が配置できるので楽しいですよ！
画像を文章で表すalt属性
alt属性は表示させた画像が、どんな画像なのかを説明します。
具体的には、不具合で画像が表示されないときに代わりにalt属性で指定した文を表示させてくれたり（代替テキストとも呼ばれます）、Googleに「この画像はこんなことを表しています」と伝えてくれます。
’おいしそうな卵焼き’のように好きな表現で端的に、分かりやすい文で指定していきます。
キーワードを入れすぎたり、長すぎる文にならないように気をつけてください。
src属性とは違い、alt属性は必須ではなかったり表示には関係ないのですが、指定しておくと検索結果にも反映されるなどメリットが大きいです。
ぜひ書いておきましょう！
サイズを調整する
ちょっとだけ画像が大きすぎるので、サイズの調整をしていきます。
alt属性の後ろに、height（高さ）、もしくはwidth（幅）の長さを指定します。
<img src="food_tamagoyaki.png" alt="卵焼きイメージ" height="180px">一度ページを表示してみます。
ちょうどいい見栄えになりましたね！
高さを180ピクセルにしました。
ピクセルという新しい単位が出てきましたが、CSSのレッスンで詳しく解説していきますので、そういう単位があるのだな、くらいで今は大丈夫です。
height, widthのどちらかだけ指定してあげると、画像比率をそのまま維持してくれるのでおすすめです。
- ページに画像を配置するにはimgタグを使う
- src属性は画像ファイルがどこにあるかを示す’ファイルパス’を指定する
- 画像を文章で表すalt属性は積極的に使っていこう
- 画像のサイズを調整したいときはheight（高さ）とwidth（幅）で長さを指定する
- imgタグは開始タグだけでOK
まとめ
このレッスンではブログなどでよく使われる、基本的なタグの使い方を学んできました。
最初は種類が多くて覚えるのがたいへんですが、本当によく使うタグばかりですので、自然と身についていきますので心配いりませんよ！
基本的かつ実はかなり奥が深かったりするので、時間があるときにMDNなどの信頼性のあるサイトで理解をさらに深めることもおすすめです！