HTML入門編 No.3
もっとたくさんの機能を触ろう
見出しの付け方
これまでの記事でWebページの内容は書けるようになりましたが、上にタイトルがないと少し寂しい感じもします。なので見出しの付け方、文字の強調の仕方について説明します。
まずは、どのようなものがあるか見るよりやってみたほうが早いので、実際やってみましょう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<h1>なんか大きい</h1> <br>
<h2>結構大きい</h2> <br>
<h3>まあ大きい</h3> <br>
<h4>多分大きい</h4> <br>
<h5>もしかしたら大きい</h5> <br>
<h6>大きい。知らんけど。</h6> <br>
</body>
</html>とりあえずこのコードをコピペして、実行してみましょう！
実行したら、このようになるはずです。
使用用途としては、一番上のものはWebページの一番上に書くタイトルにしましょう。上から2番目のものは見出しとして使えますね。
上から3番目のものは小見出しとして使いましょう。
このようにしたい部分の文章を、<h1>などで囲いましょう。
ちなみに、上から<h1>、<h2>、<h3>、<h4>、<h5>、<h6>となっています。
見出しについては以上です。
文字を強調する
ある部分を強調したいときは、
このように、<em>または<strong>で囲います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
やっぱり<strong>ポテチ</strong>と<strong>コーラ</strong>の
組み合わせって<em>最高だよね</em>。
</body>
</html>これを実行してみるとこうなります。
このように、<strong>で囲った部分は太字に、<em>で囲った部分は斜体になります。こうすることによって、伝えたいことをより強調することができます。しかし、<strong>に関しては、大体のブラウザでは太字になりますが、ただ強調するということを表しているだけなの、もし太字にすることが目的の場合はCSSを使うようにしましょう。ですが、太字にすることが目的で<strong>を利用しても大して問題はないので、恐れることなく使ってしまいましょう。
リストを作る
次に、リストを作ってみましょう。リストは、ページの目次を作ったりするのに役立ち、簡単にできるので、この機会にやり方を覚えてしまいましょう！
リストの表示の仕方にも2つ種類があり、一つ目の種類は箇条書きの時使うような
・レタス
・トマト
・牛肉
・バンズ
このようなリストの形です。
二つ目の種類は番号が振ってある形式で、
1.レタス
2.トマト
3.牛肉
4.バンズ
のように出力することができるものです。
次に、それぞれの書き方について説明します。
まず、最初の箇条書きのような書き方は
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<ul>
<li>レタス</li>
<li>トマト</li>
<li>牛肉</li>
<li>バンズ</li>
</ul>
</body>
</html>このように書きます。
これはどのような構造になっているかというと、
<ul>という部分がこれで囲まれている部分が箇条書きで書かれたリストですよということを示しています。
そして、それぞれの要素を<li>で囲むことで、この囲まれている部分で一つの要素なんだなということを示しています。
続いて、二つ目の番号が振られた方の書き方です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<ol>
<li>レタス</li>
<li>トマト</li>
<li>肉</li>
<li>バンズ</li>
</ol>
</body>
</html>何が変わったかわかりますか？
正解は、<ul>と書いていた部分が<ol>に変わっただけです。これだけで数字のついたリストにすることができます。
そして、下のコードのように、リストは重ねがけをすることができます。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<ol>
<li>
<ol>
<li>レタス</li>
<li>水気を切ったレタス</li>
<li>なんか、、もう、、すごいレタス</li>
</ol>
</li>
<li>トマト</li>
<li>肉</li>
<li>バンズ</li>
</ol>
</body>
</html>
このように組み合わせることができるので、だんだん細かくなっていく見出しなどで、ぜひやってみてください。
リンクを移動しよう
次に、リンクの移動の仕方について説明します。リンクの移動とは、そのなの通り押したら他のページに飛ばされるというやつです。
まずは書き方を説明しますので、コピペをして、実行してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<a href="https://www.youtube.com/">youtube</a>にアクセス
</body>
</html>Youtubeと色のついた部分をクリックすると、Youtubeのページに飛ばされたと思います。では、どのように応用して使うかを説明していきます。
まずこの「""(ダブルクオーテーション）」で囲われたこの部分にリンクを貼ります。この場合はhttps://www.youtube.com/ですが、例えばsecond.htmlというのを作成し、このダブルクオーテーションの中にsecond.htmlと打てば、自分の作った他のページにアクセスすることができるようになります。
また、その右に書かれている何でもないテキスト部分は自由に変更でき、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<a href="https://www.youtube.com/">詐欺サイト</a>にアクセス
</body>
</html>このように、ボタンの中の要素を変えることができます。(Youtubeさんすいません）
テキスト以外も作ろう
ここでは、紹介し忘れていたButtonの存在について紹介しようと思います。
とりあえず、以下のコードを試してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<button>ボタンです</button>
</body>
</html>そうすると、
このようなボタンができます。このボタンがどのように使えるかというと、先ほど紹介したリンクを移動するときのボタンとなるテキストの部分にこのボタンを使うことができるんです。
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
My first page
</title>
</head>
<body>
<a href="https://www.youtube.com/"><button>Youtube</button></a>
</body>
</html>
このように、ボタンを利用することで、さらにいろいろな表現ができるようになります。
応用編
リストとリンク移動を組み合わせる
見出しを作る時などに、例えばこのページだと
・もっとたくさんの機能を触ろう
・見出しの付け方
・リストを作る
・リンクを移動しよう
・テキスト以外も作ろう
・応用編
・リストとリンク移動を組み合わせる
このようになっています。
ここで、ただ見出しを表示するだけではなく、
<li>で囲んだ部分の中に要素としてリンクを移動させるコードを書く
例：
<li><a href="second.html">見出しの付け方</a><li>と、移動できる目次を作ることができます。たくさんページがあるといちいち開くのが大変なので、自分がよく使うページをまとめて簡単にアクセスできるようにするページを作ってみましょう！
これでこの記事は終わりです。もしこの記事が少しでも役に立つと思ったら、いいねを押してくださると幸いです。読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？