2. HTML/CSS

保護中: WEB制作【1期生】

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ページ目以降は自由につけて構いませんが、以下ルールがあります。

半角英数字
ハイフン（-）、アンダーバー（_）
スペースは使用できません

※画像のファイル名も同様のルール。わかりやすい名前にするのがポイント！

metaタグはブラウザや検索エンジンに対して、そのページがどのような設定や内容であるかを伝える重要な役割を持っています。画面には直接表示されませんが、正しく設定しないと文字化けやレイアウト崩れの原因になります。

よく使われる代表的なmetaタグとhead内の記述：

文字コードの指定：<meta charset=”UTF-8″>
これを指定しないと、日本語が文字化けしてしまう可能性があります。
ビューポートの設定：<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
スマートフォンなどで見たときに、画面幅に合わせて適切に表示（レスポンシブ対応）させるために必須のタグです。
ページの説明：<meta name=”description” content=”ページの説明文”>
検索エンジンの検索結果に表示される説明文（スニペット）として使われることが多く、SEO（検索エンジン最適化）の観点でも重要です。
キーワードの指定：<meta name=”keywords” content=”キーワード1, キーワード2″>
ページに関連するキーワードを指定します
※現在Googleの検索順位には影響しないと言われていますが、サイトの管理上記述することがありますが特に必要がなければ記載不要。
ページのタイトル：<title>タイトルが入ります</title>
ブラウザのタブや検索結果の見出しとして表示される、非常に重要なタグです。

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 ; 
}

classは好きにつけることができますが、ルールがあります。

半角英数字と「-」「_」のみを使用可能です
数字から始めることはできません（.1 や、.1title など）

一つの要素に複数のクラスをつけることもできます！

BEM（ベム）の書き方について

class名をつける際、適当につけると後からCSSの管理が難しくなります。そこで、世界中でよく使われている命名規則の一つが「BEM（Block, Element, Modifier）」です。

BEMでは、Webページの構成要素を「Block（かたまり）」「Element（要素）」「Modifier（状態・変化）」の3つに分けて考えます。

Block（ブロック）：独立して意味を持つかたまり（例：.card, .header
Element（エレメント）：Blockを構成する要素。Block名とアンダースコア2つ（__）で繋ぎます（例：.card__title, .card__image）
Modifier（モディファイア）：見た目や状態の違い。ハイフン2つ（–）で繋ぎます（例：.card–active, .card__title–red）

このように命名することで、「どの部分のスタイルか」「親要素は何か」がクラス名を見ただけでわかるようになり、チームでの開発や後からの修正がとても楽になります。

※BEMの詳しい書き方や具体例については、以下の参考サイトがとてもわかりやすいのでぜひ読んでみてください！

参考サイト
一番詳しいBEMの解説

親要素と子要素

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：要素の表示形式（ブロック、インラインなど）を指定します

他にも色々あるよ！
全て覚えるのは無理だから調べる力をつけよう

paddingとmarginの違い

paddingとmarginはともに余白を表すプロパティです。その違いについて覚えましょう。

参考サイト
https://saruwakakun.com/html-css/basic/margin-padding

flexboxについて

Webデザインをしていると、特にPC用のレイアウトで要素を横並びにしたいことが多く出てきます。その際に、flexboxという仕組みを使います。

flexboxでは横並びにしたい要素の親要素にdisplay:flexを指定することで、横並びを実現できます。

また、同時にjustify-contentやaline-itemsを使うことで、横並びにした要素の間隔や位置の調整なども簡単にできます。

例

親要素にdisplay: flexを指定します。
.examples {
display: flex;
justify-content: center;
/* 横並び要素を中央に配置します */
gap: 40px; /* 要素間の間隔を開けます */
}

Google Chromeデベロッパーツール

Google Chromeのデベロッパーツールを使いこなすことは、Web制作をするうえで必須のスキルです。

Google Chromeデベロッパーツールの起動方法は、Google Chromeで対象のWebサイトを開いた状態で右クリックをして「検証」をクリックするだけです。

デバイスごとの表示を確認したり、エラーを確認したりすることができます。

参考サイト
Google Chromeデベロッパーツールを初心者が使いこなす方法

レスポンシブ対応（メディアクエリ）

スマートフォンやタブレットなど、画面サイズが異なるデバイスでもWebサイトを適切に表示させるための手法を「レスポンシブ対応」と呼びます。CSSでは「メディアクエリ（Media Queries）」という機能を使って、画面幅に応じたスタイルを適用します。

メディアクエリの基本的な書き方
@media screen and (min-width: 768px) {
/* 画面幅が768px以上（タブレットやPC）の場合に適用されるスタイル */
.title {
font-size: 32px; /* スマホより文字を大きくする */
}
.examples {
display: flex; /* 縦並びを横並びに変更 */
}
}

このように、@mediaを使って条件（例：min-width: 768px）を指定し、その中に適用したいCSSを記述します。スマートフォン用のスタイルを基本として書き、メディアクエリ内でタブレットやPC用のスタイルを上書きする「モバイルファースト」が現在の一般的な手法です。

よく使われるブレークポイント

ブレークポイントとは、レイアウトが切り替わる画面幅の基準値のことです。デバイスの種類によって代表的な値があります。
スマートフォン：〜767px
タブレット：768px〜1024px
PC：1025px〜

ただし、特定のデバイスに縛られず、どんな画面幅でもデザインが崩れないように調整が必要です。

モバイルファーストとは

最初にスマートフォン向けのスタイルを書き、そこからタブレット・PCの順にスタイルを追加していく考え方を「モバイルファースト」と呼びます。現在はスマートフォンでのアクセスが多いため、モバイルファーストで設計することが推奨されています。

Cart

Search

People also search for: