押さえておきたいWeb知識 
HTMLの基本的な書き方を作成したい人
この記事は上記のような疑問を解消するものとなっています。
HTMLファイルとCSSファイルを作成したら、Webページの土台を整えていく必要があります。
Webページの土台はHTMLというマークアップ言語を利用して作成します。
HTMLはWebページを作るために欠かすことができないものです。
そんなHTMLを利用してWebページの土台を作っていきますので、気になる方は是非最後まで読んで頂ければと思います。
目次
1.HTMLとCSSとは?
Webページの土台を作る前にHTMLとCSSとは何かみていきましょう。
HTMLとは?
HTMLはWebページの土台を作るための言語です。
HTMLはテキストに「タグ」と呼ばれるものを利用して記述していきます。
「タグ」は「<開始タグ>~<終了タグ>」というようなルールでソースコードを書いていきます。
例えば、HTMLを利用することで「ここからここまでは見出し」、「ここからここまで段落」ということができます。
世の中のほとんどのWebページはHTMLでWebページの土台ができています。
CSSとは?
CSSは見た目のデザインを整える言語です。
例えば、CSSを利用することで「文字色」、「背景色」、「文字サイズ」などを指定できます。
HTMLだけを利用してWebページを作成すると単調なものになりますが、CSSを利用することでWebページをキレイに整えれます。
2.Webページの土台をつくっていきましょう!
ここではHTMLを利用して最低限必要な設定をみていきましょう。
Webページの土台の完成イメージは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webページの土台</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> |
- <html>~</html>：HTML文書であることを宣言する
- <head>~</head>：ヘッダ情報を表す
- <body>~</body>：文書本体を表す
- <meta>：メタ情報を指定する
- <title>~</title>：文書のタイトルを表す
- <link>：スタイルシートを指定する
Webページの土台作成手順
何が何だか分かりづらいかと思いますので、一個一個詳しくみていきましょう。
1行目でDOCTYPE宣言をします。
|
1 |
<!DOCTYPE html> |
「<html>~</html>」の中に「<head>~</head>」と「<body>~</body>」を用意します。
そして、「<html>~</html>」にはlang属性を追加しました。
日本語を記述していくので、「ja」という値とします。
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <html lang="ja"> <head> </head> <body> </body> </html> |
次にエンコードの種類を指定します。
エンコードの種類を指定することで文字化けが起きるのを防ぐことができます。
エンコードの種類は「<head>~</head>」の中に「<meta charset=”UTF-8″>」を追加します。
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> </body> </html> |
タイトルは「<head>~</head>」の中に「<title>~</title>」を追加します。
ここでは「Webページの土台」というタイトルにしたいので、「<title>Webページの土台</title>」とします。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webページの土台</title> </head> <body> </body> </html> |
デザインを指定することができるスタイルシートを指定します。
スタイルシートは「<link rel=”stylesheet” href=”style.css”>」で指定できます。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webページの土台</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> |
3.まとめ
最低限必要な設定はこれで終わりです。
一個一個みていくとWebページ土台の作成はそんなに難しくないと思います。
途中で分からないことがあり、中々進まないこともあると思います。
しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!
以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)
以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。
他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。
[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本
[必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座
