はじめに

皆さんこんにちは！第二回目ですね！

今回は、皆さんが入門講座でも行った「 HTML / CSS 」について、もうちょっと詳しく勉強していきたいと思います！
なるべくわかりやすくなるよう頑張るので、最後までお付き合いください！

ここからは、パソコンを使いますので、下記の設定を終えたパソコンを準備してください（部室のパソコンでも大丈夫です！）。

Windows 10 以上
Visual Studio Code がダウンロードされている → リンクからダウンロードしてください
設定が日本語になっている → 拡張機能「 Japanese Language Pack for Visual Studio Code 」をダウンロード、VSCode を再起動
「 Live Server 」「 HTML End Tag Labels 」「 Code Spell Checker 」「 Auto Rename Tag」の 4 つの拡張機能をインストールする

拡張機能の紹介

名前	Live Server	HTML End Tag Labels	Code Spell Checker	Auto Rename Tag
機能	HMTLのページをサーバーなしで表示してくれる	HTMLを書く時の終わりのラベルを勝手につけてくれる	コードの打ち間違えやスペルミスをチェックしてくれる	HTMLで初めのタグをかえたら終わりのタグも一緒に変えてくれる
アイコン

使うパソコンをかえたりする場合は、再度設定できているかを確認してから行ってくださいね！

1. HTML ってなんだろう

HTML とは、ウェブページの土台を作るための言語です。ウェブページに表示したい文章やウェブページの情報を独自のタグではさむことでHTMLを書いていきます。

では、皆さんも体験した「 img 」や「 a 」のようなタグは一体いくらあるでしょう？

…なんと、108 個も存在するんです！ですが、全部覚えていてはきりがないですね。基本的なものだけは覚えるようにした方がよさそうです。
最初に覚えてほしいタグをまずは覚えていきましょう。なにもテストをするわけじゃないので、使っていくうちに覚えていけるといいですね！

タグ	意味	例
`html`	HTML ファイル自体につけるタグ	`<html></html>`
`head`	ページのメタ情報をまとめるタグ	`<head></head>`
`title`	ページの題名のタグ	`<title>ページのタイトル</title>`
`link`	外部のファイルとをリンクするタグ	`<link rel="stylesheet" href="./main.css">`
`meta`	ページのメタ情報のタグ	`<meta name="viewport" content="width=device-width, initial-scale=1" />`
`style`	CSS を HTML 内に書く時のタグ	`<style>body { width: 100%; }</style>`
`script`	JavaScript を HTML 内に書くためのタグ	`<script>console.log("Hello World !")</script>`
`body`	実際に表示する内容全体のタグ	`<body></body>`
`h1 ~ h2 etc...`	見出しとなるタグ	`<h1>見出しだよ</h1>`
`p`	段落を書くタグ	`<p>段落（文章）だよ</p>`
`ul`	リストのタグ	`<ul><li></li></ul>`
`li`	リストの中身のタグ	`<li>リストの中だよ</li>`
`a`	リンクのタグ	`<a href="https://google.com">グーグルに飛ぶよ</a>`
`br`	改行するためのタグ	`ここで<br>改行する！`
`img`	画像を表示するためのタグ	`<img src="./img.png" alt="画像だよ">`

まずはページを表示してみよう！

座学はきっとつまらないと思うので、早速ページを表示してみましょう！

Visual Studio Code を開いて、「 sample.html 」というファイルを作ってみましょう。
※ ファイルは、左上にあるvscode-icons:default-fileみたいなマークを押したらできるよ！

ファイルができたら、下記のコードを書く or コピペしてください！

<!--DOCKTYPE html -->
<html>

<body>
  <h1>ページを表示してみよう</h1>
  <p>このように書くことで、文章を表示することができる。</p>
</body>

</html>

入力できたら、「 Ctrl + S 」でファイルを保存して、左下の「 Go Live 」を押して、ページを表示してみよう。
下の写真のようなページが表示されていたらクリア！

では、ここからは一つ課題に挑戦してみましょう！

課題：次の画像と同じになるように、sample.html を書き換えてみよう

使うタグ：<html> <body> <h1> <p> <br>

このように、HTMLで作られたページは、<h1></h1>などの様々な要素の組み合わせでできています。
自分の作りたいページに合わせて、好きなようにデザインできるのは、この要素を組み合わせているからということです。

2. CSSを書いてみよう！

さて、ここまで皆さんは HTML を書いてきましたね。しかし、これだけでは何か物足りない・おしゃれじゃないと思う人もいるでしょう。そういった装飾は、CSS を使って行います！ここからは、CSS について勉強していきましょう。

CSSの構文

CSSは以下の構文で書かれます。

セレクター {
  プロパティ: 値;
  プロパティ: 値;
}

セレクター はスタイルを適用する要素を選択します(例: h1, .class, #id)
プロパティ はスタイルの種類を指定します(例: color, font-size, background)
値はプロパティに対する設定値を指定します(例: color: red;, font-size: 16px;)

CSSを適用する方法

CSSをHTMLに適用する方法は3つあります。

インラインスタイル: HTMLタグに style 属性を使う方法
ドキュメントスタイル: <style> タグを使う方法
外部スタイルシート: 別の .css ファイルを読み込む方法

こちらについては、後で学んでいきましょう！

セレクターの種類

セレクターにはいくつかの種類があります。

タイプセレクター: 要素名を直接指定 (例: h1, p, div)
クラスセレクター: クラス属性を指定 (例: .class-name)
IDセレクター: IDを指定 (例: #id-name)
子孫セレクター: スペース区切りで指定 (例: ul li)
その他: 疑似クラス、疑似要素などがあります

よく使うプロパティ

color: 文字色を指定
background-color: 背景色を指定
font-size: 文字サイズを指定
font-family: フォントを指定
text-align: 文字の水平揃えを指定
margin, padding: 余白を指定
width, height: 要素のサイズを指定
display: 要素の表示方法を指定
position: 要素の位置指定方法を指定

課題：下記の要件をみたすページを作成してみよう

まずは、このコードを新たな html ファイルとして作成しましょう。

<!DOCTYPE html>

<html>
<head>
    <title>Home</title>

    <style>
        body {
            background-color: lightblue;
        }
        .header {
            background-color: aliceblue;
        }
        h1 {
            color: rgb(83, 83, 83);
        }
        p {
            font-family: verdana;
            font-size: 20px;
        }
        .main {
            height: 200vh;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>Home</h1>
    </div>
    <div class="main">
        <h2>Welcome to my website</h2>
        <p>This is a paragraph</p>
    </div>
    <div class="footer">
        <h2>Footer</h2>
    </div>
</html>

header がページをスクロールしても常に一番上で固定されるようにする
すべてのテキストが左右中央に表示されるようにする
main の中の文字は上下も中央にする

web制作講座２「準備中」