HTMLの基本<後半>【HTML&CSS講座 #3】

HTMLの基本<後半>【HTML&CSS講座 #3】

前回に引き続きこのシリーズでは『Webページの制作ができるようになる』というのを目標にHTMLやCSSを学んでいきます。早いもので、今回の記事でHTMLで使う知識のほとんどは習得できることになります。やや詰め込みすぎた感じがしますが、それだけ重要な情報を盛り込んであるので頑張っていきましょう。覚えずに印刷してチートシートっぽく使うのもアリだと思います。(個人的にはwebサイトにたくさん訪問して欲しいので寂しいですが……(・_・;))

前回の続きということで、早速bodyタグの中に使われるものを順番に見ていきましょう!

ボディで使うタグ

目に見えるコンテンツを作成するために習得すべきタグを説明します。一度に全部を覚えるのは大変なので、何回か見直しながら身につけてください。

h1, h2, h3, h4, h5, h6タグ

これらは見出しを作ることができるタグです。h1タグからh6タグまであります。基本的にはh1タグはwebページ中で1回だけにした方が良いと言われています。そのため記事のタイトルなんかに使うのが良いでしょう。h2タグからh6タグについては、見出しをh2タグで作って、小見出しを作って分割をしたくなったらh3タグで作っていく感じにするのが通例です。タグの文字の大きさなんかはCSSの方で調節ができるので、特に問題がなければh2タグから順に使っていきましょう!

<h1>タグに挟まれた領域が見出しとして認識されます。</h1>

コードを書いて試してみてください!タグで挟まれた部分のテキストの大きさや太さが変化したのがわかると思います。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>記事のタイトル</h1>
  <h2>大見出し</h2>
  <h3>中見出し</h3>
  <h4>小見出し</h4>
  <h5>さらに小さい見出し</h5>
  <h6>ほとんど使わないレベルの見出し</h6>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

pタグ

これは段落を作るタグになります。適切に段落を入れることで文章が格段に読みやすくなるため、webページを作る上でpタグの使い方は非常に重要になってきます。

<p>タグに挟まれた領域が段落として認識されます。</p>

むやみに段落を増やしすぎるのも良くないですし、全く段落分けをしない文章は行の間がなく読みづらい印象を与えかねません。読みやすいwebサイトを見つけてそこのwebページを研究してみると色々発見があるかも?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>記事のタイトル</h1>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <h2>大見出し</h2>
  <p>ここに文書を書いていきます。もちろん文章だけでなく画像や他のサイトなどのリンクを挿入することもあります。</p>
  <p>ところで、今日は寒かったね。</p>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

brタグ

改行を表すタグです。改行を入れたいところに書くだけなので開始タグのみからなります。
ただし、pタグを適切に使っていれば自然と段落ができて読みやすくなるので、基本的に出番がないタグです。(brタグを多用している記事は段落を意識したwebページを作成してみると良いでしょう!)

<br>

具体的なサンプルは次のhrタグの項目で一緒に扱うことにします。

hrタグ

これは横線を入れることができるタグになります。横線はタイトル下や記事の終わりあたりによう用いられます。属性で線の長さなどを変えることができますが、CSSで調節する方が楽なのでhrタグの属性は覚えなくても良いでしょう。

<hr>

brタグとhrタグを使ったサンプルコードです。(brタグについては基本的に出番はありません)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>記事のタイトル</h1>
  <hr>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <h2>大見出し</h2>
  <p>ここに文書を書いていきます。段落が分かれているのを実感してもらうために、長い文章を書いてみるます。このように段落と段落の間の隙間が少し広くなって見えます。段落の切れ目がわかりましたか? 皆さんも色々試してみてくださいね。</p>
  <p>ところで、今日は寒かったよね。</p>
  <p>ところで、今日は寒かったよね。</p>
  <p>ところで、今日は寒かったよね。</p><br><br>
  <p>ところで、今日は寒かったよね。</p>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

div, spanタグ

