はじめに
Webサイトは、HTML と CSS の2つがセットになってできています。
また、コード例があるので実際に書いて覚えたい方は、VSCodeなどで書いていきましょう。
VSCodeのインストールは「コードを書くには」を参考にしてください。
まずはそれぞれの役割や、簡単なコードの書き方を見ていきましょう。
HTMLとCSSとは？
HTML（エイチティーエムエル）
Webページの骨組み（構造）を作る言語 です。
例：
- 見出し
- 段落
- リスト
- 画像
- ボタン
など、サイトの中身そのものをつくります。
CSS（シーエスエス）
HTML で作った骨組みにデザインを加える言語 です。
例：
- 色
- フォント
- 配置
- 大きさ
- 背景
などを設定します。
HTMLとCSSの関係を図で例えると…
HTML：家の柱・壁・間取り
CSS：壁紙・色・家具の配置・飾り付け
この2つが組み合わさって「Webページ」が完成します。
HTMLの基本構造
まずはシンプルなコードを見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！HTML入門です</h1>
<p>これは段落（文章）です。</p>
</body>
</html>それぞれの役割
<html>… HTML文書の始まり<head>… タイトルや設定<body>… Webブラウザに表示される部分（みなさんがweb上で見ている部分です）<h1>… 見出し<p>… 段落
CSSの基本（HTMLにデザインを追加）
HTMLだけだと見た目が地味なので、CSSで見た目を整えることができます。
HTMLと同じファイルに書く例（内部CSS）
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>上記コードは前述したHTMLコードの
<html>
この中に記載してください。
</html\>
HTMLの代表的なタグまとめ
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出し |
<p> | 段落 |
<img> | 画像表示 |
<a> | リンク |
<ul> / <li> | 箇条書きリスト |
<div> | まとまり（ボックス） |
<span> | 文章の一部を囲むタグ |
まずはここを覚えればOK！
しかし、これを見ただけで理解はできないと思いますので、書いていってどんな動きをするのか見るのが1番いいかもです！
便利に見やすくHTML/CSSコードを書く
HTML/CSSはVSCodeでは標準で使えるようになっています。
しかし、書く長期のを使えばもっとわかりやすく、見やすくなるので是非実践していきましょう！
indent-rainbow
VSCodeには拡張機能というコーディングを便利にするための機能をインストールできる場所があります。
画像の通り、右のアイコン欄の上から5つ目をクリック。
すると検索欄が出るので、「indent-rainbow」と入力してインストールしましょう。
この拡張機能は何かというと、「見やすくなる」です！
段落をそろえるときなどは色で認識できるので、便利だと思います！
Live Server
上記と同様に拡張機能で、「Live Server」を検索してインストールしましょう。
これはHTML/CSSを書く上では欠かせないかもしれません。
インストール後（反映されない場合はVSCodeを再起動）、自分が作った「test.html」などのファイルをVSCodeで開きます！
ない場合は作成してください。
作成場所は上部にある「＋マーク」の部分ですね。
左側はファイルの作成、右側はフォルダの作成になっていますので、今回は左側をクリックしてファイルを作りましょう。
またhtmlのコードを記載するので、「test.html」!
赤字の「.html」をわすれないように！これがhtmlのファイルですよ！という証明であり、これがないとhtmlのコードを書いても認識してくれません。
大分間が開いてしまったので改めて下記画像を参考に進めていきます。
コードを書くスペース内で右クリックをすると画像のように項目が出てきます。
その中をスクロールしていくと「Open with Live Server」という項目があるので、クリック！
するとブラウザが開いてこんな画面になります。
そう！これがあなたの作成したhtmlをwebで見れているの状態です。
「Live Server」が便利なのは、HTML/CSSのコードの更新がリアルタイムで先ほどの画面に反映されるのです。
逆に言えばこれがないと、コードを書き換えて保存して、いちいちファイルを開きなおさないといけないのです。めんどくさい、、、
試しに下記画像のように書き換えてみましょう。
先ほど「blue」になっていたところを「red」に変更。
すると先ほどのブラウザを見ると
赤くなってます！！
大抵はこの「Live Server」を使って、変更をリアルタイムで見ながら修正していくと楽なので是非インストールしてみてください！
実際に表示してみよう
以下コードを実際に表示してみましょう。
開くときは先述のLive Serverで開くことをお勧めします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML/CSS 入門</title>
<style>
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>HTML/CSS 入門へようこそ！</h1>
<p>まずはHTMLとCSSの仕組みを理解しましょう。</p>
</body>
</html>まとめ
- HTMLは構造
- CSSはデザイン
- まずは簡単なコードを書いてブラウザに表示してみよう
なんとなく理解できればOKです！
では次回はもう少し詳しく解説していきますので！ではでは！
次回！：HTML/CSS入門② HTMLの基本構造
コメント