【HTML&CSS講座 #3】" width="640" height="395" >
前回に引き続きこのシリーズでは『Webページの制作ができるようになる』というのを目標にHTMLやCSSを学んでいきます。
早いもので今回の記事でHTMLの知識はほとんど習得できることになります。やや詰め込みすぎた感じがしますが、それだけ重要な情報を盛り込んであるので頑張っていきましょう。
覚えずに印刷してチートシートっぽく使うのもアリだとは思います。
前回の続きということで、早速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で定義されているタグについてはpreタグ内でも普通に適用されてしまうので注意が必要です。
<!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タグ
このタグは画像を挿入する際に使われるタグです。画像を全く使わないwebページを作る人はほぼほぼいないと思うのでこれも必須のタグでしょう。
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>確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
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>2020年の振り返り</p>
<ul>
<li>研究室選びって大事だなと思った</li>
<li>趣味ってなんだろうって考えるようになった</li>
<li>お仕事どうしよう！！</li>
</ul>
<p>2021年のやりたいことランキング</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と合わせて使ったり、JavaScriptと合わせて使ったりすることが多いですね。ここではフォームの作り方の概要(イメージ)だけ説明してざっと流して見ていきます。
最初にフォームを作りたいところにformタグをおきます。そのformタグの中にinputタグやbuttonタグ, selectタグなどを入れて部品を当てはめていきます。特にinputタグは属性のtypeの値によって様々な部品になるのでコメントフォームを作る場合には、しっかり勉強しなければなりません。
これらに関しては1本記事がかけるぐらい話すことがあるので、余裕があればフォームの作り方についてお話ししようと思います。今は無理に勉強しなくても大丈夫でしょう。
scriptタグ
他のスクリプトファイルを読み込むために使われるタグです。自分はjavascriptのファイルを読み込むのに使っています。javascriptについてはこの講座では扱わないのでサンプルコードは割愛します。
重要な属性は、srcとtypeです。src属性はimgタグのところで出てきたものと同じなので覚えやすいでしょう。
| 属性 | 意味 |
|---|---|
| src | 開くファイルを指定できます |
| type | ファイルの種類を指定できます。JavaScriptを用いる際は『text/javascript』とします |
<script src="ファイルの場所" type="text/javascript"></script>まとめ
bodyタグで使うもので思いついたタグをまとめてみました。頻出のものは大体網羅したはずですが漏れがあったらすみません。
これだけ多くのタグがあると一度で全部をカバーするのは難しいので、web制作をしながらわからないものが出てきたらその都度調べて引き出しを増やしていきましょう！
最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。