htmlの文書にブロックを作る際に用いられるタグになります。これは少し理解するのが難しいかもしれませんが、非常に重要なので覚えておいてもらいたいタグです。
CSSを使うときに、『ここにこのデザインを適応させたいなー』という状況においてdivタグで塊にしておくとdivタグで囲まれた領域内にCSSのコードを適応させることにより簡潔なコードが書けるようになります。

<div>
  <p>タグに挟まれた領域がカタマリとして認識されます。</p>
</div>

また文章の一部だけCSSを適応させたい場合にはspanを用います。例えば文字の色を変えたり、下線をつけたりする際に便利ですね。詳しくはCSSを勉強するときに勉強すれば良いでしょう。

<p>タグに挟まれた領域が<span>カタマリ</span>として認識されます。</p>

preタグ

書いてあるものをそのまま出力するタグです。これを用いることで半角スペースやタブによる空白などもそのまま出力されます。

<pre>
  タグに挟まれた領域がそのまま表示されます。
</pre>

ただしhtmlのタグは普通に適用されてしまうので注意が必要です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>記事のタイトル</h1>
  <hr>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <h2>大見出し</h2>
  <p>ここに文書を書いていきます。段落が分かれているのを実感してもらうために、長い文章を書いてみるます。このように段落と段落の間の隙間が少し広くなって見えます。段落の切れ目がわかりましたか? 皆さんも色々試してみてくださいね。</p>
  <p>ところで、今日は寒かったよね。</p>
  <pre>
    ところで、今日は寒かったよね。
空白を入れずに書くとこうなる。
    <p>タグは普通に使える。ただpタグの左側の空白も出力されているのでスペースが広く見える。</p>
    <p>タグは普通に使える。ただpタグの左側の空白も出力されているのでスペースが広く見える。</p>
  </pre>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

blockquoteタグ

このタグは文書内に引用を挟む際に用います。引用部分を明示的に示す方法として覚えておいてください。

<blockquote>
  <p>昔々あるところにおじいさんとおばあさんがいました。おじいさんはカメに乗って海の中へ、おばあさんはどんぶらこどんぶらこと流れるプールで遊んでいましたとさ。</p>
  <p>めでたし!</p>
</blockquote>

blockquoteのサンプルコードは下のaタグやimgタグとともに紹介することにします。

aタグ

これは他のページへのリンクを作るためのタグになります。例えば、blockquoteタグで引用した文章の引用元のリンクを挿入したり、他のページを参照して欲しい時なんかによく用いられます。

aタグの属性は重要なので、よく使うものについては載せておきます。

属性 意味
href リンク先のページのURLを書きます
target リンク先のページを開くときにどう開くかを指定できます。『_blank』と書くと別タブで開くことができます
<a href="https://iwachoco.com/wp/" target="_blank">挟んだ領域がリンク時に表示される文字です</a>

このようにすることでリンクを作ることができます。自分が書いた他の記事にリンクを入れたい場合なども多々あるのでよく登場するタグですね。

imgタグ

このタグは画像を挿入する際に使われるタグです。画像を全く使わないページを作る人はいないと思うので、これも必須のタグでしょう。

このタグも重要な属性があるので、しっかり押さえておきましょう。

属性 意味
src 開く画像ファイルを指定できます
alt 画像が表示できなかった場合に代わりに表示する文字を指定できます

他のwidth属性やheight属性,border属性はCSSで調整した方がデザインの幅が広いので特に覚えておく必要はありません。

<img src="./image.jpg" alt="サンプル画像です">

サンプルコードで使われている画像はここからダウンロードできます。保存の際にwindowが出てくる人はファイルの名前を『iwachoco.jpg』にしておいてください。保存する場所は読者の方がサンプルコード(tc—-.html)を入れているフォルダがあると思うので、同じフォルダ内にそのまま入れてください。(src属性のパスの部分を自力で書ける人は好きな場所に保存してもらって構いません(^ ^))

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>HTMLの勉強</h1>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <hr>
  <h2>サンプルコード</h2>
  <p>ここに段落があります。</p>
  <p>長い文章を書いてみると段落の存在が確認できます。適当に『ああああああああ』とか打って確かめてみてください。</p>
  <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
  <p><img src="./iwachoco.jpg" alt="サンプル用の画像"></p>
  <blockquote>ここに引用した文章を書くことになります。引用したものがweb上に公開されている場合は出典元をaタグでリンクしてあげる必要があります。</blockquote>
  <p><a href="https://iwachoco.com/wp/" target="_blank">勉強できるwebサイト</a>へのリンク</p>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
