Lesson03 -HTML・CSS
目次
HTMLタグの種類（強調,改行,注釈,問い合わせ先）
<strong>・<em>
どちらも「文字を強調する」ためのHTMLタグですが、「どのように強調したいか」が異なります。
strong は「重要な内容」を表すタグです。注意事項や警告、特に重要な情報を伝えたいときに使います。
一方、em は「強調したい部分」を表すタグで、文章の中で特定の言葉やニュアンスを強めたいときに使います。
CSSで手を加えないかぎり、strongは太字、emは斜体で表示されることが多いですが、違いは見た目ではなく意味にあります。
strong → 「ここは重要です」
em → 「ここを強く読んでほしいです」
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<br>
長い文章を途中で改行させるために使用するタグです。終了タグはありません。
見た目を整えるために余白を空けたい場合は<br>タグではなくCSSにて設定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<small>
注釈、免責事項、著作権などの法的な表記などを記述するときに使用します。
CSSで手を加えないかぎり小さな文字で表示されます
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<address>
問い合わせ先などを指定するためのタグです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<iframe>
別のWebページを、自分のページの中に表示するためのタグです。
たとえばGoogleマップやYoutube動画などをページ内に埋め込むときによく使われます。
イメージとしては、「ページの中に小さな別ウィンドウを表示する」ような仕組みです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
HTMLタグの種類（divとspan）
divとspanは共に「意味を持たない汎用的な範囲」を作ることができるタグです。
<div>
汎用的な範囲指定ができるブロックレベル要素のタグです。
見出しや段落、リストなどいくつかの要素をまとめて範囲を指定するときに使用します。
主にデザインを作る上で分類したい時に使います。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<span>
例えば文章や見出しなどの一部分を範囲を指定できるインライン要素のタグです。
<div>同様、主にデザインを作る上で何か特別な箇所に命令を出したいときに使います。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
| ブロックレベル要素 | インライン要素 | |
| 特徴 | ブロック（塊） | 要素の一部 |
| 改行 | 前後に改行が入る | 前後に改行は入らない |
| 種類 | ・見出しタグ h1~h6 ・段落 p ・リスト ul ol dl ・範囲を指定するタグ divなど など | ・リンク a ・画像 img ・強調 em strong ・範囲を指定する span ・注釈 small など |
HTMLタグの種類（特定の範囲を指定する）
ページのこの部分、この要素など特定の範囲指定を行うタグです。
<header>
ページの上部にあるヘッダーと呼ばれる箇所をグループ化するためのタグです。
ページタイトル、ロゴ画像、ナビゲーションメニュー等を含みます。
制作者によってどこまでをヘッダーの範囲とするかは異なり、また上に書いた別の要素を含む場合もあります。
ページのメインとなるナビゲーションメニュー（グローバルナビゲーションと言います）を作るためのタグです。
補足的なナビゲーションやただのテキストリンクはnavを使う必要はありません。
<main>
そのページのメインとなる重要なコンテンツ全体をグループ化するタグです。
<article>
読み物、記事を範囲指定するためのタグです。
例えば、ニュースやブログサイトの記事など、その部分を切り取って見ても独立した内容になっているものをさします。
ブログ、ニュース以外でも記事として成立していればarticleで囲むことができます。
<section>
ページ内に章・節・項などを範囲指定するためのタグです。
含んだ範囲を一つのセクションとして区切り、1章、2章、3章のようにテーマごとに情報を分ける場合に使用します。
ページ最下部のフッター部分を囲むためのタグです。
サイトタイトルやナビゲーションメニューの内容、著作権表記、問い合わせ先やSNS情報などを載せます。
<aside>
メインコンテンツではない補足情報を作るためのタグです。
例えばブログページの右にあるアーカイブ情報やカレンダー機能など、メインのコンテンツ以外の補足情報をまとめておくために使用します。
HTMLタグの種類（表組み）
例えば料金表のような表組みを作るためのタグです。
Table tag Generatorを使うことで複雑な表組みでも簡単に作成することができますが、ここではそれぞれの要素を解説します。
<table>
表組み全体を囲むためのタグです。
例）3列×3行の表組み
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<tr>
行を指定するためのタグです。1行を1対のtrタグで囲みます。
<th>
見出しセルを指定するためのタグです。1つの見出しセルを一対のthタグで囲み、内容を入力します。
<td>
通常セルを指定するためのタグです。1つの通常セルを1対のtdタグで囲み、内容を入力します。
HTMLタグの種類（フォーム）
お問い合わせフォームなどを作る時に使用するフォームタグです。
<form>
フォーム全体を囲むためのタグです。開始タグと終了タグでフォームの中の要素を囲みます。
開始タグ内に必ず「action属性」と「method属性」を記述します。
action属性
入力した情報をどこに送るのかの指定をします。通常、送り先はcgiというファイルのパスを記述します。
無料CGIツール：https://www.php-factory.net/mail/01.php
method属性
入力した情報の送信方法を指定します。値は「post」「get」のどちらかです。
getを指定した場合は送れる文字数に上限があります。（約2,083文字）
<input>
formの中で入力欄やボタンなどを作成するためのタグです。
開始タグの中に、主に以下のものを記述します。
・type属性＝何を入力するためのものなのか
・name属性＝その情報を送信した時に補足説明となる内容
・value属性＝表示、送信される値
ここではテキスト入力・メールアドレス入力・ラジオボタン・送信ボタン・テキストエリアを紹介します。
テキスト入力欄（type=”text”）
文字を入力するための入力欄です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
メールアドレス入力欄（type=”email”）
メールアドレスを入力するための入力欄です。メールアドレス以外が入力されるとエラーを返します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
ラジオボタン（type=”radio”）
複数の選択肢の中から一つを選ばせたい時に使うためのボタンです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
送信ボタン（type=”submit”）
formの中で入力した情報を送信するためのボタンです。
このボタンを押すと、<form>タグのaction属性で指定したプログラム（cgi）に情報が送られます。
value属性の内容は、送信ボタンに表示されます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
テキストエリア（textarea）
複数行の文字を入力できるテキストエリアを作るためのタグです。
開始タグと終了タグができますが、特に内容を持つわけではありません。「cols」は横に並ぶ文字の数、「rows」で縦に並ぶ文字の数を指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
CSSとは
Cascading Style Sheetsの略で、HTMLタグで囲んだテキストなどの要素に、色・大きさ・余白・配置などを指定するための言語です。
HTMLで作成した文書に対してデザインを加えることができます。
HTMLの作成が完了したら、CSSを作成して1箇所ずつスタイル（見た目）を整えていきます。
CSSの適用方法
まず、CSSの適用方法には主に3つの方法があります。
インライン型
タグの中に直接CSSの命令を書く方法です。（古い記述方法になるため、現在は非推奨です）
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
埋め込み型
HTMLのheadタグ内に<style>タグを設置しCSSの命令を記述する方法です。
（非推奨ではありませんが、HTMLとCSSの記述が長くなるデメリットがあります）
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
外部型
HTMLとは別にCSSファイルを用意し、HTMLにCSSのリンクを記述することで適用させる方法です。
（最も多く採用されているCSSの適用方法です）
HTMLのheadタグ内に<link rel=”stylesheet” href=””>と記述し、href=””の中に適用させたいCSSのパスを記述します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
CSSのファイル名のルール
基本的にはHTMLと変わりはありません。
- ・名前に使えるのは半角英数字、記号は-（ハイフン）or_（アンダーバー）のみ
- ・スペースは不可
- ・ファイル名はHTMLでいうindex.htmlのような決まりはなく、任意の名前でOK
（メインとなるCSSには通常style.cssという名前がつけられることが多いです）
参考リンク
・HTMLの入れ子とは？ルールについて
https://webtan.tech/how_to_nest/
・W3C文法チェックツール
https://validator.w3.org/
・文字実体参照
https://mimi.moe.in/nmp/hms/cer
・テーブル生成ツール
https://tabletag.net/ja/
・フォーム作成が劇的にラクになる！フォームタグ生成ツール（Form Tag Generator）
https://nnc-studio.jp/plugin/2025/03/24/form_tag_generator/
・CGI フリー
https://www.php-factory.net/mail/01.php
・Web制作｜フォルダ構造の考え方やオススメの構成を紹介！【HTML／CSS】
https://pengi-n.co.jp/blog/folder-structure/
