HTMLとは…
HTML（エイチ・ティー・エム・エル）は
「Hyper Text Markup Language」の略称で、ホームページ制作には欠かせないマークアップ言語です。
マークアップとは、文章や画像などをコンピューターが認識できるように、「タグ」を用いて意味付けすることです。
HTMLの基本的な構造
タグ…「<」と「>」で囲まれた英単語
開始タグ…文章の前にある<head>や<body>
閉じタグ…文章の後ろにある</head></body>などの「/」がついているタグ
HTMLではこの開始タグと閉じタグで文章などを囲むことで、その中身に役割を与えます。
例
<h1>
この文章が見出しになります
</h1>
属性について
HTMLでは、要素に属性という追加の情報をつけられます。属性はHTMLの開始タグの中に属性=”値”という形で記述します。属性は複数つけることもできます。
例
<a href=”index.html”>リンク</a>
<img src=”image.jpg” alt=”画像を説明する文章”>
HTMLの基本的なタグ
- <html>：このタグで囲んでいる部分がHTMLであることを表します
- <head>：HTMLの設定などを記述します
- <title>：Webページのタイトルを記載します。headの中で使用します。
- <header>：Webページのヘッダーを表します。headと混同しないようにしましょう
- <main>：webページのメインコンテンツを表します
- <footer>：webページのフッターを表します
- <body>：実際に表示される部分です
- <h1> ～ <h6>：見出しを表します
- <p>：段落を表します
- <ul>・<ol>：リストを表します。ulは順不同のリスト、olは順番があるリストです。
- <li> :リストの項目を表します。必ずulやolの中に入ります。
- <img>：画像を表します。閉じタグなし。src属性は必須、alt属性はほぼ必須です。
- <a>：リンクを表します。行先はhref属性です。
- <br> : 改行します。閉じタグなし。
- <div>：特定の意味を持たず、レイアウトのために使用します
- <table>：表を作成します
- <tr>：表の横1行を表します
- <th>：表の見出しセルです
- <td>：表の通常セルです
- <span>：特定の意味を持たないタグです。inline表示なので1行の中で使用します
下の画像では、「見出しタグ（<h2>）」「段落タグ（<p>）」「 画像タグ（<img>）」を用いています。
テキストエディタ（VS コード）
ブラウザの表示
HTMLファイルについて
HTMLのファイル形式….html(主流) or .htm
webサイトで最初に表示されるトップページのファイル名だけは必ずindex.htmlにします。2ページ目以降は自由につけて構いませんが、以下ルールがあります。
- 半角英数字
- ハイフン（-）、アンダーバー（_）
- スペースは使用できません
※画像のファイル名も同様のルール。わかりやすい名前にするのがポイント！
CSSとは…
CSS（シー・エス・エス）とは「Cascading Style Sheets」の略称で、ホームページのスタイル（見た目）を装飾するときに用いるスタイルシート言語です。
基本的には、HTML内の「どれ」に対して「どの部分」を「どうする」かを指定していきます。
例
p {
color: #000;
font-size: 16px;
}
CSSを書く位置
- HTMLファイルの<head>要素内
- HTMLの開始タグ内
- HTMLとは別のCSSファイル(主流)
別のCSSファイルに記述する場合は以下のようなコードを
HTMLのhead内に記載してCSSファイルを読み込みます
<link rel=”stylesheet” href=”css/style.css”>
CSSのファイル名
一般的にはstyle.cssというファイル名にすることが多い
要素に名前をつける「class」
例
HTML
<div class=”section-heading about__heading”>
<h2>ABOUT</h2>
<p>わたしたちについて</p>
</div>
CSS
.section-heading h2 {
color: #806E47 ;
font-size: 64px ;
}
一つの要素に複数のクラスをつけることもできます！
親要素と子要素
HTML
<div class=”section-heading about__heading”>
<h2>ABOUT</h2>
<p>わたしたちについて</p>
</div>
section-headingが親要素、その中のh2・pが子要素
よく使われるCSSのプロパティ
- color：テキストの色を指定します
- font-size：フォントのサイズを指定します
- font-family：フォントの種類を指定します
- text-align：テキストの水平方向の配置を指定します
- background-color：背景色を指定します
- width：要素の幅を指定します
- height：要素の高さを指定します
- margin：要素の外側の余白を指定します
- padding：要素の内側の余白を指定します
- border：要素の境界線を指定します
- display：要素の表示形式（ブロック、インラインなど）を指定します
他にも色々あるよ！
全て覚えるのは無理だから調べる力をつけよう
