More than 3 years have passed since last update.

第2回　HTMLコードに肉付けをしてみよう

HTML

Last updated at 2022-01-19Posted at 2022-01-05

はじめに

HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。
HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。

注意事項

この投稿は第1回目の続きになります。そのため、前回紹介した内容は説明せずに進めていきます。
ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。
説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。
使用するのはGoogle Chrome、Visual Studio Codeの2点になります。

1.タイトルの変更

タイトルとはどこの部分を示すのか

画像の赤線部分のことを言います。

こちらを変えていくには前回書いたコードのheadタグの中にtitleタグを入れてあげましょう。

<html>
    <head>
        <title>hamuo3{ここは各自タイトルにしたい言葉を入れてください}</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

今回はhamuo3と入れたのでこのように変わっていればOKです。

2.宣言とは

現在のバージョンで一番新しいHTMLの仕様でコードを書きます。というお約束のようなものだと思ってください。書き方はhtmlタグの上にと入れるだけです。

<!DOCTYPE html>
<html>
    <head>
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

3.言語の指定

今回は日本語の指定をします。
言語の指定を行うときはhtmlの開始タグの中に書いていきます。
htmlの開始タグの後ろに半角でスペースを入れた後にlang="ja"を入れます。
langはlanguegeのことでjaはjapaneseのことを表しています。
このとき指定する言語jaはダブルコーテーションで挟んでください。

<head lang="ja">

4.文字コードの指定

文字コードとは専門的な話しになり、長くなるのでここでは文字化けを防ぐためのものと思ってください。
詳しく知りたい方は調べてみてください。
今回使う文字コードはutf-8を使っていきます。
書き方はheadタグ内にmetaタグを使って書きます。
このmetaタグとは今回のhtmlは文字コードutf-8を使って書居ていきますよ。と宣言するものになります。
コードはこのように言語の指定同様charsetの中からutf-8を使うためダブルコーテーションで囲います。

    <head>
        <meta charset="utf-8">
        <title>hamuo3</title>
    </head>

ここまでできましたら、次は様々な文字を追加していきましょう。

5.段落をつけるには

ｐタグを使います。このｐはparagraphそのまま段落という意味です。
書きかたはbodyタグの中に書きます。
参照コード

<!DOCTYPE html>
<html>
    <head lang="ja">
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>woooooooooo</p>
    </body>
</html>

実行結果

一段下がっていることが確認できますね。

6.文字を太くしてみよう

文字を太くしたいときはｂタグ(bold)もしくはstrongタグを使います。どちらも太字にする機能がありますが、あえて使い分けるとすれば強調したいときはstrong、字を太くしたいときはｂを使えば良いと思います。
書き方は太くしたい単語を上記のタグで挟むだけです。

<p>woo<b>000</b>ooooo<strong>ooo</strong>ooo</p>

実行結果

7.見出しの大きさを変えてみよう

見出しとは

見出しとは第1回目の最後に私が説明を飛ばした、hタグのことです。この見出しはh1~h6まで付けることができて、全てbodyタグの中に書きます。
参照コード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h3>
        <h5>Hello World</h3>
        <h6>Hello World</h3>
    </body>
</html>

実行結果

このようになったでしょうか。

8.文字の色を変えてみよう

文字の色を変えるのにはfontタグを使います。
使い方は色を変えたい部分とこのように挟むだけです。
今回は3つ目の見出しを赤色に変えてみます。
参照コード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3><font color="red">Hello World</font></h3>
        <h4>Hello World</h3>
        <h5>Hello World</h3>
        <h6>Hello World</h3>
    </body>
</html>