コラムで休憩 a と linkの違い

table, tr, td, thタグ

これらは表を作る際に使うタグになります。最初にtableタグを使って表であることを明示し、trタグを入れることで行を作成します。最後にtdタグでその行の要素を書いていきます。
また、thタグは表の一番上にある項目名を表記するためのタグになります。

<table>
  <tr>
    <th>果物</th>
    <th>特徴</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>甘い。赤い。美味しい</td>
  </tr>
  <tr>
    <td>ばなな</td>
    <td>柔らかい。黄色い。長い。僕は好きじゃない</td>
  </tr>
</table>

tbodyとかtheadみたいなタグもありますが自分もあんまり使っていないので必要性はそこまで高くないと思います。よほど大きな表を作るとかではなければ、table, tr, th, tdだけ覚えておけば問題ないですね。

tableタグの属性としてborder=”1″と書くと表に枠をつけることができますが、こちらはCSSで調整する方が見た目のデザインを変えやすいので、ここではborder属性を使いません。

captionタグを使うと表にタイトルをつけることができますが、デザイン重視のweb記事なら必ずしも必要とは限りませんので今回はサンプルに入れていません。表にタイトルをつけたい人はtableの開始タグの次に<caption>~</caption>としましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>HTMLの勉強</h1>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <hr>
  <h2>サンプルコード</h2>
  <p>生き物ってすごい!!</p>
  <table>
    <tr>
      <th>生物</th>
      <th>色</th>
      <th>特徴</th>
    </tr>
    <tr>
      <td>カメ</td>
      <td>緑~茶色</td>
      <td>可愛い。意外と力がある</td>
    </tr>
    <tr>
      <td>リス</td>
      <td>茶色</td>
      <td>すばしっこい。警戒心が強い</td>
    </tr>
    <tr>
      <td>ゾウ</td>
      <td>グレー</td>
      <td>でかい。皮が硬い</td>
    </tr>
  </table>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

ul, ol, liタグ

こちらはリストを作ることができるタグです。箇条書きやランキングなんかを作るときはこれを使うと簡単に作成できます。

箇条書きを作る際は、ulタグで囲った領域内に箇条書きの要素をliタグを用いて書いていきます。

<ul>
  <li>大きな大根</li>
  <li>たぬきの窓</li>
  <li>Dydoじいさんと缶</li>
</ul>

番号付きのリストを作る際も、olタグで囲った領域内に箇条書きの要素をliタグを用いて書いていきます。

<ol>
  <li>この素晴らしい講義に祝福を!</li>
  <li>ハッカーノ!</li>
  <li>響け!トロンボーン</li>
  <li>おジャ魔王そらし</li>
  <li>あくしろワールド</li>
</ol>

サンプルコードを試して、olタグとulタグの違いをみて学ぶとわかりやすいでしょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>HTMLの勉強</h1>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <hr>
  <h2>サンプルコード</h2>
  <p>2019年の振り返り</p>
  <ul>
    <li>研究室選びって大事だなと思った</li>
    <li>趣味ってなんだろうって考えるようになった</li>
    <li>お仕事どうしよう!!</li>
  </ul>
  <p>2020年のやりたいことランキング</p>
  <ol>
    <li>ゲーム開発, アプリ開発</li>
    <li>イラストをたくさん描く</li>
    <li>読書ができる程度に時間に縛られない生活を送る</li>
  </ol>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

strong, bタグ

