2025/3/25 「HTML/CSS基礎②」の記録です。
講師：小谷 祥吾先生
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
メモ
- ヘッダーエリア <header>：キャンペーンなど、重要な情報を表示する
- コーポレートサイト：企業のブランドイメージや信頼性を向上させるためのサイト
- LP：特定の目標（例えば商品の購入、資料請求、イベント登録など）に訪問者を誘導するページ。
1ページで情報を完結させる。 - LPの参考サイト：LPアーカイブ
- メインエリアの中身は、人によって呼び方が違う
（アイキャッチ＝アイコン、テキスト＝本文など） - 「フォルダ構造」＝「ディレクトリ構造」と解釈してOK（「パス構造」）
- TeraPadはWindows向けの無料ソフトウェア。公式サイトからダウンロードできる。
ファイルの整理
WEB サイトを作成する時には、１つのページにつき１つの HTML ファイルを作成する必要があります。
大規模なWebサイトでは、画像が膨大になるため、ファイルを種類ごとにフォルダ分けすることで管理しやすくなります。
例えば、画像ファイルを「images」や「img」といったフォルダにまとめることで、整理整頓され、検索や管理がスムーズになります。
これにより、誤削除や時間の無駄を防ぐことができます。
- html
- css
- 画像（.jpg / .png / .gif など）
ファイル名は、半角英数字のみ使用する
HTMLファイルを作成する
- メニューの「ファイル」から「新規作成」を選択
- 「文字 / 改行コード指定保存」を選択
- 「文字コード」欄で UTF-8N を選ぶ（UTF-8Nがない場合は、UTF-8でOK）
- ファイル名を入力し、拡張子を「.html」にする
- 「保存」にチェックを入れて、保存を完了
テキストは事前に書き起こしておくといい。
コーディング中に全角半角の切り替えを繰り返す手間や、全角タグ記述のミスを防ぎ、時短と正確さを実現できる。
<!doctype html>
<!doctype html>は、HTML5のドキュメントタイプ宣言で、ブラウザが「互換モード」にならないよう必ず記述する必要がある。
ただし、一部のECサイトでは意図的に互換モードを使用する場合もある。
Terapadに入れると、青くなる。（HTMLタグの目印）
ファイル名に「*」がついているときは、前回保存したときから編集されている時
<html> ～ </html>
改行して2行目に <html>、最終行に </html> を記述してテキスト全体を囲む。
HTMLを構成する全ての要素は、このタグの間に書く。
<head>
<head>要素には、メタデータ、スクリプト、スタイルシートの紐づけなど、ブラウザに表示されないが機械処理に必要な情報を記述する。
ヘッダーエリアとは別物なので混同しないよう注意する。
<body> ～ </body>
《本文テキスト》全体を <body> 要素で囲みます。
</body> は最終行〈/html〉の直前です。
ここに書かれた内容がブラウザの画面に表示されます。
<!DOCTYPE html> <html lang=”ja”> <head> ≪ヘッダー情報（文書メタデータ）≫ 【サイトのタイトル】新宿の生花店|Flower Days(デイズ) 公式サイト 【検索用キーワード】花屋,ブーケ,ギフト,ブライダル 【サイト説明要約】東京都新宿区新宿の生花店、フラワーデイズのウェブサイトです。日々の生活を彩る花はもちろん、お祝いや季節の贈り物も真心込めてお届け致します。ウェブサイトからのご注文も可能です。 </head> <body> ≪本文テキスト≫ ・ ・ ・ 【画像 このページのtopへ戻る 50*50px】 </body> </html>
html 要素のなかには head 要素と body 要素がそれぞれひとつずつ必要
（2つ以上あったらダメ）
〈head〉の内容を記述する
- metaタグは、開始タグのみ
- metaタグ＝属性
<meta charset="UTF-8">
文字エンコードを指定するタグで、日本語の文字が正しく表示されるようにするため、必ず<head>タグ直後に記述する。
<meta name="description" content="～～～">
ページの概要を指定するタグで、内容が検索結果に表示される。
例: 「フラワーデイズのウェブサイト。お祝いの花や季節の贈り物を提供。」
<meta name="keywords" content="～～～">
ページ内容を表すキーワードを記載するタグ。
ただし、現在では重要度が低下しており、必要なら3～5個のキーワードを記載する（例: 花屋, ブーケ, ギフト, ブライダル）。
（入れないことのほうが多い）
<title> ～ </title>
<title>タグにページのタイトルを設定する。
タイトルはブラウザのタブ、ブックマーク、検索結果で表示されるため、内容を明確に示す分かりやすい名称にする。
例: 『新宿の生花店│Flower Days公式サイト』。
〈body〉の内容を記述する
ヘッダーエリア <header> ～ </header>
HTMLでページやセクションのヘッダー部分を定義するために使用される。
このエリアには通常、タイトル、ロゴ、ナビゲーションメニュー、概要などの情報が含まれる。
<nav> ～ </nav>
ロゴを含むナビゲーションメニュー
<ul>～</ul>
箇条書きリスト
<li>～</li>
順序なしリスト
<ul>タグ（順序なしリスト）を使う場合、リストの項目を表す<li>タグ（リストアイテム）は必ず含む必要があります。
<li>タグがないとリストの内容を適切に表現できなくなるためです。
<ul> <li>りんご</li> <li>バナナ</li> <li>オレンジ</li> </ul>
注意点
ただし、<li>タグは<ul>だけでなく、順序付きリストの<ol>や、定義リストの<dl>内でも使用されることがあります。
つまり、<li>は必ず<ul>や<ol>とセットで使われますが、<ul>そのものは<li>タグが必要不可欠です。
メインエリア <main> ～ </main>
HTMLで文書やページの主要なコンテンツエリアを定義するタグ。
このエリアには、ページの中心的な内容が含まれ、サイドバーやヘッダーなどの補足的なコンテンツは含まれない。
<section> ～ </section>
HTMLで文書やページ内の特定のセクションを定義するためのタグ。
内容を論理的に区分けし、それぞれにまとまりを持たせる際に使用される。
見出しや記事、フォーム、リストなど、異なる種類のコンテンツを含むことができる。
<div>～</div>
コンテンツをまとめるための汎用的なコンテナとして使用される。
特にスタイルやスクリプトを適用するために、要素をグループ化する際によく使われる。
<p>～</p>
段落（paragraph）を表すためのタグ。
文章を構造的に分けるときに使用され、各段落は自動的に改行されて表示される。
HTML：構造化タグ
- article 要素（アーティクル）
- section 要素（セクション）
- nav 要素（ナビ）
- aside 要素（アサイド）
- h1～h6 要素（見出し）
- header 要素（ヘッダー）
- footer 要素（フッター）
HTML：コンテンツのグループ化タグ
- p 要素（段落（パラグラフ））
- hr 要素（区切り）
- ol/li 要素（順序のあるリスト）
- ul/li 要素（順序のないリスト）
- dl/dt/dd 要素（定義・説明リスト）
- main 要素（メインコンテンツ）
- div 要素（ひとつのかたまりの範囲）
divとsectionの違い
divは構造的な目的で使用され、内容に意味を持たせる必要がない場合に便利です。
sectionは構造的な目的で使用され、内容に意味を持たせる必要がない場合に便利です。
どちらを使うべきかは、内容の目的や役割によって決まります。
インデントを揃える
tabの文字数を変える
「表示」→「タブの文字数」→「2」
