【html&css】文章をブラウザで表示してみよう!文字化けに注意!

スポンサーリンク


こんにちは。みやごん(@pokki1216)です。

今回はhtmlを使って、ブラウザ上に文字を表示させる方法について学習していきます!

ブログしか書いたことがない場合、ブラウザに文字を表示するときに文字化けしない方法を知らない方が多いのではないでしょうか??

文字化けに困っている方にも参考になると思います!

そもそもhtmlとは??


htmlはハイパーテキストマークアップラングエッジ(Hyper Text Markup Language)のことで、Webページを作るときに使用される言語です。

リンクをつけたり、色を変えたりすることができます。

Webサイトを作るときにほぼ必須の言語です。

なのでWebサイトを作りたい!と思っている人は僕と一緒に勉強をすすめていきましょう!

htmlでかいた文章をブラウザで表示する

下の写真のように、ブラウザ上で文字を表示させることが今回の目標です。

ブラウザっていうのは、普段インターネットで検索するときに使用しているものです。

僕はMacbookでSafariを使用していますが、パソコンのosがwindowでも、ブラウザがInternet ExplorerでもGoogle Chromeでも問題ありません。

[marker]必要なツールはメモ帳などの文字を書くツールのみ[/marker]です。

準備ができたら早速かいていきましょう。

htmlを書くときの基本構成

まずhtmlを書いていくときの基本となる構成は以下のようになります。

<html lang = "ja"> <!-- ①htmlを使う際に必要なコード -->
<head> 
  <meta charset="UTF-8"> <!-- ②文字化けしないおまじない -->
  <!--③ここにヘッダーのコードをかく -->
  <title> 
    <!--④ここにタイトルをかく -->
  </title>
</head>
<body> 
  <!--⑤ここに本文をかく -->
</body>
</html>

順番にすすめていきましょう!

htmlをかくときに必須のコード

htmlをかいていくときに最初に書かなければならないコードが①番です。このときの”lang”は言語(language)を意味していて、後ろの”ja”は日本語(Japanese)のことを表しています。

lang以降はなくても問題ありませんが、つけておくと翻訳機能を使用する際に役に立つようです。

また、上で示したコードの最後を見てみると

</html>

というものがありますね。これはhtmlの終わりを示してます。

つまり

<html lang = "ja">
<!-- ここにhtmlのコードを記述していく -->
</html>

この挟まれた部分にコードを書いていきます。

ヘッダー部分を作るときに必要なコード(文字化け解消もここで)

次にヘッダー部分を作るときに必要なコードをかいておきます。今回の内容ではありませんが基本構成ですので学習しておきましょう。

ヘッダーとはホームページ全体の上部分のことです。

ヘッダー

この部分を作るためにはヘッダーのコードをかく必要があります。

<html lang = "ja">
<head>
  <!-- ここにヘッダーのコードをかく -->
</head>
</html>

上記のところに文字をかいていけば画像のようなヘッダーを作っていくことができるわけですが、今回は省略。

ただし、このヘッダー部分にどうしてもかいておかないといけないコードがあります。それが以下のコード。

<html lang = "ja">
<head>
  <meta charset="UTF-8"> <!-- これが絶対に必要!!!! -->
  <!-- ここにヘッダーのコードをかく -->
</head>
</html>

このmeta・・・という部分は文字化けを防ぐために必要なコードとなっています。

これが何かというと、ブラウザが文字の種類を読むために使うもので、”UTF-8“という部分がその種類を表してます。

他にもいくつかありますが、最近はこれが主流みたいですね。

後述しますが、この部分がないと意味がわからない文字になってしまうので必ず記述しましょう。

タイトルをつけるのに必要なコード

タイトルというのはホームページ内に大きくかかれているものではなく、以下のことを指します。

つまりブラウザのタブ部分にかかれているのがタイトルです。

タイトルをかく部分はヘッダーの中に入れます。

<html lang = "ja">
<head>
  <meta charset="UTF-8">
  <title>
    <!-- ここにタイトルをかく -->
  </title>
</head>
</html>

もしタイトルを”文字を表示してみよう”にしたいなら

<html lang = "ja">
<head>
  <meta charset="UTF-8">
  <title>
    文字を表示してみよう
  </title>
</head>
</html>

そうすると・・・

変わりましたね!好きなタイトルをつけましょう。

本文をかいていこう

いよいよ本文をかいていきましょう!

本文はヘッダー部分の下にかいていきます。

<html lang = "ja">
<head>
  <meta charset="UTF-8">
  <title>
    文字を表示してみよう
  </title>
</head>

<body>
  <!-- ここに本文をかく -->
</body>
</html>

この部分に”文字が表示できた!“と入れてみます。

するとこのように文字を表示させることができました!!やりましたね!

文字化け解消のおまじないを消すとどうなるか

おっと忘れていました、ヘッダー部分に記述した文字化けを解消するおまじないを消すとどうなるかみてみます。

「なんだこれはっっ!!!!」

となるので必ず記述しましょうね!

どうすればhtmlでみれるの?

ここまでの中で、僕はhtmlをブラウザで表示していましたが、この方法はとても簡単です。

それはメモ帳などのツールでかいたものを保存するときに拡張子を”〜.html“にするだけ。

どのツールでも同じです。ちなみに拡張子というのは保存する形式のことで、メモ帳などを普通に保存すると.txt、音楽を保存するときは.mp3などファイルの中身がどうなっているかを表すものです。

メモ帳などを名前をつけて保存するときには以下の画像のように.txtになっていると思います。

この後ろの部分をhtmlに変えてあげましょう。

するとhtml形式で保存することができました。

そして保存したファイルを開くのですが、そのまま開くとブラウザで開いてくれない場合があります。

その時は、ファイルを右クリックして、”Safari”や”Google Chrome”などを開くアプリケーションとして選択すれば開くことができます!

さいごに

今回htmlを使って実際にブラウザに文字を表示させることができました。

たった一行の文章をかくだけでも、初めてhtmlを使うと手間がかかります。

この学習をすすめていくとWeb開発をしている人たちがどれだけ大変かわかりますね!尊敬の眼差しで見つめましょう。
みやごん

最後に今回作ったhtmlを記述しておきます。

<html lang = "ja">
<head>
  <meta charset="UTF-8">
  <title>
    文字を表示してみよう
  </title>
</head>

<body>
  文字が表示できた!
</body>
</html>

最後までみていただきありがとうございました。次回もよろしくお願いします。

ブログランキング・にほんブログ村へ

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です