さて今回はHTMLとCSSの勉強をしてみたいと思ったので、Progateの「HTML & CSS 初級編」をやってみました。
その内容と感想を備忘録として残していこうと思います。
「HTML」とはハイパーテキストマークアップランゲージの略です。
「CSS」とはカスタムスタイルシートの略です。
それぞれの説明はググるとたくさんあるのであえてここでは書きませんが、簡単に言うとHTMLはWebサイト（HP）を作るためのプログラム言語のひとつです。
普段ひろゆきさんがプログラミングやるならHTMLからやってみればって言ってるやつです。
CSSはWebサイトのデザインをするためのプログラム言語のひとつです。
勉強に使ったサイト
勉強に使ったサイトは「Progate」です。
Progateを見ていたらHTML&CSS初級編は無料でできるみたいなのでまずは無料でやってみます。
中級編からは月額1,078円税込が必要です。
HTML & CSS 初級編でやること
HTML & CSS 初級編では次のようなことをやりました。
- HTMLに触れてみよう！
- CSSに触れてみよう！
- レイアウトを作ろう！
- ヘッダーを作ろう！
- フッターを作ろう！
- コンテンツを作ろう！
- お問い合わせフォームを作ろう！
大体、この7つをやると3,4時間ぐらいでHTML&CSSとはどのようなものなのか？ということが分かります。
やってみた感想
まず思ったのは無料でここまでできるのってすごいなぁ！と思いました。
説明は図付きで説明されているので分かりやすいですし、演習問題も勉強した内容にすぐ戻れるようにできているので、分からなければ戻ることもできるので迷わずにサクサク進めることができました。
ただ、初級編をやるだけでは普段見ているようなYahooとかYoutubeとかのサイトは全く作れませんｗ
本当にHTML&CSSとはどういうものなのか？というのを理解するための初級編ですね。
5分でできる簡単なWebページ
文章読むだけではイメージしずらいので、一番簡単なWebページを作ってみましょう。
準備するもの
準備するものは「パソコン」と「メモ帳」です。
パソコンを使っているという前提で話しを進めます。
HTMLを使ってWebページを作ってみる
HTMLを使ってWebページを作ってみます。
今回はメモ帳を使って説明しますが、もしインストールするのが面倒でなければ、エディターツールを使った方が便利だったり見た目がかっこよかったりします。
おすすめのエディターは「VS Code」とか「Pycharm」です。
手順
- デスクトップ上で右クリック＞「新規フォルダ」を選択し、「HTML_CSS」という名前のフォルダを作成します
- メモ帳を開きます
- 開いたら以下の文字をコピペで貼り付けます
- 貼り付けが終わったら「名前を付けて保存」を選択して、名前を「Hello_World.html」としてに「HTML_CSS」フォルダに保存します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
そうすると保存した先に「HelloWorld.html」という名前でファイルができるのでそれを開くとWebページが完成です！！
こんな感じですね。
全く役に立たないWebページですが、でもWebページですｗ
HTMLはタグと呼ばれるもので書かれていて＜＞がタグになります。
そのタグの中に決まった文字を入れると、タグで設定されている動作を表示してくれます。
先ほどのコードの例で行くと次のようなものです。
| タグ | 意味 |
| !DOCTYPE html | 正確に言えばHTMLのタグではないですが、HTMLを作るときに初めに書くおまじないのようなものです |
| html lang=”ja” | これもタグではないのですが、このWebページは日本語で表示しますよって宣言しています |
| head | Webページに関する情報を入力するタグです |
| title | Webページのタイトルを宣言するタグです |
| body | body以降から本文になりますよって宣言するタグです |
| h1～h6 | 「h」タグは文字の太さを変更するタグです。数字が大きくなるほど文字が小さくなります。 |
その他よく使われるタグには次のようなものがあります。
| タグ | 意味 |
| a | リンクを埋め込むタグ（他のページへリンク先の指定） |
| img | 画像を挿入するタグ |
| p | 段落指定するタグ |
| br | 改行指定するタグ |
| hr | 罫線を水平歩行に引くタグ |
以上がタグの説明でした。
続いてCSSを適用してみます。
手順
- 先ほど作った「Hello_World.html」を開いたメモ帳にドラッグアンドドロップするか、右クリック＞「プログラムから開く」＞「メモ帳」を選択します
- <head>タグの<meta>タグの下にスタイルシートのリンク先を指定します。
<link rel=”stylesheet” href=”stylesheet.css”> - ファイルを保存します
- 新たにメモ帳を立ち上げます
- メモ帳の中に次のコードを入力します
- 入力後、名前を付けて保存で「stylesheet.css」という名前で「HTML_CSS」フォルダに保存しましょう
h1 {
color: red;
}
もう一度「Hello_World.html」を開いてみます。
<h1>タグの部分だけが赤色になりました。
HTMLと同じで先ほど書いたスタイルシートに決まった文字を入れると、CSSではタグに対してデザインを設定することができます。
先ほどのコードの例で行くと次のようなものです。
| タグ | 意味 |
| color: red; | 文字の色を赤色にするという意味です |
もちろん文字の色を変える以外にも、様々な方法（文字のサイズを変えたり、余白を入れたり）がありますので興味がある方は色んなサイトがあるので探してみてください。
コードまとめ
最後に作成したコードのまとめをしておきます。
- HTMLファイルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
- CSSコード
h1 {
color: red;
}
今日はここまでです。
ありがとうございました。
コメント