見出し画像

HTML入門編 No.2

Eito

色々な機能に触れよう

今回は、HTMLで使えるさまざまな機能を紹介します。今回紹介する内容ができるようになったら自分でWebページを作れる！と周りに自慢できるレベルになります！
では、さまざまな機能を紹介する前に、定型文について説明します。
HTMLには定型文があり、最初にこれをかかなくてはいけないというものがありますので、最初にそれを紹介します。

定型文の書き方

この定型文は毎回書くのは面倒なので、覚えなくても問題ないです。実際私もコードを書く際Visual Studio Codeのスニペット（予測変換のプログラミングver)に頼っているので問題ないです！コピペしましょう！
では、定型文の書き方について説明します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>
            <!--ここにWebページのタイトルを入力-->
        </title>
    </head>

    <body>
        <!--ここにWebページの内容を入力-->
    </body>
</html>

これが定型文です。この後何をしているかを説明しますが、細かい話なので興味のある方だけ読んでいただけると幸いです。

定型文の説明（飛ばしても大丈夫です）

では、ここからは上記の定型文で何をしているかを説明していきます。
先ほども述べたように、これは細かい話なので、読み飛ばしても大丈夫です。

まず、一行目の

<!DOCTYPE html>

このコードはブラウザでこのHTMLを実行したときに、レイアウトが崩れてしまうのを防ぐためのものです。なぜこれがレイアウトが崩れることの防止につながるかというと、HTMLにもバージョンがあり、そのバージョンがCSSというデザインする言語に古いバージョンのHTMLだと認識されることによって引き起こされます。なので、これを書かないとレイアウトが崩れる原因になるので、この文自体は何もしていませんが、
消さないでおきましょう。

次に、この<html>で囲っているのは何かを説明します。
これは、この文書ファイルの<html>で囲われている部分がこのファイルの内容なんだと伝えるために存在します。ですので、この中にコードを書かないと認識されず、表示されないというわけです。なので、
コードを書く際は<html>で囲われている部分に書きましょう。

そして、この部分には<html lang="ja">と書いてありますが、この右の「lang="ja"」という部分はそのhtmlが何語を使っているのかを判別し、絶対的に必要というわけではありませんが、音声認識などを使うときに役立ち、サイトの利用者が便利になるので、できればつけたほうが良いです。そして、この"ja"は日本語を使用しているということを表しています。なお、下は他の言語で表した際のこの文のコードです。

<!--日本語-->
<html lang="ja">
<!--英語-->
<html lang="en">
<!--中国語-->
<html lang="zh">
<!--フランス語-->
<html lang="fr">
<!--スペイン語-->
<html lang="es">

このように使えます。ぜひ日本語以外の言語でWebページを作る際に参考にしていただけると幸いです。

<head>
　<meta charset="UTF-8">
　<title>
　　<!--ここにWebページのタイトルを入力-->
  </title>
</head>

続いてこの部分です。

<meta charset="UTF-8">

このコードのこちらの文は、日本語でサイトを書く際に文字化けをしないようにするために書く定型文です。必ず入れましょう。

<title>
 <!--ここにWebページのタイトルを入力-->
</title>

また、この部分は、名前の通りタイトルを表していて、上のタブで表示される名前を切り替えることができます。

<body>
 <!--ここにWebページの内容を入力-->
</body>

そして、最後にこの部分です。ここは、この<body>と書かれたもので囲われたものの中に書いたものがWebページになるというものです。

この定型文さえコピペすれば、すぐにWebページを開発する準備ができました。では、次は肝心のWebページの中身の作り方について説明します。

レイアウトを作ろう

タイトル＆テキスト

まずは、タイトルを決めましょう。
書いた定型文の<title>で囲まれた部分にテキストを入力してみてください。
名前は自分で決めて大丈夫です。今回私は「My first page」という名前にします。
次に、定型文の<body>で囲まれた部分の中に、何か文字を打ち込んでみてください。今回私は「HTML頑張るぞ!」というテキストにします。
できたら、Macの方は「command+S」、Windowsの方は「Ctrl+S」で保存して、First.htmlをFinderもしくはExplorerで開いてみてください。

もし成功していたら、このようになっているはずです。もしできていなかったら、私のコードを下に置いておくので、何が違うか確かめてみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>
            My first page
        </title>
    </head>

    <body>
        HTML頑張るぞ!
    </body>
</html>

段落＆改行

先ほど書いたコードでは、段落を作ることができません。例えば、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>
            My first page
        </title>
    </head>

    <body>
        HTML頑張るぞ!
        今日も頑張るぞ！
    </body>
</html>

と入力しても、画面上では改行されずに、2つがつながって出力されてしまします。なので、ここでは段落の作り方と改行の仕方を説明します。
まず、簡単な改行から説明します。
改行をする方法は簡単で、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>
            My first page
        </title>
    </head>

    <body>
        HTML頑張るぞ!
        <br>
        今日も頑張るぞ！
    </body>
</html>

このように「<br>」と書くだけで改行ができます。
ですが、ここで注意点があります。
やってしまいがちなのですが、段落を作ろうとする際、この<br>を用いて作るといったことや、スペースを開けるためにこの<br>を用いるということはしないようにしましょう。

段落分けをする際は、これから紹介するものを使いましょう。
それは<p>です。
このように使います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>
            My first page
        </title>
    </head>

    <body>
        <p>
            HTML頑張るぞ!
            今日も頑張るぞ!
        </p>
        <p>
            HTML今日も頑張るぞ!
            <br>
            Webページ作るぞ!
        </p>
    </body>
</html>

このように、段落にしたい部分をまとめて<p>で囲みましょう。
なお、<br>との重ねがけもできるので覚えておきましょう。
では、試しにこのコードを実行してみてみましょう。

この通り、しっかりと段落分けができています。また、やはり<br>を入れないと改行できないことがわかると思います。

これで、簡単なレイアウトのWebページなら作れるようになりました。この調子で、どんどんWebページを作っていきましょう！

これでこの記事は終わりです。もしこの記事が少しでも役に立つと思ったら、いいねを押してくださると幸いです。読んでいただきありがとうございました。

いいなと思ったら応援しよう！