プログラミング 勉強

プログラミング初心者の僕が最初に思った3つの疑問 【HTML・CSS】

こんにちは、なおです。

 

最近フリーランスとして生きていくためにプログラミングを学び始めました。

 

今はHTMLとCSSを学んでいる途中ですが、始めた時にモヤモヤする疑問がいくつかでてきたのですが、参考書で解決できたので紹介したいと思います。

 

その疑問とは以下の3つです。

 

  • !DOCTYPE htmlについて
  • meta charset="UTF-8"について
  • link href="style.css" rel="stylesheet"について

 

おそらく、プログラミングを始めようとしている方で、この3つの疑問がでてきた方も多いのではないでしょうか。

 

そこで今回は、HTML・CSSを書く際に必ずでてくるこの3つのコードについて紹介したいと思います。

 

ぜひ参考にしてみてください。



!DOCTYPE htmlについて

HTML文書を作成する際に、このコードは一番最初に目にするものだと思います。

 

この文字コードは、DOCTYPE宣言(Document Type Definition、 DTD)といって必ず1行目に記述するものです。

 

これは、その文書がHTMLのどのバージョンで作成されているのかを宣言するためのものです。

 

実は、HTMLにはバージョンがありましてHTML1→HTML2→HTML3→HTML4→HTML5とあり、現在の最新バージョンは5です。

 

バージョンによって書き方や実現できることが異なるので、これから勉強する方はHTML5から勉強するのが良いでしょう。

 

このHTML5で作成するのを宣言するために!DOCTYPE htmlという文字コードが必要なのです。

 

以前は長い記述が必要でしたが、HTML5ではとてもシンプルになりました。

 

meta charset="UTF-8"について

まず、meta要素というのは文書に関するさまざまな情報(メタデータ)を指定するための要素です。

 

どのようなページなのかを説明する文やキーワード、作者などのWebページに関する幅広い情報を記述します。

 

また、HTML文書では必ず文字コードを指定する必要があります。

 

〜文字コードとは〜
コンピュータ上にあるデータは全て数字に変換することができますが、文字も例外ではなく、ひとつひとつの文字にはそれぞれ数字が割り当てられています(赤→#e60033 青→#0095d9など)。
どの文字にどの数字を割り当てるかを規定したものを「文字コード」といい、Webサイトを作成する際には文字コードを理解する必要があります。

 

文字コードには「Shift-JIN」「EUC-JP」など、さまざまな種類があり、最近の日本語のWebサイトは「UTF-8」という文字コードが主流となっています。

 

これから新しくWebサイトを作成する場合は標準的なコードである「UTF-8」を選択するのが良いでしょう。

 

つまり、meta charset="UTF-8"と記述することで、このHTML文書では「UTF-8」という文字コードを使っていますよということを伝える役割があります

 

ちなみに、charsetとはHTML文書の文字コードを指定する属性のことです。

 

meta charset="UTF-8"」はこのままセットで覚えてしまった方が良いでしょう。

 

link href="style.css" rel="stylesheet"について

HTMLとCSSは、Webサイトをデザインする上で欠かせない言語です。

 

HTMLは文書構造を指定する言語であるのに対して、CSSはそのHTML文書のレイアウトや装飾など見た目を指定するための言語です。

 

このCSSを記述する場所は、大きく分けて2つあります。

 

  1. HTML文書に直接記述する
  2. 外部ファイル(CSSファイル)に記述する

 

「link href="style.css" rel="stylesheet"」を記述する必要があるのは2番目のほうです。

 

外部ファイルとしてCSSファイルを作った際に、そのCSSファイルをHTMLファイルとつなげるためにこのコードを記述するのです。

 

まとめ: 1つひとつ確実に覚えていこう

プログラミング学習では、覚えることが多いのでひとつひとつ確実に身につけていきましょう。

 

この記事で、疑問が一つでも解決することができたら嬉しいです。

 

これからも、僕がプログラミング学習していく過程で解決できた疑問があれば紹介していきたいと思います。

 

おそらくこの記事を見てくださっている方は、「プログラミングを始めようかな」「プログラミングを始めたばかり」という方だと思いますが、お互い頑張っていきましょう!

 

それじゃ、バイバイ👏



このエントリーをはてなブックマークに追加

-プログラミング, 勉強
-,

© 2022 なおブログ Powered by AFFINGER5