このタグは文字を太くする際に使います。strongタグもbタグも太字にするタグなのですが、意味合いが異なっています。strongタグには意味的な強調もあるので本当に重要な部分ではない限りは、bタグやspanタグでCSSを使った太字などを用いる方が良いでしょう。

<p>あなたの戦闘力は<b>53万</b>です</p>
<p>プログラミングの勉強において大切なのは<strong>アウトプット</strong>です</p>

これについてはbタグを使うなという人もいるので個人で判断してもらった方が良いのかもしれません。ちなみに自分はbタグを使って記事を書いていますヽ(´o`;)

em, iタグ

このタグは文字を斜めにする際に使います。上の項目のstrongとbタグ同様、意味的な強調をもつか持たないかで用途が違います。emタグは意味的な強調がありiタグには意味的な強調はありません。

<p>学問において生物の種属は斜めにするルールがあります。例えばホモサピエンスはこうなりますね。<i>Homo sapiens</i></p>
<p>このサイトにおいてホモサピエンスはどうでもいいのでiタグを用いています。この項で大事なのは<em>emタグとiタグの違い</em>です</p>

delタグ

これは文章の中に取り消し線を入れる際に使われるタグです。あえて間違った解釈をdelタグで囲むことで、取り消し線を使った誤解の生じにくいwebページが作れます。同じようなタグでsタグがありますが古いタグなので使わないようにしましょう。

<p>カレーは<del>飲み物だよな。</del>食べ物だろ。</p>

以下はサンプルコードです。bタグ, strongタグ, iタグ, emタグ, delタグの例です。これは簡単に理解できると思います。他にもsmallタグとか色々ありますがマイナーなので割愛。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>HTML講座</title>
</head>
<body>
  <h1>HTMLの勉強</h1>
  <p>このページではhtmlを中心に学んでいきます。</p>
  <hr>
  <h2>サンプルコード</h2>
  <p>bタグとstrongタグの比較</p>
  <p>bタグを使った場合-><b>ABCDEFG</b> </p>
  <p>strongタグを使った場合-><strong>ABCDEFG</strong> </p>

  <p>iタグとemタグの比較</p>
  <p>iタグを使った場合-><i>ABCDEFG</i> </p>
  <p>emタグを使った場合-><em>ABCDEFG</em> </p>

  <p><del>bタグとstrongタグは同じ。</del></p>
</body>
</html>

確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果

form, input, button, label, select, option, textareaタグ

これらのタグはコメントフォームや、登録フォームなどの入力欄を作る際によく用いられるタグで、PHPと合わせて使うことが多いですね。ここではフォームの作り方の概要(イメージ)だけ説明してざっと流して見ていきます。

最初にフォームを作りたいところにformタグを入れ、その中にinputタグやbuttonタグ, selectタグなんかを入れて部品を当てはめていきます。特にinputタグは属性のtypeの値によって様々な部品になるのでコメントフォームを作る場合には、しっかり勉強しなければなりません。
これらに関しては、この項目だけで1本記事がかけるぐらい話すことがあるので、PHP講座をやる時がきたらフォームの作り方について全部お話ししようと思います。今は無理に勉強しなくても大丈夫でしょう。

scriptタグ

他のスクリプトファイルを読み込むために使われるタグです。自分はjavascriptのファイルを読み込むのに使っています。javascriptについてはこの講座では扱わないのでサンプルコードは割愛します。

重要な属性は、srcとtypeです。src属性はimgタグのところで出てきたものと同じなので覚えやすいでしょう。

属性 意味
src 開くファイルを指定できます
type ファイルの種類を指定できます。JavaScriptを用いる際は『text/javascript』とします
<script src="ファイルの場所" type="text/javascript"></script>

まとめ

bodyタグで使うもので思いついたタグをまとめてみました。頻出のものは大体網羅したはずですが漏れがあったらコメント欄などで教えていただけると助かります。

これだけ多くのタグがあると一度で全部をカバーするのは難しいので、web制作をしながらコツコツ見直していく感じで勉強してみてください。


最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。

Print Friendly, PDF & Email

CSSカテゴリの最新記事